feat(app) support multi-tabs

src/App.vue

@@ -50,6 +50,7 @@ onMounted(() => {
   }
   websocketService = getWebsocketService();
   websocketService.init(host, onServerMsg, onClientCtrl);
+  websocketService.getSocketStatus();
   changeFavicon();
 
   useSystemModule();

src/composables/websocket/websocketService.ts

@@ -2,7 +2,7 @@ import MyWorker from '@/composables/websocket/ws.sharedworker?sharedworker'
 import {WebsocketWrapper} from "@/composables/websocket/websocketWrapper";
 import {toClient, toClientCtrl, toServer} from "@/composables/broadcastChannelDef";
 import type {ControlMsg, ServerMsg} from "@/api";
-import {ControlEvent, ControlMsgType} from "@/api";
+import {ControlMsgType} from "@/api";
 import {isDevMode} from "@/composables/buildMode";
 
 export interface IWebsocketService {
@@ -14,12 +14,13 @@ export interface IWebsocketService {
     deinit(): void;
 
     send(msg: ServerMsg): void;
+    getSocketStatus(): void;
 }
 
 /**
  * Websocket that run in a shared worker, shared across tabs
  */
-class WebsocketShared implements IWebsocketService{
+class WebsocketShared implements IWebsocketService {
     private static instance: IWebsocketService;
 
     private worker: SharedWorker;
@@ -82,6 +83,10 @@ class WebsocketShared implements IWebsocketService{
 
         this.ctrlCallback(ev.data);
     }
+
+    getSocketStatus() {
+        this.worker.port.postMessage({type: ControlMsgType.WS_GET_STATE} as ControlMsg)
+    }
 }
 
 class WebsocketClassic implements IWebsocketService{
@@ -115,6 +120,10 @@ class WebsocketClassic implements IWebsocketService{
     send(msg: ServerMsg): void {
         this.socket.send(msg);
     }
+
+    getSocketStatus(): void {
+        this.socket.getSocketStatus();
+    }
 }
 
 export function getWebsocketService(): IWebsocketService {

src/composables/websocket/websocketWrapper.ts

@@ -1,5 +1,4 @@
-
-import type {ApiJsonMsg, ControlMsg, ServerMsg} from "@/api";
+import type {ControlMsg, ServerMsg} from "@/api";
 import {ControlEvent, ControlMsgType} from "@/api";
 import {isDevMode} from "@/composables/buildMode";
 
@@ -9,6 +8,8 @@ interface IWebsocket {
     close(): void;
 
     send(msg: ServerMsg): void;
+
+    getSocketStatus(): void;
 }
 
 class WebsocketDummy implements IWebsocket {
@@ -20,6 +21,9 @@ class WebsocketDummy implements IWebsocket {
     send(msg: ServerMsg) {
 
     }
+
+    getSocketStatus(): void {
+    }
 }
 
 class OneTimeWebsocket implements IWebsocket {
@@ -61,6 +65,8 @@ class OneTimeWebsocket implements IWebsocket {
                     console.log("No heart beat, break connection");
                     this.close();
                     this.clear();
+                // } else if (this.socket.readyState === this.socket.CONNECTING) {
+                //     this.close();
                 }
                 if (isDevMode()) {
                     console.log("interval: ", this.heartBeatTimeCount, "state: ", this.socket.readyState);
@@ -159,6 +165,26 @@ class OneTimeWebsocket implements IWebsocket {
         this.ctrlCallback(msg);
         this.closeCallback();
     }
+
+    getSocketStatus() {
+        let type: ControlEvent;
+        switch (this.socket.readyState) {
+            case WebSocket.CONNECTING:
+                type = ControlEvent.CONNECTING;
+                break;
+            case WebSocket.OPEN:
+                type = ControlEvent.CONNECTED;
+                break;
+            default:
+                type = ControlEvent.DISCONNECTED;
+                break;
+        }
+        const msg: ControlMsg = {
+            type: ControlMsgType.WS_EVENT,
+            data: type,
+        };
+        this.ctrlCallback(msg);
+    }
 }
 
 export class WebsocketWrapper {
@@ -219,4 +245,8 @@ export class WebsocketWrapper {
     send(msg: ServerMsg) {
         this.socket.send(msg)
     }
+
+    getSocketStatus() {
+        this.socket.getSocketStatus();
+    }
 }

src/composables/websocket/ws.sharedworker.ts

@@ -1,12 +1,11 @@
 import type {ControlMsg, ServerMsg} from "@/api";
-
-declare const self: SharedWorkerGlobalScope;
-
+import {ControlEvent, ControlMsgType} from "@/api";
 import {WebsocketWrapper} from "@/composables/websocket/websocketWrapper";
 import {toClient, toClientCtrl, toServer} from "@/composables/broadcastChannelDef";
-import {ControlEvent, ControlMsgType} from "@/api";
 import {isDevMode} from "@/composables/buildMode";
 
+declare const self: SharedWorkerGlobalScope;
+
 const websocket = new WebsocketWrapper();
 let host = "";
 
@@ -30,6 +29,8 @@ self.onconnect = function(event) {
                 host = e.data.data;
                 websocket.init(host, msgBroadcast, ctrlBroadcast);
             }
+        } else if (e.data.type === ControlMsgType.WS_GET_STATE) {
+            websocket.getSocketStatus();
         }
     };
     const msg: ControlMsg = {