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

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

@@ -0,0 +1,232 @@
+/// websocket.worker.ts
+
+interface WSMessage {
+  action?: string;
+  event?: { topic: string; method: string };
+  payload?: any;
+}
+
+interface Subscription {
+  topic: string;
+  label?: string;
+  onCreate?: (msg: any) => void;
+  onUpdate?: (msg: any) => void;
+  onData?: (msg: any) => void;
+}
+
+let ws: WebSocket | null = null;
+let url = '';
+let reconnectInterval = 5000;
+let subscriptions: Subscription[] = [];
+let pendingMessages: any[] = [];
+
+
+let pingMsg = { action: "heartbeat", payload: { message: { text: "ping" } } }
+let pongMsg = { action: "heartbeat", payload: { message: { text: "pong" } } }
+const pongTimeout = 10000;
+const pingTimeout = 15000;
+let pingTimeoutId;
+let pongTimeoutId;
+
+let reconnectAttempts = 0;
+const maxReconnectDelay = 30000;
+let manuallyClosed = false;
+let pageHidden = false;
+
+onmessage = (e: MessageEvent) => {
+  const { action, data } = e.data;
+
+  switch (action) {
+    case 'init':
+      url = data.url;
+      connect();
+      break;
+    case 'subscribe':
+      const topic = data.topic || data.label;
+      subscriptions.push({ topic });
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({
+          action: 'subscribe',
+          payload: {
+            topic: topic,
+            message: undefined,
+            method: undefined
+          }
+        }));
+      }
+      break;
+    case 'unsubscribe':
+      subscriptions = subscriptions.filter(s => s.topic !== data.topic);
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        // Unsubscribe
+        ws.send(JSON.stringify({
+          action: 'unsubscribe',
+          payload: {
+            topic: data.topic,
+            message: undefined,
+            method: undefined
+          }
+        }));
+      }
+      break;
+    case 'visibility':  // ✅ Nuovo
+      pageHidden = data.hidden;
+      break;
+    case 'send':
+      sendMessage(data.message);
+      break;
+    case 'close':   // ✅ Nuovo
+      closeConnection();
+      break;
+  }
+};
+
+function connect() {
+  ws = new WebSocket(url);
+  ws.onopen = () => {
+    console.log('[Worker] WebSocket connected',subscriptions);
+    // Risottiamo pending subscriptions
+    subscriptions.forEach(s => {
+      ws!.send(JSON.stringify({
+        action: 'subscribe',
+        payload: {
+          topic: s.topic,
+          message: undefined,
+          method: undefined
+        }
+      }));
+    }
+    );
+    // Invia messaggi in coda
+    pendingMessages.forEach(msg => ws!.send(JSON.stringify(msg)));
+    pendingMessages = [];
+
+    // Inizializza heartbeat
+    heartCheck();
+    reconnectAttempts = 0;
+  };
+
+  ws.onmessage = (event) => {
+    try {
+      const msg: WSMessage = JSON.parse(event.data);
+      handleMessage(msg);
+    } catch (err) {
+      console.error('[Worker] Invalid message', err);
+    }
+  };
+
+  ws.onclose = () => {
+    heartReset();
+    if(!manuallyClosed){
+      reconnectAttempts++;
+      const delay = Math.min(reconnectAttempts * 1000, maxReconnectDelay);
+      console.log('[Worker] WebSocket disconnected, retry in', delay, 'ms');
+      setTimeout(connect, delay);
+    }
+  };
+
+  ws.onerror = (err) => {
+    console.error('[Worker] WebSocket error', err);
+    ws?.close();
+  };
+}
+
+function handleMessage(msg: WSMessage) {
+  console.log('[Worker] Received message:', msg);
+  // --- GESTIONE PING/PONG ---
+  if (msg.action === 'heartbeat' && msg.payload?.message?.text === 'ping') {
+    console.log('[Worker] Received ping, sending pong');
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(pongMsg));
+    }
+    return; // Non processare ulteriormente il ping
+  }
+
+  // Solo formato "publish"
+  if (msg.action !== "publish") return;
+
+  const topic = msg.payload?.topic;
+  const method = msg.payload?.method;
+  const payload = msg.payload?.message;
+
+  if (!topic) return;
+  
+  // Notifica solo le subscription che matchano
+  subscriptions.forEach(sub => {
+    if (sub.topic === topic) {
+      postMessage({ topic, method, payload, msg }, undefined);
+    }
+  });
+}
+
+function sendMessage(message: any) {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(message));
+  } else {
+    pendingMessages.push(message);
+  }
+}
+
+
+// -----------------------------------------------------------------------------------------------------
+// @ HeartCheck
+// -----------------------------------------------------------------------------------------------------
+function heartCheck() {
+  heartReset();
+  heartStart();
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ HeartStart
+// -----------------------------------------------------------------------------------------------------
+function heartStart() {
+  // this.getRemainingTime();
+
+  // usa intervallo adattivo se tab è in background (Chrome throtla i timer)
+  const adaptivePing = pageHidden ? pingTimeout * 3 : pingTimeout;
+
+  // // pianifica invio ping
+  pingTimeoutId = setTimeout(() => {
+    if (!ws || ws.readyState !== WebSocket.OPEN) return;
+    console.log("[WEBSOCKET-JS] - HEART-START - SENDING PING ");
+
+    // Qui viene inviato un battito cardiaco. Dopo averlo ricevuto, viene restituito un messaggio di battito cardiaco.
+    // onmessage Ottieni il battito cardiaco restituito per indicare che la connessione è normale
+    ws.send(JSON.stringify(pingMsg));
+
+    // Se non viene ripristinato dopo un determinato periodo di tempo, il backend viene attivamente disconnesso
+    pongTimeoutId = setTimeout(() => {
+      console.log("[WEBSOCKET-JS] - HEART-START - PONG-TIMEOUT-ID  - CLOSE WS ");
+      // se onclose Si esibirà reconnect，Eseguiamo ws.close() Bene, se lo esegui direttamente reconnect Si innescherà onclose Causa riconnessione due volte
+      ws.close();
+    }, pongTimeout) as unknown as number;
+  }, adaptivePing);
+
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ heartReset
+// -----------------------------------------------------------------------------------------------------
+function heartReset() {
+  if (pongTimeoutId !== undefined) {
+    clearTimeout(pongTimeoutId);
+    pongTimeoutId = undefined;
+  }
+
+  if (pingTimeoutId !== undefined) {
+    clearTimeout(pingTimeoutId);
+    pingTimeoutId = undefined;
+  }
+}
+
+function closeConnection() {
+  if (ws) {
+    ws.close();
+    ws = null;
+  }
+  heartReset();
+  pendingMessages = [];
+  subscriptions = [];
+  manuallyClosed = true;
+  console.log('[Worker] WebSocket closed manually');
+}

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 => {