feat(XmppConnection) add WebSocket keep alive

Websocket keep alive is HTTP GET request sent on the service URL passed
to Strophe. It is used to keep the stick tables alive. The feature comes
in enabled by default whenever Websocket are used. Pass
'websocketKeepAlive' config option set to -1 to disable.

See the code for more details about the default interval value.

modules/xmpp/XmppConnection.js

@@ -38,10 +38,17 @@ export default class XmppConnection extends Listenable {
      * @param {Object} options
      * @param {String} options.serviceUrl - The BOSH or WebSocket service URL.
      * @param {String} options.enableWebsocketResume - True to enable stream resumption.
+     * @param {Number} [options.websocketKeepAlive=240000] - The websocket keep alive interval. It's 4 minutes by
+     * default with jitter. Pass -1 to disable. The actual interval equation is:
+     * jitterDelay = (interval * 0.2) + (0.8 * interval * Math.random())
+     * The keep alive is HTTP GET request to the {@link options.serviceUrl}.
      */
-    constructor({ enableWebsocketResume, serviceUrl }) {
+    constructor({ enableWebsocketResume, websocketKeepAlive, serviceUrl }) {
         super();
-        this._options = { enableWebsocketResume };
+        this._options = {
+            enableWebsocketResume,
+            websocketKeepAlive: typeof websocketKeepAlive === 'undefined' ? 4 * 60 * 1000 : Number(websocketKeepAlive)
+        };
         this._stropheConn = new Strophe.Connection(serviceUrl);
         this._usesWebsocket = serviceUrl.startsWith('ws:') || serviceUrl.startsWith('wss:');
 
@@ -218,9 +225,13 @@ export default class XmppConnection extends Listenable {
 
             if (status === Strophe.Status.CONNECTED) {
                 this._maybeEnableStreamResume();
+                this._maybeStartWSKeepAlive();
             } else if (status === Strophe.Status.DISCONNECTED) {
                 // FIXME add RECONNECTING state instead of blocking the DISCONNECTED update
                 blockCallback = this._tryResumingConnection();
+                if (!blockCallback) {
+                    clearTimeout(this._wsKeepAlive);
+                }
             }
 
             if (!blockCallback) {
@@ -248,6 +259,7 @@ export default class XmppConnection extends Listenable {
      */
     disconnect(...args) {
         clearTimeout(this._resumeTimeout);
+        clearTimeout(this._wsKeepAlive);
         this._stropheConn.disconnect(...args);
     }
 
@@ -296,6 +308,36 @@ export default class XmppConnection extends Listenable {
         }
     }
 
+    /**
+     * Starts the Websocket keep alive if enabled.
+     *
+     * @private
+     * @returns {void}
+     */
+    _maybeStartWSKeepAlive() {
+        const { websocketKeepAlive } = this._options;
+
+        if (this._usesWebsocket && websocketKeepAlive > 0) {
+            this._wsKeepAlive || logger.info(`WebSocket keep alive interval: ${websocketKeepAlive}ms`);
+            clearTimeout(this._wsKeepAlive);
+
+            const intervalWithJitter
+                = /* base */ (websocketKeepAlive * 0.2) + /* jitter */ (Math.random() * 0.8 * websocketKeepAlive);
+
+            logger.debug(`Scheduling next WebSocket keep-alive in ${intervalWithJitter}ms`);
+
+            this._wsKeepAlive = setTimeout(() => {
+                const url = this.service.replace('wss', 'https').replace('ws', 'http');
+
+                fetch(url).catch(
+                    error => {
+                        logger.error(`Websocket Keep alive failed for url: ${url}`, { error });
+                    })
+                    .then(() => this._maybeStartWSKeepAlive());
+            }, intervalWithJitter);
+        }
+    }
+
     /**
      * Send a stanza. This function is called to push data onto the send queue to go out over the wire.
      *

modules/xmpp/xmpp.js

@@ -30,9 +30,10 @@ const logger = getLogger(__filename);
  * Prosody).
  * @param {string} options.serviceUrl - The service URL for XMPP connection.
  * @param {string} options.enableWebsocketResume - True to enable stream resumption.
+ * @param {number} [options.websocketKeepAlive] - See {@link XmppConnection} constructor.
  * @returns {XmppConnection}
  */
-function createConnection({ enableWebsocketResume, serviceUrl = '/http-bind', token }) {
+function createConnection({ enableWebsocketResume, serviceUrl = '/http-bind', token, websocketKeepAlive }) {
     // Append token as URL param
     if (token) {
         // eslint-disable-next-line no-param-reassign
@@ -41,7 +42,8 @@ function createConnection({ enableWebsocketResume, serviceUrl = '/http-bind', to
 
     return new XmppConnection({
         enableWebsocketResume,
-        serviceUrl
+        serviceUrl,
+        websocketKeepAlive
     });
 }
 
@@ -86,8 +88,9 @@ export default class XMPP extends Listenable {
      * @param {String} options.bosh - Deprecated, use {@code serviceUrl}.
      * @param {boolean} options.enableWebsocketResume - Enables XEP-0198 stream management which will make the XMPP
      * module try to resume the session in case the Websocket connection breaks.
-     * @param {Array<Object>} options.p2pStunServers see
-     * {@link JingleConnectionPlugin} for more details.
+     * @param {number} [options.websocketKeepAlive] - The websocket keep alive interval. See {@link XmppConnection}
+     * constructor for more details.
+     * @param {Array<Object>} options.p2pStunServers see {@link JingleConnectionPlugin} for more details.
      * @param token
      */
     constructor(options, token) {
@@ -106,7 +109,8 @@ export default class XMPP extends Listenable {
 
             // FIXME remove deprecated bosh option at some point
             serviceUrl: options.serviceUrl || options.bosh,
-            token
+            token,
+            websocketKeepAlive: options.websocketKeepAlive
         });
 
         this._initStrophePlugins();