Merge pull request #553 from matiu/feature/sockets

update to socket.io 1.0, adds connection error warnings

bower.json

@@ -19,6 +19,7 @@
     "file-saver": "*",
     "qrcode-decoder-js": "*",
     "bitcore": "~0.1.19",
-    "angular-moment": "~0.7.1"
+    "angular-moment": "~0.7.1",
+    "socket.io-client": ">=1.0.0"
   }
 }

css/main.css

@@ -603,6 +603,10 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
   background: #16A085;
 }
 
+.alert-box a { 
+  color:white;
+}
+
 @media only screen and (max-width: 40em) { 
 
   #main, .header-content {

index.html

@@ -75,9 +75,19 @@
 
       <div class="row" ng-if="updateVersion">
         <div class="small-9 large-centered columns">
-          <div data-alert class="alert-box radius {{updateVersion}}">
-            A newer version of Copay is now available, please update your wallet to a latest version.
-            Please check <a href="http://www.copay.io">Copay.io</a>.
+          <div data-alert class="alert-box radius {{updateVersion.class}}">
+            A newer version of Copay is now available ({{updateVersion.version}}), please update your wallet.
+            Check <a href="http://www.copay.io">Copay.io</a> for details.
+          </div>
+        </div>
+      </div>
+
+      <div class="row" ng-if='$root.insightError'>
+        <div class="small-8 large-centered columns">
+          <div data-alert class="alert-box radius error">
+            Error connecting to Insight server.  Check
+            you settings and Internet connection.
+            Trying to reconnect...
           </div>
         </div>
       </div>
@@ -782,7 +792,7 @@ on supported browsers please check <a href="http://www.webrtc.org/">http://www.w
     <script src="lib/crypto-js/rollups/pbkdf2.js"></script>
     <script src="lib/crypto-js/rollups/aes.js"></script>
     <script src="lib/file-saver/FileSaver.js"></script>
-    <script src="lib/socket.io.js"></script>
+    <script src="lib/socket.io-client/socket.io.js"></script>
     <script src="lib/sjcl.js"></script>
     <script src="lib/ios-imagefile-megapixel/megapix-image.js"></script>
     <script src="lib/qrcode-decoder-js/lib/qrcode-decoder.min.js"></script>

js/controllers/header.js

@@ -25,22 +25,35 @@ angular.module('copayApp.controllers').controller('HeaderController',
       var toInt = function (s) { return parseInt(s); };
       var latestVersion = data[0].name.replace('v', '').split('.').map(toInt);
       var currentVersion = copay.version.split('.').map(toInt);
-
       if (currentVersion[0] < latestVersion[0]){
-        $scope.updateVersion = 'error';
+        $scope.updateVersion = {class: 'error', version:data[0].name};
       } else if (currentVersion[0] == latestVersion[0] && currentVersion[1] < latestVersion[1]) {
-        $scope.updateVersion = 'info';
-      }
+        $scope.updateVersion = {class: 'info', version:data[0].name};
+      } 
     });
 
+
     // Initialize alert notification (not show when init wallet)
     $rootScope.txAlertCount = 0;
-    $rootScope.$watch('txAlertCount', function(txAlertCount) {
-      if (txAlertCount && txAlertCount > 0) {
-        $notification.info('New Transaction', ($rootScope.txAlertCount == 1) ? 'You have a pending transaction proposal' : 'You have ' + $rootScope.txAlertCount + ' pending transaction proposals', txAlertCount);
-      }
+
+    $rootScope.$watch('blockChainStatus', function(status) {
+      var h = config.blockchain.host + ':' +  config.blockchain.port;
+      if (status === 'error')
+          $rootScope.insightError = 1;
+        else 
+        if (status === 'restored') {
+          $rootScope.insightError = 0;
+          $rootScope.$flashMessage = {
+            type: 'success',
+            message: 'Networking Restored',
+          };
+        }
     });
 
+
+    // Init socket handlers (with no wallet yet)
+    controllerUtils.setSocketHandlers();
+
     $rootScope.$watch('receivedFund', function(receivedFund) {
       if (receivedFund) {
         var currentAddr;
@@ -59,6 +72,14 @@ angular.module('copayApp.controllers').controller('HeaderController',
       }
     });
 
+    $rootScope.$watch('txAlertCount', function(txAlertCount) {
+      if (txAlertCount && txAlertCount > 0) {
+        $notification.info('New Transaction', ($rootScope.txAlertCount == 1) ? 'You have a pending transaction proposal' : 'You have ' + $rootScope.txAlertCount + ' pending transaction proposals', txAlertCount);
+      }
+    });
+
+
+
     $scope.isActive = function(item) {
       if (item.link && item.link.replace('#','') == $location.path()) {
         return true;

js/services/controllerUtils.js

@@ -174,12 +174,30 @@ angular.module('copayApp.services')
       $rootScope.pendingTxCount = pendingForUs;
     };    
 
+    root._setCommError = function(e) {
+      $rootScope.blockChainStatus='error';
+    };
+
+
+    root._clearCommError = function(e) {
+      if ($rootScope.blockChainStatus==='error')
+        $rootScope.blockChainStatus='restored';
+    };
+
     root.setSocketHandlers = function() {
+      if (!Socket.sysEventsSet) {
+        Socket.sysOn('error', root._setCommError);
+        Socket.sysOn('reconnect_error', root._setCommError);
+        Socket.sysOn('reconnect_failed', root._setCommError);
+        Socket.sysOn('connect', root._clearCommError);
+        Socket.sysOn('reconnect', root._clearCommError);
+        Socket.sysEventsSet=true;
+      }
       if (!$rootScope.wallet) return;
 
       var currentAddrs=  Socket.getListeners();
       var addrs = $rootScope.wallet.getAddressesStr();
-
+      
       var newAddrs=[];
       for(var i in addrs){
         var a=addrs[i];

js/services/notifications.js

@@ -10,7 +10,7 @@ angular.module('notifications', []).
       info: { duration: 5000, enabled: true },
       funds: { duration: 5000, enabled: true },
       warning: { duration: 5000, enabled: true },
-      error: { duration: 5000, enabled: true },
+      error: { duration: 1e10, enabled: true },
       success: { duration: 5000, enabled: true },
       progress: { duration: 0, enabled: true },
       custom: { duration: 35000, enabled: true },

js/services/socket.js

@@ -4,9 +4,9 @@ angular.module('copayApp.services').factory('Socket',
   function($rootScope) {
     var listeners = [];
     var url = 'http://' + config.socket.host + ':' + config.socket.port;
-    var socket = io.connect(url, {
-      'reconnect': true,
-      'reconnection delay': 500,
+    var socket = io(url, {
+      'reconnection': true,
+      'reconnectionDelay': 500,
     });
 
     return {
@@ -17,7 +17,6 @@ angular.module('copayApp.services').factory('Socket',
             callback.apply(socket, args);
           });
         };
-
         socket.on(event, wrappedCallback);
         if (event !== 'connect') {
           listeners.push({
@@ -26,9 +25,21 @@ angular.module('copayApp.services').factory('Socket',
           });
         }
       },
+      sysOn: function(event, callback) {
+        var wrappedCallback = function() {
+          var args = arguments;
+          $rootScope.$apply(function() {
+            callback.apply(socket, args);
+          });
+        };
+        socket.io.on(event, wrappedCallback);
+      },
       getListeners: function() {
         var ret = {};
-        var addrList = listeners.map(function(i) {return i.event;});
+
+        var addrList = listeners
+          .map(function(i) {return i.event;});
+
         for (var i in addrList) {
           ret[addrList[i]] = 1;
         }

karma.conf.js

@@ -33,7 +33,7 @@ module.exports = function(config) {
       'lib/crypto-js/rollups/pbkdf2.js',
       'lib/crypto-js/rollups/aes.js',
       'lib/file-saver/FileSaver.js',
-      'lib/socket.io.js',
+      'lib/socket.io-client/socket.io.js',
       'lib/sjcl.js',
       'lib/ios-imagefile-megapixel/megapix-image.js',
       'lib/qrcode-decoder-js/lib/qrcode-decoder.min.js',

test/unit/controllers/controllersSpec.js

@@ -1,7 +1,7 @@
 //
 // test/unit/controllers/controllersSpec.js
 //
-describe("Unit: Testing Controllers", function() {
+describe("Unit: Controllers", function() {
 
   var scope;
 
@@ -48,4 +48,72 @@ describe("Unit: Testing Controllers", function() {
       expect(scope.blockchain_txs).to.be.empty;
     });
   });
+
+  describe("Unit: Header Controller", function() {
+    var scope, $httpBackendOut;
+    var GH = 'https://api.github.com/repos/bitpay/copay/tags';
+    beforeEach(inject(function($controller, $injector) {
+      $httpBackend = $injector.get('$httpBackend');
+      $httpBackend.when('GET', GH)
+      .respond( [{
+        name: "v100.1.6",
+        zipball_url: "https://api.github.com/repos/bitpay/copay/zipball/v0.0.6",
+        tarball_url: "https://api.github.com/repos/bitpay/copay/tarball/v0.0.6",
+        commit: {
+          sha: "ead7352bf2eca705de58d8b2f46650691f2bc2c7",
+          url: "https://api.github.com/repos/bitpay/copay/commits/ead7352bf2eca705de58d8b2f46650691f2bc2c7"
+        }
+      }]);
+    }));
+
+    var rootScope;
+    beforeEach(inject(function($controller, $rootScope) {
+      rootScope = $rootScope;
+      scope = $rootScope.$new();
+      headerCtrl = $controller('HeaderController', {
+        $scope: scope,
+      });
+    }));
+
+
+    afterEach(function() {
+      $httpBackend.verifyNoOutstandingExpectation();
+      $httpBackend.verifyNoOutstandingRequest();
+    });
+
+    it('should have a txAlertCount', function() {
+      expect(scope.txAlertCount).equal(0);
+      $httpBackend.flush();
+    });
+
+   it('should hit github for version', function() {
+     $httpBackend.expectGET(GH);
+     scope.$apply();
+     $httpBackend.flush();
+   });
+
+   it('should check version ', function() {
+     $httpBackend.expectGET(GH);
+     scope.$apply();
+     $httpBackend.flush();
+     expect(scope.updateVersion.class).equal('error');
+     expect(scope.updateVersion.version).equal('v100.1.6');
+   });
+
+   it('should check blockChainStatus', function() {
+     $httpBackend.expectGET(GH);
+     $httpBackend.flush();
+     rootScope.blockChainStatus='error';
+     scope.$apply();
+     expect(rootScope.insightError).equal(1);
+     rootScope.blockChainStatus='ok';
+     scope.$apply();
+     expect(rootScope.insightError).equal(1);
+     rootScope.blockChainStatus='restored';
+     scope.$apply();
+     expect(rootScope.insightError).equal(0);
+   });
+  });
+
 });
+

test/unit/services/servicesSpec.js

@@ -9,6 +9,40 @@ describe("Unit: Testing Services", function() {
     expect(Socket).not.to.equal(null);
   }));
 
+
+  it('Socket should support #on', inject(function(Socket) {
+    expect(Socket.on).to.be.a('function');
+  }));
+
+
+  it('Socket should support #sysOn', inject(function(Socket) {
+    expect(Socket.sysOn).to.be.a('function');
+  }))
+
+
+  it('Socket should add handlers with #on', inject(function(Socket) {
+    Socket.on('a', function (){});
+    Socket.on('b', function (){});
+    Socket.sysOn('c', function (){});
+    var ret = Socket.getListeners();
+    expect(ret.a).to.be.equal(1);
+    expect(ret.b).to.be.equal(1);
+    expect(Object.keys(ret)).to.have.length(2);
+  }));
+
+  it('Socket should support #removeAllListeners', inject(function(Socket) {
+    Socket.on('a', function (){});
+    Socket.on('b', function (){});
+    Socket.sysOn('c', function (){});
+    var ret = Socket.getListeners();
+    expect(Object.keys(ret)).to.have.length(2);
+    Socket.removeAllListeners();
+    ret = Socket.getListeners();
+    expect(Object.keys(ret)).to.have.length(0);
+  }));
+
+
+
   it('should contain a walletFactory service', inject(function(walletFactory) {
     expect(walletFactory).not.to.equal(null);
   }));