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/) diff --git a/index.html b/index.html index b9ab225..28590a1 100644 --- a/index.html +++ b/index.html @@ -44,6 +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..c6f0c2d --- /dev/null +++ b/p2p.js @@ -0,0 +1,43 @@ +Whiteboard.p2p = (function () { + var peer; //cwkTODO should i make a constructor function instead? + + return { + 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; + }, + + + 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 59a5758..3ebe509 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,23 +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]; - - // It's possible to have multiple connections with the same peer, - // so send on all of them - for (var i=0; i