@chat21/chat21-ionic 3.4.27-rc22 → 3.4.27-rc23

package/CHANGELOG.md

@@ -8,6 +8,9 @@
 ### **Copyrigth**: 
 *Tiledesk SRL*
 
+# 3.4.27-rc23
+- **added**: keepAlive worker for MQTT connection
+
 # 3.4.27-rc22
 - **added**: new WsWorker to manage iframe chrome throttling while tab is in background or hidden
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@chat21/chat21-ionic",
     "author": "Tiledesk SRL",
-    "version": "3.4.27-rc22",
+    "version": "3.4.27-rc23",
     "license": "MIT License",
     "homepage": "https://tiledesk.com/",
     "repository": {

package/src/app/app.component.ts

@@ -543,10 +543,13 @@ export class AppComponent implements OnInit {
       this.statusBar.styleLightContent();
       this.navService.init(this.sidebarNav, this.detailNav);
       this.tiledeskAuthService.initialize(this.appConfigProvider.getConfig().apiUrl);
-      this.messagingAuthService.initialize();
-
+      this.tiledeskService.initialize(this.appConfigProvider.getConfig().apiUrl)
+      this.projectService.initialize(this.appConfigProvider.getConfig().apiUrl);
+      this.contactsService.initialize(this.appConfigProvider.getConfig().apiUrl)
+      
       // this.currentUserService.initialize();
       this.chatManager.initialize();
+      this.messagingAuthService.initialize();
       this.presenceService.initialize(this.tenant);
       this.typingService.initialize(this.tenant);
 
@@ -1181,7 +1184,6 @@ export class AppComponent implements OnInit {
     // this.logger.info('initialize FROM [APP-COMP] - [APP-COMP] - GO-ONLINE isOnline ', this.isOnline);
     // clearTimeout(this.timeModalLogin);
     const tiledeskToken = this.tiledeskAuthService.getTiledeskToken();
-    const serverBaseURL = this.appConfigProvider.getConfig().apiUrl 
     // const supportmode = this.appConfigProvider.getConfig().supportMode;
     // this.logger.log('[APP-COMP] - GO-ONLINE - supportmode ', supportmode);
     // if (supportmode === true) {
@@ -1195,10 +1197,6 @@ export class AppComponent implements OnInit {
     this.chatManager.setTiledeskToken(tiledeskToken);
     this.chatManager.setCurrentUser(currentUser);
 
-    this.tiledeskService.initialize(serverBaseURL)
-    this.projectService.initialize(serverBaseURL)
-    this.projectUsersService.initialize(serverBaseURL)
-    this.contactsService.initialize(serverBaseURL)
     // this.chatManager.startApp();
 
 

package/src/app/services/websocket/websocket-js.ts

@@ -5,9 +5,9 @@ import { LoggerInstance } from 'src/chat21-core/providers/logger/loggerInstance'
 interface Subscription {
   topic: string;
   label?: string;
-  onCreate?: (msg: any) => void;
-  onUpdate?: (msg: any) => void;
-  onData?: (msg: any) => void;
+  onCreate?: (msg: any, notification: any) => void;
+  onUpdate?: (msg: any, notification: any) => void;
+  onData?: (msg: any, notification: any) => void;
 }
 
 @Injectable({
@@ -22,6 +22,14 @@ export class WebSocketJs {
   constructor() {
     this.worker = new Worker(new URL('./websocket.worker', import.meta.url));
     
+    // ➤ AGGIUNTA: notifica al worker quando la tab va in background
+    document.addEventListener("visibilitychange", () => {
+      this.worker.postMessage({
+        action: "visibility",
+        data: { hidden: document.hidden }
+      });
+    });
+
     // ricezione dei messaggi dal worker
     this.worker.onmessage = (event) => {
       const msg = event.data;
@@ -30,28 +38,21 @@ export class WebSocketJs {
       const sub = this.subscriptions.get(msg.topic);
       if (!sub) return;
 
+      let object = { event: msg.payload, data: msg };
       switch (msg.method) {
-        case 'CREATE': sub.onCreate?.(msg.payload); break;
-        case 'UPDATE': sub.onUpdate?.(msg.payload); break;
-        case 'DATA':   sub.onData?.(msg.payload);   break;
+        case 'CREATE': sub.onCreate?.(msg.payload, object); break;
+        case 'UPDATE': sub.onUpdate?.(msg.payload, object); break;
+        case 'DATA':   sub.onData?.(msg.payload, object);   break;
       }
-
-      // ➤ AGGIUNTA: notifica al worker quando la tab va in background
-      document.addEventListener("visibilitychange", () => {
-        this.worker.postMessage({
-          action: "visibility",
-          data: { hidden: document.hidden }
-        });
-      });
-
     };
   }
 
   init(url: string) {
     this.worker.postMessage({ action: 'init', data: { url } });
+    this.worker.postMessage({ action: 'visibility', data: { hidden: document.hidden } });
   }
 
-  ref(topic: string, calledby?: string, onCreate?: (msg:any)=>void, onUpdate?: (msg:any)=>void, onData?: (msg:any)=>void) {
+  ref(topic: string, calledby?: string, onCreate?: (msg:any, notification: any)=>void, onUpdate?: (msg:any, notification: any)=>void, onData?: (msg:any, notification: any)=>void) {
     this.logger.log('[WEBSOCKET-JS] - REF - calledby ', calledby);
     this.logger.log('[WEBSOCKET-JS] - REF - TOPIC ', topic);
 

package/src/app/services/websocket/websocket.worker.ts

@@ -154,7 +154,7 @@ function handleMessage(msg: WSMessage) {
   // Notifica solo le subscription che matchano
   subscriptions.forEach(sub => {
     if (sub.topic === topic) {
-      postMessage({ topic, method, payload }, undefined);
+      postMessage({ topic, method, payload, msg }, undefined);
     }
   });
 }

package/src/assets/js/chat21client.js

@@ -1010,6 +1010,7 @@ class Chat21Client {
                     this.start( () => {
                         // callback();
                     });
+                    this.initKeepAliveWorker()
                 }
                 this.client.publish(
                     this.presence_topic,
@@ -1027,6 +1028,34 @@ class Chat21Client {
                 console.error("Chat client error event", error);
             }
         );
+
+        
+    }
+
+
+    initKeepAliveWorker(){
+        this.worker= new Worker('assets/js/mqtt-keepalive-worker.js');
+        console.log("Chat21Client - initKeepAliveWorker() - worker created", this.worker);
+        // this.worker.postMessage({
+        //     action: 'start',
+        //     user_id: this.user_id,
+        //     client_id: this.client_id,
+        //     jwt: this.jwt,
+        //     endpoint: this.endpoint
+        // });
+        this.worker.onmessage = (event) => {
+            if (event.data.action === 'ping') {
+                if (this.client && this.client.connected) {
+                    // questo non causa refresh di niente
+                    this.client.publish(
+                        `apps/tilechat/users/${this.user_id}/keepalive`,
+                        JSON.stringify({ ts: Date.now() })
+                    );
+                }
+            }
+        };
+
+        this.worker.postMessage({ action: 'ping' });
     }
 
     onDisconnect(callback){
@@ -1041,6 +1070,11 @@ class Chat21Client {
                 this.connected = false
                 if (this.log) {console.log("Chat client close event");}
                 callback('close')
+                if (this.worker) {
+                    this.worker.postMessage({ action: 'stop' });
+                    this.worker.terminate();
+                    this.worker = null;
+                }
             }
         );
         this.client.on('offline',

package/src/assets/js/mqtt-keepalive-worker.js

@@ -0,0 +1,52 @@
+importScripts('https://unpkg.com/mqtt/dist/mqtt.min.js');
+
+let client = null;
+let user_id = null;
+let pingIntervalId = null;
+self.onmessage = function(event) {
+    const data = event.data;
+
+    console.log('MQTT KEEPALIVE WORKER - received message ', data);
+    if (data.action === 'start') {
+        user_id = data.user_id;
+        const endpoint = data.endpoint;
+        const jwt = data.jwt;
+
+        const options = {
+            keepalive: 3,          // basso keepalive
+            reconnectPeriod: 1000,
+            clientId: data.client_id,
+            username: 'JWT',
+            password: jwt,
+            rejectUnauthorized: false
+        };
+
+        client = mqtt.connect(endpoint, options);
+
+        client.on('connect', () => {
+            // start ping
+            pingIntervalId = setInterval(() => {
+                if (client && client.connected) {
+                    console.log('MQTT KEEPALIVE WORKER - sending keepalive ping for user ', user_id);
+                    client.publish(`apps/tilechat/users/${user_id}/keepalive`,
+                        JSON.stringify({ ts: new Date().getTime() }));
+                }
+            }, 3000);
+        });
+
+        client.on('close', () => {
+            clearInterval(pingIntervalId);
+            pingIntervalId = null;
+        });
+    }else if (data.action === 'ping') {
+        if (self.timer) return;
+        self.timer = setInterval(() => {
+            postMessage({ action: 'ping' });
+        }, 3000);
+    }
+
+    if (data.action === 'stop') {
+        if (pingIntervalId) clearInterval(pingIntervalId);
+        if (client) client.end();
+    }
+};

package/src/assets/test.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
-  <title>replit</title>
+  <title>Iframe test</title>
 </head>
 
 <body style="height: 100%;">
@@ -20,7 +20,10 @@
   </div>
 
   <iframe id="myIFrame" frameBorder="0" width="100%" style="display: flex; height: 95vh" onload="onLoad()"
-  src="http://localhost:8080/#/conversation-detail?tiledesk_supportMode=true&jwt=JWT eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZmQzNGU0MjQ5NjEwZTAwMzQ5ODUwNzgiLCJlbWFpbCI6ImdhYnJpZWxlLnBhbmljb0Bmcm9udGllcmUyMS5pdCIsImZpcnN0bmFtZSI6IkdhYnJpZWxlMiIsImxhc3RuYW1lIjoiUGFuaWNvIC1wcmUiLCJlbWFpbHZlcmlmaWVkIjp0cnVlLCJpYXQiOjE2OTgzMzYyMTMsImF1ZCI6Imh0dHBzOi8vdGlsZWRlc2suY29tIiwiaXNzIjoiaHR0cHM6Ly90aWxlZGVzay5jb20iLCJzdWIiOiJ1c2VyIiwianRpIjoiNjAzZGY3NDQtZWY0OS00Mjg2LWJlMWQtYWM5OGYyYTNkMTJiIn0.bof5QPQP262yCQfpeSjqyoYPkSCttg5NQFkcV8d634xzeq7wJBdhtiO7IJY6hS81a1YyXrAsxlK7RiNS-UZdYiTXR81UXurQd1fnE9jtaggB82tyNL8vmiZEOs6xh4TqO3-kkBzRxQIp74bY53fk_mu5RmNbAjIgUWEufaNDiv8"></iframe>
+    src="http://localhost:8080/#/conversation-detail?tiledesk_supportMode=true&jwt=JWT eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NWM1ZjM1OTlmYWYyZDA0Y2Q3ZGE1MjgiLCJlbWFpbCI6Imdpb3Zhbm5pQHRpbGVkZXNrLmNvbSIsImZpcnN0bmFtZSI6Ikdpb3Zhbm5pIiwibGFzdG5hbWUiOiJUcm9pc2kgQWRtIiwiZW1haWx2ZXJpZmllZCI6dHJ1ZSwiaWF0IjoxNzY0NjAyMTQxLCJhdWQiOiJodHRwczovL3RpbGVkZXNrLmNvbSIsImlzcyI6Imh0dHBzOi8vdGlsZWRlc2suY29tIiwic3ViIjoidXNlciIsImp0aSI6IjIwNzZjYmMxLTI0NzgtNGU4MC1iZjFmLTBiZTA3MTQ3MjQ3MSJ9.R60xZC5M2n-hc-mRIMpA9KaUFxnBQHA_FrLyL9cCiqxeCitfCfbfA3_EKXWbWg3rDztmOR7SVjEO8Gyw_hdhKyjpx-OpaDAILw0dSsuBHB0R4h0F4fN2J_JJ60UIItXxoAq1AI9ML2cRGoRNAtfl6PMjpHXdbpdBAGcBYoGqGv3xWPlM7wOdIhGasnWT932DiscF3I_ltcFkS3naebQQfsgztlbU-UF7EcFjDc-mMzMxqnE1MYKzyqUAR9J9zFmqiUlCsl_J0TNhAjqUw-0GHXpzLQJN9dutVyH4y_MZxt_p6qAIzNo9LpMi-a5bfvQvpJjSuc9POvmlmWFAmwoQGw"
+    allow="autoplay; fullscreen; geolocation; microphone; camera; display-capture; encrypted-media; clipboard-read; clipboard-write;"
+    loading="eager" importance="high">
+  </iframe>
   
   <script>        
     // window.addEventListener('message', event => {