fix: sending worker messages only to active tab

pragmasoft-ua · Nov 20, 2023 · e1f5fd7 · e1f5fd7
1 parent 30c1c6d
commit e1f5fd7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/packages/kite-chat/src/kite-chat.ts b/packages/kite-chat/src/kite-chat.ts
@@ -77,10 +77,10 @@ export class KiteChat {
     })
 
     addEventListener('visibilitychange', () => {
-      if (document.visibilityState === 'hidden') {
-        this.disconnect();
-      } else {
-        this.connect();
+      if (document.visibilityState === 'visible') {
+        this.kiteWorker?.port.postMessage({
+          type: MsgType.ACTIVE_TAB,
+        });
         this.restore();
       }
     });

diff --git a/packages/kite-chat/src/kite-types.ts b/packages/kite-chat/src/kite-types.ts
@@ -35,6 +35,7 @@ export enum MsgType {
   PING = 'PING',
   PONG = 'PONG',
   FAILED = "FAILED",
+  ACTIVE_TAB = "ACT_TAB"
 }
 
 export type JoinChannel = {
@@ -130,6 +131,10 @@ export type OK = {
   type: MsgType.OK;
 };
 
+export type ActiveTab = {
+  type: MsgType.ACTIVE_TAB;
+};
+
 export type ContentMsg = PlaintextMsg | FileMsg;
 
 export enum FileVerification {
@@ -165,4 +170,5 @@ export type KiteMsg =
   | Offline
   | Ping
   | Pong
-  | FailedMsg;
+  | FailedMsg
+  | ActiveTab;
diff --git a/packages/kite-chat/src/kite-worker.ts b/packages/kite-chat/src/kite-worker.ts
@@ -53,6 +53,7 @@ const PLAIN_MAX_SIZE = 4 * 1024; // 4KB
 const ZIP_FILE_FORMAT = "application/zip";
 
 interface KiteMessagePort extends MessagePort {
+  active: boolean;
   postMessage(value: KiteMsg): void;
 }
 
@@ -86,13 +87,10 @@ const tabPorts = new Set<KiteMessagePort>();
 
 let pingerTimer: ReturnType<typeof setInterval> | null = null;
 
-const broadcast = (msg: KiteMsg, exclude?: KiteMessagePort) => {
-  for (const tabPort of tabPorts) {
-    if (tabPort !== exclude) {
-      tabPort.postMessage(msg);
-    }
-  }
-};
+const toActiveTab = (msg: KiteMsg) => {
+  const activePort = Array.from(tabPorts).find((port) => port.active);
+  activePort?.postMessage(msg);
+}
 
 const messageById = (messageId: string) =>
   messageHistory.findLast((msg) => msg.messageId === messageId);
@@ -125,6 +123,12 @@ function onTabConnected(e: MessageEvent) {
   });
 }
 
+function onActiveTab(port: KiteMessagePort) {
+  for (const p of tabPorts) {
+    p.active = (p === port);
+  }
+}
+
 function onTabMessage(e: MessageEvent<KiteMsg>) {
   const tabPort = e.target as unknown as KiteMessagePort;
   const payload = e.data;
@@ -140,6 +144,9 @@ function onTabMessage(e: MessageEvent<KiteMsg>) {
     case MsgType.FILE:
       onFileMessage(payload, tabPort);
       break;
+    case MsgType.ACTIVE_TAB:
+      onActiveTab(tabPort);
+      break;
     case MsgType.DISCONNECTED:
       onTabDisconnected(tabPort);
       break;
@@ -229,7 +236,6 @@ function formatSize(size: number): string {
 
 function onPlaintextMessage(payload: PlaintextMsg, tabPort: KiteMessagePort) {
   messageHistory.push(payload);
-  broadcast(payload, tabPort);
 
   const result = verifyPlainText(payload.text);
 
@@ -250,7 +256,6 @@ function onPlaintextMessage(payload: PlaintextMsg, tabPort: KiteMessagePort) {
 
 function onFileMessage(payload: FileMsg, tabPort: KiteMessagePort) {
   messageHistory.push(payload);
-  broadcast(payload, tabPort);
 
   const uploadFile = async (file: File) => {
     const upload: UploadRequest = {
@@ -406,7 +411,7 @@ function onWsClose(e: CloseEvent) {
     )} minutes`,
     e
   );
-  broadcast({type: MsgType.OFFLINE, sessionDurationMs});
+  toActiveTab({type: MsgType.OFFLINE, sessionDurationMs});
   if (!online) {
     console.warn(WORKER_NAME, 'offline, do not reconnect');
     ws = null;
@@ -434,12 +439,12 @@ function onWsError(e: Event) {
 function onWsJoined() {
   console.debug(WORKER_NAME, 'ws joined');
   flushQueue();
-  broadcast({type: MsgType.ONLINE});
+  toActiveTab({type: MsgType.ONLINE});
 }
 
 function onWsPlaintextMessage(payload: PlaintextMsg) {
   messageHistory.push(payload);
-  broadcast(payload);
+  toActiveTab(payload);
 }
 
 async function onWsBinaryMessage(payload: BinaryMsg) {
@@ -451,10 +456,10 @@ async function onWsBinaryMessage(payload: BinaryMsg) {
       file,
     };
     messageHistory.push(incoming);
-    broadcast(incoming);
+    toActiveTab(incoming);
   } catch (error) {
     if (error instanceof HttpError) {
-      broadcast({
+      toActiveTab({
         type: MsgType.ERROR,
         reason: error.message,
         code: error.status,
@@ -484,13 +489,13 @@ async function onWsUploadResponse(payload: UploadResponse) {
     queue(outgoing);
   } catch (error) {
     if (error instanceof HttpError) {
-      broadcast({
+      toActiveTab({
         type: MsgType.ERROR,
         reason: error.message,
         code: error.status,
       });
     } else if (error instanceof Error) {
-      broadcast({
+      toActiveTab({
         type: MsgType.ERROR,
         reason: error.message,
         code: 0,
@@ -510,7 +515,7 @@ function onMessageAck(payload: MsgAck) {
     console.warn(WORKER_NAME, 'Unexpected Ack', payload.messageId);
   }
   // TODO handle properly in tab controller
-  broadcast(payload);
+  toActiveTab(payload);
 }
 
 function onErrorResponse(payload: ErrorMsg) {