v12.0.0

Author: boehlerlukas

demo/main.js

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

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gleap",
-  "version": "11.2.0",
+  "version": "12.0.0",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve",

package.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

src/Gleap.js

@@ -1,5 +1,7 @@
+import Gleap, { GleapFrameManager, GleapMetaDataManager, GleapSession } from "./Gleap";
 import { gleapDataParser } from "./GleapHelper";
-import Gleap, { GleapSession, GleapNotificationManager, GleapMetaDataManager, GleapFrameManager } from "./Gleap";
+
+const serverUrl = 'ws://localhost:8080';
 
 export default class GleapStreamedEvent {
   eventArray = [];
@@ -8,8 +10,99 @@ export default class GleapStreamedEvent {
   errorCount = 0;
   streamingEvents = false;
   lastUrl = undefined;
-  stopped = false;
   mainLoopTimeout = null;
+  socket = null;
+  connectedWebSocketGleapId = null;
+  connectionTimeout = null;
+
+  cleanupWebSocket() {
+    if (this.connectionTimeout) {
+      clearTimeout(this.connectionTimeout);
+      this.connectionTimeout = null;
+    }
+
+    if (this.socket) {
+      this.socket.onclose = null;
+      this.socket.onerror = null;
+      this.socket.onmessage = null;
+      this.socket.onopen = null;
+      this.socket.close();
+      this.socket = null;
+    }
+  }
+
+  initWebSocket() {
+    const self = this;
+    this.connectedWebSocketGleapId = GleapSession.getInstance().session.gleapId;
+
+    console.log("Init websocket");
+
+    if (!GleapSession.getInstance().session || !GleapSession.getInstance().sdkKey) {
+      return;
+    }
+
+    this.socket = new WebSocket(`${serverUrl}?gleapId=${GleapSession.getInstance().session.gleapId}&gleapHash=${GleapSession.getInstance().session.gleapHash}&apiKey=${GleapSession.getInstance().sdkKey}&sdkVersion=${SDK_VERSION}`);
+
+    // Set a timeout for the connection to open
+    this.connectionTimeout = setTimeout(() => {
+      if (self.socket.readyState !== self.socket.OPEN) {
+        self.socket.close();
+        console.error('Connection timeout');
+
+        GleapStreamedEvent.getInstance().initWebSocket();
+      }
+    }, 5000); // Set timeout to 5 seconds
+
+    // Event handler for the open event
+    this.socket.onopen = (event) => {
+      console.log('Connected to the WebSocket server:', event);
+
+      // Clear the connection timeout as the connection is open
+      if (self.connectionTimeout) {
+        clearTimeout(self.connectionTimeout);
+        self.connectionTimeout = null;
+      }
+    };
+
+    // Event handler for the message event to handle incoming messages
+    this.socket.onmessage = (event) => {
+      this.processMessage(JSON.parse(event.data));
+    };
+
+    // Event handler for the error event
+    this.socket.onerror = (error) => {
+      console.error('WebSocket Error:', error);
+    };
+
+    // Event handler for the close event
+    this.socket.onclose = (event) => {
+      // Check event.wasClean to see if the socket was closed cleanly
+      if (event.wasClean) {
+        console.log(`Closed. Reason: ${event.reason} Code: ${event.code}`);
+      } else {
+        console.error(`Connection died. Reason: ${event.reason} Code: ${event.code}`);
+      }
+
+      // Attempt to reconnect after a delay
+      setTimeout(() => {
+        GleapStreamedEvent.getInstance().initWebSocket();
+      }, 5000);
+    };
+  }
+
+  processMessage(message) {
+    try {
+      const { a, u } = message;
+      if (!GleapFrameManager.getInstance().isOpened()) {
+        if (a) {
+          Gleap.getInstance().performActions(a);
+        }
+        if (u != null) {
+          GleapNotificationManager.getInstance().setNotificationCount(u);
+        }
+      }
+    } catch (exp) { }
+  }
 
   // GleapStreamedEvent singleton
   static instance;
@@ -29,7 +122,7 @@ export default class GleapStreamedEvent {
   }
 
   stop() {
-    this.stopped = true;
+    this.cleanupMainLoop();
   }
 
   resetErrorCountLoop() {
@@ -38,18 +131,26 @@ 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.cleanupWebSocket();
+      this.initWebSocket();
+    }
+
+    this.cleanupMainLoop();
     this.trackInitialEvents();
     this.runEventStreamLoop();
   }
 
   start() {
-    this.stopped = false;
     this.startPageListener();
     this.resetErrorCountLoop();
   }
@@ -76,9 +177,6 @@ export default class GleapStreamedEvent {
   startPageListener() {
     const self = this;
     setInterval(function () {
-      if (self.stopped) {
-        return;
-      }
       self.logCurrentPage();
     }, 1000);
   }
@@ -106,27 +204,36 @@ 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) {
+      console.log("Not ready to stream events");
+      return;
+    }
+
+    // Nothing to stream.
+    if (this.streamedEventArray.length === 0) {
+      console.log("Nothing to stream");
+      return;
+    }
+
+    // Sockets not connected.
+    if (!this.socket || this.socket.readyState !== this.socket.OPEN) {
+      console.log("Socket not connected");
       return;
     }
 
     const self = this;
     this.streamingEvents = true;
 
-    const preGleapId = GleapSession.getInstance().getGleapId();
+    console.log(this.streamedEventArray);
 
     const http = new XMLHttpRequest();
     http.open("POST", GleapSession.getInstance().apiUrl + "/sessions/ping");
@@ -140,22 +247,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 +262,7 @@ export default class GleapStreamedEvent {
         events: this.streamedEventArray,
         opened: GleapFrameManager.getInstance().isOpened(),
         sdkVersion: SDK_VERSION,
+        ws: true,
       })
     );