Merge pull request #13 from colkito/feature/multipeers-support

Feature/multipeers support

css/main.css

@@ -47,8 +47,8 @@ body {
 }
 
 .panel {
-	background: #FFFFFF;
-	padding: 0.25rem 1rem;
+  background: #FFFFFF;
+  padding: 0.25rem 1rem;
 }
 
 button.primary { background-color: #111; }

index.html

@@ -60,25 +60,25 @@
           Connecting to wallet...
         </div>
         <div ng-show="!loading">
-        <div class="row">
-          <div class="large-6 columns">
-            <h3>Join wallet</h3>
-            <input type="text" class="form-control" placeholder="Peer ID" ng-model="connectionId" autofocus>
+          <div class="row">
+            <div class="large-6 columns">
+              <h3>Join wallet</h3>
+              <input type="text" class="form-control" placeholder="Peer ID" ng-model="connectionId" autofocus>
+            </div>
+            <div class="large-3 columns">
+              <button class="button primary expand round" type="button" ng-click="join(connectionId)">Join</button>
+            </div>
           </div>
-          <div class="large-3 columns">
-            <button class="button primary expand round" type="button" ng-click="join(connectionId)">Join</button>
+          <hr>
+          <div class="row">
+            <div class="large-6 columns">
+              <h3>Create a new wallet</h3>
+            </div>
+            <div class="large-3 columns">
+              <button class="button secondary expand round" ng-click="create()">Create</button>
+            </div>
           </div>
         </div>
-        <hr>
-        <div class="row">
-          <div class="large-6 columns">
-            <h3>Create a new wallet</h3>
-          </div>
-          <div class="large-3 columns">
-            <button class="button secondary expand round" ng-click="create()">Create</button>
-          </div>
-        </div>
-        </div>
       </div>
     </script>
 
@@ -88,9 +88,9 @@
           <h1>I am <p class="text-muted">{{$root.peerId}}</p></h1>
         </div>
         <div class="large-6 columns">
-          <h3 class="panel-title">Copayers ({{$root.copayers.length}}/5)</h3>
+          <h3 class="panel-title">Copayers ({{$root.connectedPeers.length}}/5)</h3>
           <ul class="no-bullet">
-            <li class="panel" ng-repeat="copayer in $root.copayers">
+            <li class="panel" ng-repeat="copayer in $root.connectedPeers">
               <span ng-if="copayer == $root.peerId"> You ({{$root.peerId}})<i class="fi-check size-24"></i></span>
               <span ng-if="copayer != $root.peerId">{{copayer}}</span>
             </li>

js/controllers/peer.js

@@ -4,10 +4,8 @@ angular.module('copay.peer').controller('PeerController',
   function($scope, $rootScope, $location, $routeParams, Network) {
     
     $scope.init = function() {
-      Network.connect($rootScope.connectionId, function(copayer) {
-        console.log(copayer);
-        console.log($rootScope.copayers);
-      });
+      console.log('connecting peer init');
+      //Network.connect($rootScope.masterId);
     };
   });
 

js/controllers/signin.js

@@ -4,31 +4,22 @@ angular.module('copay.signin').controller('SigninController',
   function($scope, $rootScope, $location, Network) {
     $scope.loading = false;
     $rootScope.peerId = null;
-    $rootScope.copayers = [];
-    
+
     $scope.create = function() {
       $scope.loading = true;
+
       Network.init(function(pid) {
-        $rootScope.copayers.push(pid);
+        $rootScope.masterId = pid;
         $location.path('peer'); 
       });
     };
 
     $scope.join = function(cid) {
       $scope.loading = true;
-      $rootScope.connectionId = cid;
-      Network.init(function(pid) {
-
-        console.log('------- join --------');
-        console.log(pid);
-
-        $rootScope.copayers.push(pid);
-        
-        Network.connect(cid, function(copayer) {
-          console.log('----- join master --------');
-          console.log(copayer);
-          $rootScope.copayers.push(copayer);
 
+      Network.init(function() {
+        Network.connect(cid, function() {
+          $rootScope.masterId = cid;
           $location.path('peer');
         });  
       });

js/services/network.js

@@ -1,91 +1,157 @@
 'use strict';
 
 angular.module('copay.network')
-  .factory('NetworkTest', function() {
-    this.f = function() {
-      return 2;
-    };
-  })
   .factory('Network', function($rootScope) {
     var peer;
-    var connectedPeers = {};
+    $rootScope.connectedPeers = [];
+    $rootScope.connectedTo = [];
+    $rootScope.masterId = null;
+    $rootScope.peerId = null;
 
-    var _onConnect = function(c, cb) {
-      if (c.label === 'wallet') {
-        var a = peer.connections[c.peer][0];
-        console.log(peer.connections[c.peer][0]);
-        console.log(a);
-        a.send('------ origin recived -------');
-        
-        c.on('data', function(data) {
-          console.log('------ new data ------');
-          console.log(data);
+    var _arrayDiff = function(a, b) {
+      var seen = [];
+      var diff = [];
 
+      for ( var i = 0; i < b.length; i++)
+        seen[b[i]] = true;
 
-          console.log(peer.connections);
+      for ( var i = 0; i < a.length; i++)
+        if (!seen[a[i]])
+          diff.push(a[i]);
 
+      return diff;
+    };
 
-          c.on('close', function() {
-            alert(c.peer + ' has left the wallet.');
-            delete connectedPeers[c.peer];
+    var _sender = function(pid, data) {
+      if (pid !== $rootScope.peerId) {
+        console.log('-------- sending data to: ' + pid + ' --------');
+        var conns = peer.connections[pid];
+
+        if (conns) {
+          var str = JSON.stringify({
+            sender: $rootScope.peerId,
+            data: data
           });
-        });
 
-        setTimeout(function() {
-          a.send('.........................');
-          cb(c.peer);
-        }, 1000);
+          for (var i = 0; i < conns.length; i++) {
+            var conn = conns[i];
+            conn.send(str);
+          }
+        }
       }
     };
 
+    var _onData = function(data) {
+      console.log('-------- Data received --------');
+      console.log(data);
+      var obj = JSON.parse(data);
+
+      if (obj.data.peers) {
+        _connectToPeers(obj.data.peers);
+      }
+    };
+
+    var _connectToPeers = function(peers) {
+      var arrayDiff = _arrayDiff(peers, $rootScope.connectedTo);
+
+      arrayDiff.forEach(function(pid) {
+        _connect(pid);
+      });
+    };
+
     var _init = function(cb) {
-      peer = new Peer({
-        key: 'lwjd5qra8257b9',
+      peer = new Peer($rootScope.peerId, {
+        key: 'lwjd5qra8257b9', // TODO: we need our own PeerServer KEY (http://peerjs.com/peerserver)
         debug: 3
       });
 
-      peer.on('open', function() {
-        $rootScope.peerId = peer.id;
-        $rootScope.peerReady = true;
-        cb(peer.id);
+      peer.on('open', function(pid) {
+        $rootScope.peerId = pid;
+        $rootScope.connectedPeers.push(pid);
+
+        cb(pid);
+
         $rootScope.$digest();
       });
+
+      peer.on('connection', function(conn) {
+        if (conn.label === 'wallet') {
+          conn.on('open', function() {
+            console.log('-------- ' + conn.peer + ' conected to me --------');
+
+            console.log($rootScope.masterId);
+            console.log($rootScope.peerId);
+
+            if ($rootScope.masterId === $rootScope.peerId) {
+              console.log('-------- I am the master --------');
+              var c = peer.connect(conn.peer, {
+                label: 'wallet',
+                serialization: 'none',
+                reliable: false,
+                metadata: { message: 'hi peer!' }
+              });
+
+              c.on('open', function() {
+                $rootScope.connectedPeers.push(conn.peer);
+                $rootScope.connectedTo.push(conn.peer);
+
+                _send($rootScope.connectedPeers, { peers: $rootScope.connectedPeers });
+
+                $rootScope.$digest();
+              });
+            }
+          });
+        }
+      });
+
+      peer.on('close', function() {
+        console.log('------- connection closed ---------');
+      });
     };
 
     var _connect = function(pid, cb) {
-      peer.on('connection', function(conn) {
-        _onConnect(conn, cb);
-      });
+      if (pid !== $rootScope.peerId) {
+        console.log('------- conecting to ' + pid + ' ------');
+        var c = peer.connect(pid, {
+          label: 'wallet',
+          serialization: 'none',
+          reliable: false,
+          metadata: { message: 'hi copayer!' }
+        });
 
-      var c = peer.connect(pid, {
-        label: 'wallet',
-        serialization: 'none',
-        reliable: false,
-        metadata: { message: 'hi! copayers' }
-      });
+        c.on('open', function() {
+          console.log('-------- I\'m connected to ' + pid + ' ------');
+          console.log($rootScope.connectedPeers);
+          console.log($rootScope.connectedTo);
 
-      c.on('open', function() {
-        c.send('-------open-------');
-      });
+          $rootScope.connectedPeers.push(pid);
+          $rootScope.connectedTo.push(pid);
 
-      c.on('data', function(data) {
-        if (data)
-          console.log('Data:' + data);
-      });
+          if (typeof cb === 'function')
+            cb();
 
-      c.on('error', function(err) {
-        console.error(err);
-      });
-      cb(c.peer);
+          $rootScope.$digest();
+
+          console.log($rootScope.connectedPeers);
+          console.log($rootScope.connectedTo);
+        });
+
+        c.on('data', _onData);
+
+        c.on('error', function(err) {
+          console.error('-------- Error --------')
+        });
+      }
     };
 
-    var _sendTo = function(pid, data) {
-      if (typeof pids === 'string') {
-        // just send
-      } else if (typeof pids === 'array') {
-        // iter
+    var _send = function(pids, data) {
+      if (Array.isArray(pids)) {
+        pids.forEach(function(pid) {
+          _sender(pid, data);
+        }); 
+      } else if (typeof pids === 'string') {
+        _sender(pid, data);
       }
-      console.log(data);
     };
 
     var _disconnect = function() {
@@ -97,7 +163,7 @@ angular.module('copay.network')
     return {
       init: _init,
       connect: _connect,
-      sendTo: _sendTo,
+      send: _send,
       disconnect: _disconnect
     } 
   });