From 0778f166129feacb621f588250fe87e8ca8726a5 Mon Sep 17 00:00:00 2001 From: Chris Kwan Date: Wed, 21 Oct 2015 22:04:06 -0400 Subject: [PATCH 1/5] Add comments about what to move to p2p --- index.html | 2 ++ whiteboard.js | 18 +++++++++++++++++- 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b9ab225..1d4dccf 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,8 @@

Hold your mouse down and move to draw

+ + \ No newline at end of file diff --git a/whiteboard.js b/whiteboard.js index 59a5758..e15b506 100644 --- a/whiteboard.js +++ b/whiteboard.js @@ -18,6 +18,7 @@ document.getElementById("connectLink").innerHTML = window.location; document.getElementById("protocol").innerHTML = window.location.protocol; + //cwkTODO move to p2p setUpPeer(); } @@ -66,6 +67,8 @@ }; drawPoint(point, penColor); + + //cwkTODO move to p2p sendPointToPeers(point, penColor); } @@ -73,6 +76,7 @@ isDrawing = false; } + //cwkTODO move to p2p function sendPointToPeers(point, color) { for (var currentPeerId in peer.connections) { if (!peer.connections.hasOwnProperty(currentPeerId)) { @@ -89,6 +93,8 @@ } } + //cwkTODO move to p2p + //cwkTODO split? function sendPathToPeers(path, color) { for (var currentPeerId in peer.connections) { if (!peer.connections.hasOwnProperty(currentPeerId)) { @@ -126,9 +132,12 @@ function setUpUI() { createColorRadioButtons(); + + //cwkTODO move to p2p setUpPeerConnectUI(); } + //cwkTODO move to p2p function setUpPeerConnectUI() { var peerIdInput = document.getElementById("peerIdInput"); var connectBtn = document.getElementById("connectBtn") @@ -164,6 +173,7 @@ } } + //cwkTODO move to p2p // Sending a connection to a peer (i.e.: you hit the Connect button) function connectToPeer(peerId) { var conn = peer.connect(peerId); @@ -180,6 +190,7 @@ }); } + //cwkTODO move to p2p function setUpPeer() { peer = new Peer({ key: 'lwjd5qra8257b9', //cwkTODO this is the demo api key @@ -225,6 +236,8 @@ }); } + //cwkTODO move to p2p + //cwkTODO split? function updateConnectionsList() { var connectionList = document.getElementById("connectionList"); @@ -247,6 +260,7 @@ connectionList.innerHTML = connectionListString.length ? connectionListString : "Nobody ( everyone left :( )"; } + //cwkTODO move to p2p function createConnectLink() { var connectLink = document.getElementById("connectLink"); // Ref: http://stackoverflow.com/a/5817548 @@ -254,6 +268,7 @@ connectLink.value = urlWithoutQueryString + "?connectTo=" + peer.id; } + //cwkTODO move to p2p function connectToPeerInUrl() { // There's probably a way to do this with one regex, // but I think this is more readable @@ -278,6 +293,7 @@ } } + //cwkTODO move to p2p function setUpCanvasForConnection(conn) { conn.on('data', function (data) { if (data.connections) { @@ -303,4 +319,4 @@ statusArea.innerHTML = newStatus.outerHTML + statusArea.innerHTML; } -})(); \ No newline at end of file +})(); From 7f941686afddffaa4f4236bd5eed2a792659c34f Mon Sep 17 00:00:00 2001 From: Chris Kwan Date: Wed, 21 Oct 2015 22:35:13 -0400 Subject: [PATCH 2/5] Move creation of peer and connectToPeer to p2p.js --- index.html | 6 +++++- p2p.js | 31 +++++++++++++++++++++++++++++++ whiteboard.js | 18 +++++------------- 3 files changed, 41 insertions(+), 14 deletions(-) create mode 100644 p2p.js diff --git a/index.html b/index.html index 1d4dccf..28590a1 100644 --- a/index.html +++ b/index.html @@ -44,8 +44,12 @@

Hold your mouse down and move to draw

+ - + \ No newline at end of file diff --git a/p2p.js b/p2p.js new file mode 100644 index 0000000..b000786 --- /dev/null +++ b/p2p.js @@ -0,0 +1,31 @@ +Whiteboard.p2p = (function () { + var peer; //cwkTODO should i make a constructor function instead? + return { + createPeer: function () { + peer = new Peer({ + key: 'lwjd5qra8257b9', //cwkTODO this is the demo api key + debug: 3 + }); + return peer; + }, + + + connectToPeer: function (peerId, openCallback, closeCallback) { + var conn = peer.connect(peerId); + + // Connection has been established + conn.on('open', function () { + if (openCallback) { + openCallback(conn); + } + }); + + conn.on('close', function () { + if (closeCallback) { + closeCallback(conn); + } + }); + } + + }; +})(); diff --git a/whiteboard.js b/whiteboard.js index e15b506..3e2c9de 100644 --- a/whiteboard.js +++ b/whiteboard.js @@ -10,6 +10,8 @@ initialize(); function initialize() { + alert(Whiteboard.p2p.speak); + setUpCanvasEvents(); setUpUI(); @@ -173,29 +175,19 @@ } } - //cwkTODO move to p2p // Sending a connection to a peer (i.e.: you hit the Connect button) function connectToPeer(peerId) { - var conn = peer.connect(peerId); - - // Connection has been established - conn.on('open', function () { + Whiteboard.p2p.connectToPeer(peerId, function (conn) { setUpCanvasForConnection(conn); updateConnectionsList(); - }); - - conn.on('close', function () { + }, function (conn) { addToStatus(conn.peer + " left the whiteboard. Oh well."); updateConnectionsList(); }); } - //cwkTODO move to p2p function setUpPeer() { - peer = new Peer({ - key: 'lwjd5qra8257b9', //cwkTODO this is the demo api key - debug: 3 - }); + peer = Whiteboard.p2p.createPeer(); // Initialization - ready to receive connections peer.on('open', function (id) { From e5283884d27c8feee5dbc4791c55fb113dbb4bef Mon Sep 17 00:00:00 2001 From: Chris Kwan Date: Wed, 21 Oct 2015 22:57:38 -0400 Subject: [PATCH 3/5] Move more peer initialization to p2p --- p2p.js | 14 +++++++++++++- whiteboard.js | 14 +++----------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/p2p.js b/p2p.js index b000786..c6f0c2d 100644 --- a/p2p.js +++ b/p2p.js @@ -1,11 +1,23 @@ Whiteboard.p2p = (function () { var peer; //cwkTODO should i make a constructor function instead? + return { - createPeer: function () { + createPeer: function (openCallback, connectionCallback) { peer = new Peer({ key: 'lwjd5qra8257b9', //cwkTODO this is the demo api key debug: 3 }); + + if (openCallback) { + // Initialization - ready to receive connections + peer.on('open', openCallback); + } + + if (connectionCallback) { + // Receiving a connection from a peer (i.e.: they hit the Connect button) + peer.on('connection', connectionCallback); + } + return peer; }, diff --git a/whiteboard.js b/whiteboard.js index 3e2c9de..fa2f093 100644 --- a/whiteboard.js +++ b/whiteboard.js @@ -10,8 +10,6 @@ initialize(); function initialize() { - alert(Whiteboard.p2p.speak); - setUpCanvasEvents(); setUpUI(); @@ -187,10 +185,7 @@ } function setUpPeer() { - peer = Whiteboard.p2p.createPeer(); - - // Initialization - ready to receive connections - peer.on('open', function (id) { + peer = Whiteboard.p2p.createPeer(function (id) { addToStatus('My peer ID is: ' + id); document.getElementById("mypeerid").value = id; @@ -198,11 +193,8 @@ createConnectLink(); connectToPeerInUrl(); - }); - - // Receiving a connection from a peer (i.e.: they hit the Connect button) - peer.on('connection', function (conn) { - + }, function (conn) { + //cwkTODO want to move these into p2p but not sure how setUpCanvasForConnection(conn); conn.on('open', function () { From 54299ce91e2a6b647bf61cb0b45c4be439e60506 Mon Sep 17 00:00:00 2001 From: Chris Kwan Date: Fri, 30 Oct 2015 00:17:50 -0400 Subject: [PATCH 4/5] Refactor out some duplicated logic --- whiteboard.js | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/whiteboard.js b/whiteboard.js index fa2f093..3ebe509 100644 --- a/whiteboard.js +++ b/whiteboard.js @@ -76,26 +76,19 @@ isDrawing = false; } + //cwkTODO is this still needed? //cwkTODO move to p2p function sendPointToPeers(point, color) { - for (var currentPeerId in peer.connections) { - if (!peer.connections.hasOwnProperty(currentPeerId)) { - return; - } - - var connectionsWithCurrentPeer = peer.connections[currentPeerId]; + sendDataToPeers({point: point, color: color}); + } - // It's possible to have multiple connections with the same peer, - // so send on all of them - for (var i=0; i Date: Fri, 30 Oct 2015 00:23:05 -0400 Subject: [PATCH 5/5] Add real-time --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 810314c..6d96c2b 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,2 @@ # whiteboard -Collaborate using HTML5 Canvas and [PeerJS](https://github.com/peers/peerjs/) +Collaborate in real-time using HTML5 Canvas and [PeerJS](https://github.com/peers/peerjs/)