Merge pull request #28 from GleapSDK/v12.0.0

V12.0.0

Author: boehlerlukas

build/index.js

@@ -1,13 +1,12 @@
 const Gleap = window.Gleap;
 
-// Gleap.setFrameUrl("http://0.0.0.0:3001");
-// Gleap.setApiUrl("http://0.0.0.0:9000");
+// Gleap.setFrameUrl("http://localhost:3001");
+// Gleap.setApiUrl("http://localhost:9000");
+// Gleap.setWSApiUrl("ws://localhost:8080");
 
-Gleap.setDisablePageTracking(true);
+// Gleap.setLanguage("en");
 
-Gleap.setLanguage("en");
-
-Gleap.initialize("ogWhNhuiZcGWrva5nlDS8l7a78OfaLlV");
+Gleap.initialize("X5C0grjFCjUMbZKi131MjZLaGRwg2iKH");
 
 /*Gleap.setUrlHandler((url, newTab) => {
   alert("URL: " + url + " newTab: " + newTab);

demo/main.js

@@ -39,6 +39,7 @@ export namespace Gleap {
   function destroy(): void;
   function isOpened(): boolean;
   function setApiUrl(apiUrl: string): void;
+  function setWSApiUrl(wsApiUrl: string): void;
   function setFrameUrl(frameUrl: string): void;
   function setBannerUrl(bannerUrl: string): void;
   function setMaxNetworkRequests(maxRequests: number): void;

index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "11.2.0",
+  "version": "12.0.0",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",
@@ -61,4 +61,4 @@
       "\\.(css|less)$": "<rootDir>/scripts/testMock.js"
     }
   }
-}
+}

package-lock.json

@@ -155,19 +155,14 @@ class Gleap {
    * Initializes the SDK
    * @param {*} sdkKey
    */
-  static initialize(sdkKey, disablePing = false) {
+  static initialize(sdkKey) {
     const instance = this.getInstance();
     if (instance.initialized) {
       console.warn("Gleap already initialized.");
       return;
     }
     instance.initialized = true;
 
-    // Stop the ping if needed.
-    if (disablePing) {
-      GleapStreamedEvent.getInstance().stop();
-    }
-
     // Start session
     const sessionInstance = GleapSession.getInstance();
     sessionInstance.sdkKey = sdkKey;
@@ -177,10 +172,7 @@ class Gleap {
         GleapConfigManager.getInstance()
           .start()
           .then(() => {
-            if (!disablePing) {
-              // Inject the Gleap frame.
-              GleapStreamedEvent.getInstance().start();
-            }
+            GleapStreamedEvent.getInstance().start();
 
             runFunctionWhenDomIsReady(() => {
               // Inject the widget buttons
@@ -404,6 +396,14 @@ class Gleap {
     GleapMetaDataManager.setAppBuildNumber(appBuildNumber);
   }
 
+  /**
+   * Set a custom ws api url.
+   * @param {string} wsApiUrl
+   */
+  static setWSApiUrl(wsApiUrl) {
+    GleapSession.getInstance().wsApiUrl = wsApiUrl;
+  }
+
   /**
    * Set a custom api url.
    * @param {string} apiUrl

package.json

@@ -3,6 +3,7 @@ import { eraseGleapCookie, getGleapCookie, loadFromGleapCache, saveToGleapCache,
 
 export default class GleapSession {
   apiUrl = "https://api.gleap.io";
+  wsApiUrl = "wss://ws.gleap.io";
   sdkKey = null;
   updatingSession = false;
   useCookies = false;

published/12.0.0/index.js

@@ -1,5 +1,5 @@
+import Gleap, { GleapFrameManager, GleapMetaDataManager, GleapSession } from "./Gleap";
 import { gleapDataParser } from "./GleapHelper";
-import Gleap, { GleapSession, GleapNotificationManager, GleapMetaDataManager, GleapFrameManager } from "./Gleap";
 
 export default class GleapStreamedEvent {
   eventArray = [];
@@ -8,8 +8,15 @@ export default class GleapStreamedEvent {
   errorCount = 0;
   streamingEvents = false;
   lastUrl = undefined;
-  stopped = false;
   mainLoopTimeout = null;
+  socket = null;
+  connectedWebSocketGleapId = null;
+  connectionTimeout = null;
+  pingWS = null;
+  handleOpenBound = null;
+  handleErrorBound = null;
+  handleMessageBound = null;
+  handleCloseBound = null;
 
   // GleapStreamedEvent singleton
   static instance;
@@ -22,14 +29,99 @@ export default class GleapStreamedEvent {
     }
   }
 
-  constructor() { }
+  constructor() {
+    this.handleOpenBound = this.handleOpen.bind(this);
+    this.handleErrorBound = this.handleError.bind(this);
+    this.handleMessageBound = this.handleMessage.bind(this);
+    this.handleCloseBound = this.handleClose.bind(this);
+  }
+
+  cleanupWebSocket() {
+    if (this.connectionTimeout) {
+      clearTimeout(this.connectionTimeout);
+      this.connectionTimeout = null;
+    }
+
+    if (this.pingWS) {
+      clearInterval(this.pingWS);
+    }
+
+    if (this.socket) {
+      this.socket.removeEventListener('open', this.handleOpenBound);
+      this.socket.removeEventListener('error', this.handleErrorBound);
+      this.socket.removeEventListener('message', this.handleMessageBound);
+      this.socket.removeEventListener('close', this.handleCloseBound);
+      this.socket.close();
+      this.socket = null;
+    }
+  }
+
+  initWebSocket() {
+    this.cleanupWebSocket();
+
+    this.connectedWebSocketGleapId = GleapSession.getInstance().session.gleapId;
+
+    if (!GleapSession.getInstance().session || !GleapSession.getInstance().sdkKey) {
+      return;
+    }
+
+    this.socket = new WebSocket(`${GleapSession.getInstance().wsApiUrl}?gleapId=${GleapSession.getInstance().session.gleapId}&gleapHash=${GleapSession.getInstance().session.gleapHash}&apiKey=${GleapSession.getInstance().sdkKey}&sdkVersion=${SDK_VERSION}`);
+    this.socket.addEventListener('open', this.handleOpenBound);
+    this.socket.addEventListener('message', this.handleMessageBound);
+    this.socket.addEventListener('error', this.handleErrorBound);
+    this.socket.addEventListener('close', this.handleCloseBound);
+  }
+
+  handleOpen(event) {
+    this.pingWS = setInterval(() => {
+      if (this.socket.readyState === this.socket.OPEN) {
+        this.socket.send(JSON.stringify({
+          name: 'ping',
+          data: {},
+        }));
+      }
+    }, 30000);
+
+    if (this.connectionTimeout) {
+      clearTimeout(this.connectionTimeout);
+      this.connectionTimeout = null;
+    }
+  }
+
+  handleMessage(event) {
+    this.processMessage(JSON.parse(event.data));
+  }
+
+  handleError(error) { }
+
+  handleClose(event) {
+    setTimeout(() => {
+      this.initWebSocket();
+    }, 5000);
+  }
+
+  processMessage(message) {
+    try {
+      if (message.name === 'update') {
+        const { a, u } = message.data;
+        if (!GleapFrameManager.getInstance().isOpened()) {
+          if (a) {
+            Gleap.getInstance().performActions(a);
+          }
+          if (u != null) {
+            GleapNotificationManager.getInstance().setNotificationCount(u);
+          }
+        }
+      }
+    } catch (exp) { }
+  }
 
   getEventArray() {
     return this.eventArray;
   }
 
   stop() {
-    this.stopped = true;
+    this.cleanupMainLoop();
   }
 
   resetErrorCountLoop() {
@@ -38,18 +130,25 @@ export default class GleapStreamedEvent {
     }, 60000);
   }
 
-  restart() {
+  cleanupMainLoop() {
     if (this.mainLoopTimeout) {
       clearInterval(this.mainLoopTimeout);
       this.mainLoopTimeout = null;
     }
+  }
+
+  restart() {
+    // Only reconnect websockets when needed.
+    if (this.connectedWebSocketGleapId !== GleapSession.getInstance().session.gleapId) {
+      this.initWebSocket();
+    }
 
+    this.cleanupMainLoop();
     this.trackInitialEvents();
     this.runEventStreamLoop();
   }
 
   start() {
-    this.stopped = false;
     this.startPageListener();
     this.resetErrorCountLoop();
   }
@@ -76,9 +175,6 @@ export default class GleapStreamedEvent {
   startPageListener() {
     const self = this;
     setInterval(function () {
-      if (self.stopped) {
-        return;
-      }
       self.logCurrentPage();
     }, 1000);
   }
@@ -106,28 +202,32 @@ export default class GleapStreamedEvent {
   }
 
   runEventStreamLoop = () => {
-    if (this.stopped) {
-      return;
-    }
-
     const self = this;
     this.streamEvents();
 
     this.mainLoopTimeout = setTimeout(function () {
       self.runEventStreamLoop();
-    }, 10000);
+    }, 2000);
   };
 
   streamEvents = () => {
     if (!GleapSession.getInstance().ready || this.streamingEvents || this.errorCount > 2) {
       return;
     }
 
+    // Nothing to stream.
+    if (this.streamedEventArray.length === 0) {
+      return;
+    }
+
+    // Sockets not connected.
+    if (!this.socket || this.socket.readyState !== this.socket.OPEN) {
+      return;
+    }
+
     const self = this;
     this.streamingEvents = true;
 
-    const preGleapId = GleapSession.getInstance().getGleapId();
-
     const http = new XMLHttpRequest();
     http.open("POST", GleapSession.getInstance().apiUrl + "/sessions/ping");
     http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
@@ -140,22 +240,6 @@ export default class GleapStreamedEvent {
       if (http.readyState === 4) {
         if (http.status === 200 || http.status === 201) {
           self.errorCount = 0;
-
-          // Only perform actions if gleapId was not changed.
-          if (GleapSession.getInstance().getGleapId() === preGleapId) {
-            try {
-              const response = JSON.parse(http.responseText);
-              const { a, u } = response;
-              if (!GleapFrameManager.getInstance().isOpened()) {
-                if (a) {
-                  Gleap.getInstance().performActions(a);
-                }
-                if (u != null) {
-                  GleapNotificationManager.getInstance().setNotificationCount(u);
-                }
-              }
-            } catch (exp) { }
-          }
         } else {
           self.errorCount++;
         }
@@ -171,6 +255,7 @@ export default class GleapStreamedEvent {
         events: this.streamedEventArray,
         opened: GleapFrameManager.getInstance().isOpened(),
         sdkVersion: SDK_VERSION,
+        ws: true,
       })
     );