WebSocket Improvments #3544

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,42 @@ 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;
+    }
+  }
+
+  _checkNodeUp () {
+    const url = process.env.PARITY_URL || window.location.host;
+
+    return fetch(
+        `http://${url}/api/ping`,
+        { method: 'HEAD' }
+      )
+      .then((r) => {
+        return r.status === 200;
+      }, () => {
+        return false;
+      })
+      .catch(() => false);
   }
 
   _onOpen = (event) => {
@@ -72,6 +121,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 +129,50 @@ export default class Ws extends JsonRpcBase {
   }
 
   _onClose = (event) => {
-    console.log('ws:onClose', event);
     this._connected = false;
     this._connecting = false;
 
-    if (this._autoConnect) {
-      setTimeout(() => this._connect(), 500);
-    }
+    this._checkNodeUp()
+      .then((up) => {
+        // If the connection has been closed and the node
+        // is up, it means we have a wrong token
+        // Event code 1006 for WS means there is an error
+        // (not just closed by server)
+        if (up && event.code === 1006) {
+          event.status = 403;
+        }
+
+        this._lastError = event;
+
+        if (this._autoConnect) {
+          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 +209,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 +246,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);
+  }
 }