Merge pull request #3587 from ethcore/ng-ws-improved

Work around WS in UI

js/src/api/transport/ws/ws.js

@@ -29,21 +29,33 @@ export default class Ws extends JsonRpcBase {
     this._token = token;
     this._messages = {};
 
-    this._connecting = true;
+    this._connecting = false;
+    this._connected = false;
     this._lastError = null;
-    this._autoConnect = false;
+    this._autoConnect = true;
+    this._retries = 0;
+    this._reconnectTimeoutId = null;
 
     this._connect();
   }
 
   updateToken (token) {
     this._token = token;
-    this._autoConnect = false;
+    this._autoConnect = true;
 
     this._connect();
   }
 
   _connect () {
+    if (this._connecting) {
+      return;
+    }
+
+    if (this._reconnectTimeoutId) {
+      window.clearTimeout(this._reconnectTimeoutId);
+      this._reconnectTimeoutId = null;
+    }
+
     const time = parseInt(new Date().getTime() / 1000, 10);
     const sha3 = keccak_256(`${this._token}:${time}`);
     const hash = `${sha3}_${time}`;
@@ -53,6 +65,7 @@ export default class Ws extends JsonRpcBase {
       this._ws.onopen = null;
       this._ws.onclose = null;
       this._ws.onmessage = null;
+      this._ws.close();
       this._ws = null;
     }
 
@@ -65,6 +78,27 @@ export default class Ws extends JsonRpcBase {
     this._ws.onopen = this._onOpen;
     this._ws.onclose = this._onClose;
     this._ws.onmessage = this._onMessage;
+
+    // Get counts in dev mode
+    if (process.env.NODE_ENV === 'development') {
+      this._count = 0;
+      this._lastCount = {
+        timestamp: Date.now(),
+        count: 0
+      };
+
+      window.setInterval(() => {
+        const n = this._count - this._lastCount.count;
+        const t = (Date.now() - this._lastCount.timestamp) / 1000;
+        const s = Math.round(1000 * n / t) / 1000;
+
+        if (this._debug) {
+          console.log('::parityWS', `speed: ${s} req/s`, `count: ${this._count}`);
+        }
+      }, 5000);
+
+      window._parityWS = this;
+    }
   }
 
   _onOpen = (event) => {
@@ -72,6 +106,7 @@ export default class Ws extends JsonRpcBase {
     this._connected = true;
     this._connecting = false;
     this._autoConnect = true;
+    this._retries = 0;
 
     Object.keys(this._messages)
       .filter((id) => this._messages[id].queued)
@@ -79,18 +114,39 @@ export default class Ws extends JsonRpcBase {
   }
 
   _onClose = (event) => {
-    console.log('ws:onClose', event);
     this._connected = false;
     this._connecting = false;
 
+    this._lastError = event;
+
     if (this._autoConnect) {
-      setTimeout(() => this._connect(), 500);
+      const timeout = this.retryTimeout;
+
+      const time = timeout < 1000
+        ? Math.round(timeout) + 'ms'
+        : (Math.round(timeout / 10) / 100) + 's';
+
+      console.log('ws:onClose', `trying again in ${time}...`);
+
+      this._reconnectTimeoutId = setTimeout(() => {
+        this._connect();
+      }, timeout);
+
+      return;
     }
+
+    console.log('ws:onClose', event);
   }
 
   _onError = (event) => {
-    console.error('ws:onError', event);
-    this._lastError = event;
+    // Only print error if the WS is connected
+    // ie. don't print if error == closed
+    window.setTimeout(() => {
+      if (this._connected) {
+        console.error('ws:onError', event);
+        this._lastError = event;
+      }
+    }, 50);
   }
 
   _onMessage = (event) => {
@@ -127,11 +183,16 @@ export default class Ws extends JsonRpcBase {
   _send = (id) => {
     const message = this._messages[id];
 
-    message.queued = !this._connected;
-
     if (this._connected) {
-      this._ws.send(message.json);
+      if (process.env.NODE_ENV === 'development') {
+        this._count++;
+      }
+
+      return this._ws.send(message.json);
     }
+
+    message.queued = !this._connected;
+    message.timestamp = Date.now();
   }
 
   execute (method, ...params) {
@@ -159,4 +220,27 @@ export default class Ws extends JsonRpcBase {
   get lastError () {
     return this._lastError;
   }
+
+  /**
+   * Exponential Timeout for Retries
+   *
+   * @see http://dthain.blogspot.de/2009/02/exponential-backoff-in-distributed.html
+   */
+  get retryTimeout () {
+    // R between 1 and 2
+    const R = Math.random() + 1;
+    // Initial timeout (100ms)
+    const T = 100;
+    // Exponential Factor
+    const F = 2;
+    // Max timeout (4s)
+    const M = 4000;
+    // Current number of retries
+    const N = this._retries;
+
+    // Increase retries number
+    this._retries++;
+
+    return Math.min(R * T * Math.pow(F, N), M);
+  }
 }

js/src/contracts/registry.js

@@ -21,25 +21,39 @@ export default class Registry {
     this._api = api;
     this._contracts = [];
     this._instance = null;
+    this._fetching = false;
+    this._queue = [];
 
     this.getInstance();
   }
 
   getInstance () {
-    return new Promise((resolve, reject) => {
-      if (this._instance) {
-        resolve(this._instance);
-        return;
-      }
+    if (this._instance) {
+      return Promise.resolve(this._instance);
+    }
 
-      this._api.parity
-        .registryAddress()
-        .then((address) => {
-          this._instance = this._api.newContract(abis.registry, address).instance;
-          resolve(this._instance);
-        })
-        .catch(reject);
-    });
+    if (this._fetching) {
+      return new Promise((resolve) => {
+        this._queue.push({ resolve });
+      });
+    }
+
+    this._fetching = true;
+
+    return this._api.parity
+      .registryAddress()
+      .then((address) => {
+        this._fetching = false;
+        this._instance = this._api.newContract(abis.registry, address).instance;
+
+        this._queue.forEach((queued) => {
+          queued.resolve(this._instance);
+        });
+
+        this._queue = [];
+
+        return this._instance;
+      });
   }
 
   getContract (_name) {

js/src/redux/providers/balances.js

@@ -17,6 +17,7 @@
 import { getBalances, getTokens } from './balancesActions';
 import { setAddressImage } from './imagesActions';
 
+import Contracts from '../../contracts';
 import * as abis from '../../contracts/abi';
 
 import imagesEthereum from '../../../assets/images/contracts/ethereum-black-64x64.png';
@@ -84,15 +85,9 @@ export default class Balances {
       return Promise.resolve(this._tokenreg);
     }
 
-    return this._api.parity
-      .registryAddress()
-      .then((registryAddress) => {
-        const registry = this._api.newContract(abis.registry, registryAddress);
-
-        return registry.instance.getAddress.call({}, [this._api.util.sha3('tokenreg'), 'A']);
-      })
-      .then((tokenregAddress) => {
-        const tokenreg = this._api.newContract(abis.tokenreg, tokenregAddress);
+    return Contracts.get().tokenReg
+      .getContract()
+      .then((tokenreg) => {
         this._tokenreg = tokenreg;
         this.attachToTokens();
 

js/src/redux/providers/status.js

@@ -71,8 +71,8 @@ export default class Status {
    * @see src/views/Connection/connection.js
    */
   _shouldPing = () => {
-    const { isConnected, isConnecting } = this._apiStatus;
-    return isConnecting || !isConnected;
+    const { isConnected } = this._apiStatus;
+    return !isConnected;
   }
 
   _stopPollPing = () => {
@@ -119,7 +119,7 @@ export default class Status {
 
   _pollStatus = () => {
     const nextTimeout = (timeout = 1000) => {
-      setTimeout(this._pollStatus, timeout);
+      setTimeout(() => this._pollStatus(), timeout);
     };
 
     const { isConnected, isConnecting, needsToken, secureToken } = this._api;
@@ -134,7 +134,8 @@ export default class Status {
     const gotReconnected = !this._apiStatus.isConnected && apiStatus.isConnected;
 
     if (gotReconnected) {
-      this._pollLongStatus();
+      this._pollLongStatus(true);
+      this._store.dispatch(statusCollection({ isPingable: true }));
     }
 
     if (!isEqual(apiStatus, this._apiStatus)) {
@@ -175,13 +176,12 @@ export default class Status {
           this._store.dispatch(statusCollection(status));
           this._status = status;
         }
-
-        nextTimeout();
       })
       .catch((error) => {
         console.error('_pollStatus', error);
-        nextTimeout(250);
       });
+
+    nextTimeout();
   }
 
   /**
@@ -223,7 +223,11 @@ export default class Status {
    * fetched every 30s just in case, and whenever
    * the client got reconnected.
    */
-  _pollLongStatus = () => {
+  _pollLongStatus = (newConnection = false) => {
+    if (!this._api.isConnected) {
+      return;
+    }
+
     const nextTimeout = (timeout = 30000) => {
       if (this._longStatusTimeoutId) {
         clearTimeout(this._longStatusTimeoutId);
@@ -242,7 +246,7 @@ export default class Status {
         this._api.parity.netChain(),
         this._api.parity.netPort(),
         this._api.parity.rpcSettings(),
-        this._api.parity.enode()
+        newConnection ? Promise.resolve(null) : this._api.parity.enode()
       ])
       .then(([
         clientVersion, defaultExtraData, netChain, netPort, rpcSettings, enode
@@ -255,21 +259,23 @@ export default class Status {
           netChain,
           netPort,
           rpcSettings,
-          enode,
           isTest
         };
 
+        if (enode) {
+          longStatus.enode = enode;
+        }
+
         if (!isEqual(longStatus, this._longStatus)) {
           this._store.dispatch(statusCollection(longStatus));
           this._longStatus = longStatus;
         }
-
-        nextTimeout();
       })
       .catch((error) => {
         console.error('_pollLongStatus', error);
-        nextTimeout(250);
       });
+
+    nextTimeout(newConnection ? 5000 : 30000);
   }
 
   _pollLogs = () => {

js/src/secureApi.js

@@ -25,12 +25,13 @@ export default class SecureApi extends Api {
     this._isConnecting = true;
     this._connectState = sysuiToken === 'initial' ? 1 : 0;
     this._needsToken = false;
-    this._nextToken = nextToken;
     this._dappsPort = 8080;
     this._dappsInterface = null;
     this._signerPort = 8180;
+    this._followConnectionTimeoutId = null;
 
-    console.log('SecureApi:constructor', sysuiToken);
+    // Try tokens from localstorage, then from hash
+    this._tokensToTry = [ sysuiToken, nextToken ].filter((t) => t && t.length);
 
     this._followConnection();
   }
@@ -40,15 +41,30 @@ export default class SecureApi extends Api {
     console.log('SecureApi:setToken', this._transport.token);
   }
 
+  _checkNodeUp () {
+    return fetch('/', { method: 'HEAD' })
+      .then(
+        (r) => r.status === 200,
+        () => false
+      )
+      .catch(() => false);
+  }
+
   _followConnection = () => {
     const nextTick = () => {
-      setTimeout(() => this._followConnection(), 250);
+      if (this._followConnectionTimeoutId) {
+        clearTimeout(this._followConnectionTimeoutId);
+      }
+
+      this._followConnectionTimeoutId = setTimeout(() => this._followConnection(), 250);
     };
+
     const setManual = () => {
       this._connectState = 100;
       this._needsToken = true;
       this._isConnecting = false;
     };
+
     const lastError = this._transport.lastError;
     const isConnected = this._transport.isConnected;
 
@@ -58,11 +74,23 @@ export default class SecureApi extends Api {
         if (isConnected) {
           return this.connectSuccess();
         } else if (lastError) {
-          const nextToken = this._nextToken || 'initial';
-          const nextState = this._nextToken ? 0 : 1;
+          return this
+            ._checkNodeUp()
+            .then((isNodeUp) => {
+              const nextToken = this._tokensToTry[0] || 'initial';
+              const nextState = nextToken !== 'initial' ? 0 : 1;
 
-          this._nextToken = null;
-          this.updateToken(nextToken, nextState);
+              // If previous token was wrong (error while node up), delete it
+              if (isNodeUp) {
+                this._tokensToTry = this._tokensToTry.slice(1);
+              }
+
+              if (nextToken !== this._transport.token) {
+                this.updateToken(nextToken, nextState);
+              }
+
+              nextTick();
+            });
         }
         break;
 

js/webpack.config.js

@@ -197,30 +197,42 @@ module.exports = {
     historyApiFallback: false,
     quiet: false,
     hot: !isProd,
-    proxy: {
-      '/api/*': {
+    proxy: [
+      {
+        context: (pathname, req) => {
+          return pathname === '/' && req.method === 'HEAD';
+        },
+        target: 'http://127.0.0.1:8180',
+        changeOrigin: true,
+        autoRewrite: true
+      },
+      {
+        context: '/api/*',
         target: 'http://127.0.0.1:8080',
         changeOrigin: true,
         autoRewrite: true
       },
-      '/app/*': {
+      {
+        context: '/app/*',
         target: 'http://127.0.0.1:8080',
         changeOrigin: true,
         pathRewrite: {
           '^/app': ''
         }
       },
-      '/parity-utils/*': {
+      {
+        context: '/parity-utils/*',
         target: 'http://127.0.0.1:3000',
         changeOrigin: true,
         pathRewrite: {
           '^/parity-utils': ''
         }
       },
-      '/rpc/*': {
+      {
+        context: '/rpc/*',
         target: 'http://localhost:8080',
         changeOrigin: true
       }
-    }
+    ]
   }
 };