v12.0.0

demo/main.js

@@ -1,9 +1,10 @@
 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.setLanguage("en");
+// Gleap.setLanguage("en");
 
 Gleap.initialize("X5C0grjFCjUMbZKi131MjZLaGRwg2iKH");
 

index.d.ts

@@ -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;

package.json

@@ -61,4 +61,4 @@
       "\\.(css|less)$": "<rootDir>/scripts/testMock.js"
     }
   }
-}
+}

src/Gleap.js

@@ -396,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

src/GleapSession.js

@@ -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;

src/GleapStreamedEvent.js

@@ -1,8 +1,6 @@
 import Gleap, { GleapFrameManager, GleapMetaDataManager, GleapSession } from "./Gleap";
 import { gleapDataParser } from "./GleapHelper";
 
-const serverUrl = 'wss://ws.gleap.io';
-
 export default class GleapStreamedEvent {
   eventArray = [];
   streamedEventArray = [];
@@ -14,109 +12,110 @@ export default class GleapStreamedEvent {
   socket = null;
   connectedWebSocketGleapId = null;
   connectionTimeout = null;
+  pingWS = null;
+  handleOpenBound = null;
+  handleErrorBound = null;
+  handleMessageBound = null;
+  handleCloseBound = null;
+
+  // GleapStreamedEvent singleton
+  static instance;
+  static getInstance() {
+    if (!this.instance) {
+      this.instance = new GleapStreamedEvent();
+      return this.instance;
+    } else {
+      return this.instance;
+    }
+  }
+
+  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.onclose = null;
-      this.socket.onerror = null;
-      this.socket.onmessage = null;
-      this.socket.onopen = null;
+      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() {
-    const self = this;
-    this.connectedWebSocketGleapId = GleapSession.getInstance().session.gleapId;
+    this.cleanupWebSocket();
 
-    console.log("Init websocket");
+    this.connectedWebSocketGleapId = GleapSession.getInstance().session.gleapId;
 
     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);
+    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);
+  }
 
-      // Clear the connection timeout as the connection is open
-      if (self.connectionTimeout) {
-        clearTimeout(self.connectionTimeout);
-        self.connectionTimeout = null;
+  handleOpen(event) {
+    this.pingWS = setInterval(() => {
+      if (this.socket.readyState === this.socket.OPEN) {
+        this.socket.send(JSON.stringify({
+          name: 'ping',
+          data: {},
+        }));
       }
-    };
+    }, 30000);
 
-    // Event handler for the message event to handle incoming messages
-    this.socket.onmessage = (event) => {
-      this.processMessage(JSON.parse(event.data));
-    };
+    if (this.connectionTimeout) {
+      clearTimeout(this.connectionTimeout);
+      this.connectionTimeout = null;
+    }
+  }
 
-    // Event handler for the error event
-    this.socket.onerror = (error) => {
-      console.error('WebSocket Error:', error);
-    };
+  handleMessage(event) {
+    this.processMessage(JSON.parse(event.data));
+  }
 
-    // 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}`);
-      }
+  handleError(error) { }
 
-      // Attempt to reconnect after a delay
-      setTimeout(() => {
-        GleapStreamedEvent.getInstance().initWebSocket();
-      }, 5000);
-    };
+  handleClose(event) {
+    setTimeout(() => {
+      this.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);
+      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) { }
   }
 
-  // GleapStreamedEvent singleton
-  static instance;
-  static getInstance() {
-    if (!this.instance) {
-      this.instance = new GleapStreamedEvent();
-      return this.instance;
-    } else {
-      return this.instance;
-    }
-  }
-
-  constructor() { }
-
   getEventArray() {
     return this.eventArray;
   }
@@ -141,7 +140,6 @@ export default class GleapStreamedEvent {
   restart() {
     // Only reconnect websockets when needed.
     if (this.connectedWebSocketGleapId !== GleapSession.getInstance().session.gleapId) {
-      this.cleanupWebSocket();
       this.initWebSocket();
     }
 
@@ -214,27 +212,22 @@ export default class GleapStreamedEvent {
 
   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;
 
-    console.log(this.streamedEventArray);
-
     const http = new XMLHttpRequest();
     http.open("POST", GleapSession.getInstance().apiUrl + "/sessions/ping");
     http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");