Do not try to reconnect if the browser is offline (#456)

# Description

If `autoReconnect` is true, the SDK tries to reconnect every `reconnectionDelay` milliseconds.

If executed within a browser, the SDK can know if the browser has access to some kind of network: if it's marked as "offline", then there is no point retrying to connect, and this might even be harmful in some situations. For instance, browsers switch to offline if a laptop lid is closed, or if a mobile phone screen is turned off. So continuing to connect is just a useless consumption of battery power.

This PR stops the reconnection loop and instead waits for the browser to switch to "online" again before resuming its reconnection attempts.

Author: scottinet

package-lock.json

@@ -54,6 +54,7 @@
     "eslint": "^5.16.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-loader": "^2.2.1",
+    "lolex": "^5.1.1",
     "mocha": "6.2.0",
     "mock-require": "^3.0.3",
     "nyc": "^14.1.1",

package.json

@@ -4,7 +4,6 @@ const
   KuzzleAbstractProtocol = require('./common');
 
 class RTWrapper extends KuzzleAbstractProtocol {
-
   constructor (host, options = {}) {
     super(host, options);
 
@@ -52,27 +51,43 @@ class RTWrapper extends KuzzleAbstractProtocol {
    *
    * @param {Error} error
    */
-  clientNetworkError(error) {
+  clientNetworkError (error) {
     this.state = 'offline';
     this.clear();
 
     const connectionError = new Error(`Unable to connect to kuzzle server at ${this.host}:${this.port}`);
     connectionError.internal = error;
 
     this.emit('networkError', connectionError);
+
     if (this.autoReconnect && !this.retrying && !this.stopRetryingToConnect) {
       this.retrying = true;
 
+      if ( typeof window === 'object'
+        && typeof window.navigator === 'object'
+        && window.navigator.onLine === false
+      ) {
+        window.addEventListener(
+          'online',
+          () => {
+            this.retrying = false;
+            this.connect().catch(err => this.clientNetworkError(err));
+          },
+          { once: true });
+        return;
+      }
+
       setTimeout(() => {
         this.retrying = false;
         this.connect(this.host).catch(err => this.clientNetworkError(err));
       }, this.reconnectionDelay);
-    } else {
+    }
+    else {
       this.emit('disconnect');
     }
   }
 
-  isReady() {
+  isReady () {
     return this.state === 'connected';
   }
 }

src/protocols/abstract/realtime.js

@@ -0,0 +1,36 @@
+const
+  sinon = require('sinon'),
+  KuzzleEventEmitter = require('../../src/eventEmitter');
+
+// A class to mock the global window object
+class WindowMock extends KuzzleEventEmitter {
+  constructor () {
+    super();
+
+    if (typeof window !== 'undefined') {
+      throw new Error('Cannot mock add a global "window" object: already defined');
+    }
+
+    this.navigator = {
+      onLine: true
+    };
+
+    this.addEventListener = this.addListener;
+    sinon.spy(this, 'addEventListener');
+  }
+
+  static restore () {
+    delete global.window;
+  }
+
+  static inject () {
+    Object.defineProperty(global, 'window', {
+      value: new this(),
+      enumerable: false,
+      writable: false,
+      configurable: true
+    });
+  }
+}
+
+module.exports = WindowMock;

test/mocks/window.mock.js

@@ -1,11 +1,8 @@
 const
   should = require('should'),
   sinon = require('sinon'),
-  SocketIO = require('../../src/protocols/socketio');
-
-/**
- * @global window
- */
+  SocketIO = require('../../src/protocols/socketio'),
+  windowMock = require('../mocks/window.mock');
 
 describe('SocketIO networking module', () => {
   let
@@ -15,6 +12,7 @@ describe('SocketIO networking module', () => {
 
   beforeEach(() => {
     clock = sinon.useFakeTimers();
+
     socketStub = {
       events: {},
       eventOnce: {},
@@ -74,11 +72,13 @@ describe('SocketIO networking module', () => {
     });
     socketIO.socket = socketStub;
 
-    window = {io: sinon.stub().returns(socketStub)}; // eslint-disable-line
+    windowMock.inject();
+    window.io = sinon.stub().returns(socketStub);
   });
 
   afterEach(() => {
     clock.restore();
+    windowMock.restore();
   });
 
   it('should expose an unique identifier', () => {
@@ -225,8 +225,6 @@ describe('SocketIO exposed methods', () => {
 
     socketIO = new SocketIO('address');
     socketIO.socket = socketStub;
-
-    window = {io: sinon.stub().returns(socketStub)}; // eslint-disable-line
   });
 
   it('should be able to listen to an event just once', () => {

test/protocol/socketio.test.js

@@ -1,8 +1,10 @@
 const
   should = require('should'),
   sinon = require('sinon'),
+  lolex = require('lolex'),
   NodeWS = require('ws'),
-  WS = require('../../src/protocols/websocket');
+  WS = require('../../src/protocols/websocket'),
+  windowMock = require('../mocks/window.mock');
 
 describe('WebSocket networking module', () => {
   let
@@ -12,13 +14,13 @@ describe('WebSocket networking module', () => {
     clientStub;
 
   beforeEach(() => {
-    clock = sinon.useFakeTimers();
+    clock = lolex.install();
     clientStub = {
       send: sinon.stub(),
       close: sinon.stub()
     };
 
-    window = 'foobar'; // eslint-disable-line
+    windowMock.inject();
     WebSocket = function (...args) { // eslint-disable-line
       wsargs = args;
       return clientStub;
@@ -32,9 +34,9 @@ describe('WebSocket networking module', () => {
   });
 
   afterEach(() => {
-    clock.restore();
+    clock.uninstall();
     WebSocket = undefined; // eslint-disable-line
-    window = undefined;    // eslint-disable-line
+    windowMock.restore();
   });
 
   it('should expose an unique identifier', () => {
@@ -156,6 +158,59 @@ describe('WebSocket networking module', () => {
     return should(promise).be.rejectedWith('foobar');
   });
 
+  it('should stop reconnecting if the browser goes offline', () => {
+    const cb = sinon.stub();
+
+    websocket.retrying = false;
+    websocket.addListener('networkError', cb);
+    should(websocket.listeners('networkError').length).be.eql(1);
+
+    websocket.connect();
+    websocket.connect = sinon.stub().rejects();
+    clientStub.onopen();
+    clientStub.onerror();
+
+    should(websocket.retrying).be.true();
+    should(cb).be.calledOnce();
+    should(websocket.connect).not.be.called();
+
+    window.navigator.onLine = false;
+
+    return clock.tickAsync(100)
+      .then(() => {
+        should(websocket.retrying).be.true();
+        should(cb).be.calledTwice();
+        should(websocket.connect).be.calledOnce();
+
+        should(window.addEventListener).calledWith(
+          'online',
+          sinon.match.func,
+          { once: true });
+
+        return clock.tickAsync(100);
+      })
+      .then(() => {
+        // the important bit is there: cb hasn't been called since the last
+        // tick because the SDK does not try to connect if the browser is
+        // marked offline
+        should(cb).be.calledTwice();
+
+        should(websocket.retrying).be.true();
+        should(websocket.connect).be.calledOnce();
+
+        window.emit('online');
+        return clock.tickAsync(100);
+      })
+      .then(() => {
+        // And it started retrying to connect again now that the browser is
+        // "online"
+        should(cb).be.calledThrice();
+
+        should(websocket.retrying).be.true();
+        should(websocket.connect).be.calledTwice();
+      });
+  });
+
   it('should call listeners on a "disconnect" event', () => {
     const cb = sinon.stub();
 
@@ -371,7 +426,7 @@ describe('WebSocket networking module', () => {
 
     it('should fallback to the ws module if there is no global WebSocket API', () => {
       WebSocket = undefined; // eslint-disable-line
-      window = undefined;    // eslint-disable-line
+      windowMock.restore();
 
       const client = new WS('foobar');
 
@@ -391,7 +446,7 @@ describe('WebSocket networking module', () => {
 
     it('should initialize pass allowed options to the ws ctor when using it', () => {
       WebSocket = undefined; // eslint-disable-line
-      window = undefined;    // eslint-disable-line
+      windowMock.restore();
 
       let client = new WS('foobar');
 
@@ -413,7 +468,7 @@ describe('WebSocket networking module', () => {
 
     it('should throw if invalid options are provided', () => {
       WebSocket = undefined; // eslint-disable-line
-      window = undefined;    // eslint-disable-line
+      windowMock.restore();
 
       const invalidHeaders = ['foo', 'false', 'true', 123, []];