优化socket的创建及连接

src/websocket/socket.ts

@@ -47,6 +47,22 @@ interface AppEventMessage extends BaseMessage {
   data: EventType
   timestamp: number
 }
+
+export type MsgLevel = 'Info' | 'Warn' | 'Error'
+export type MsgItem = {
+  messageLevel: MsgLevel
+  message: string
+}
+export interface FooterMessageState extends BaseMessage {
+  type: 'MessageBoxState'
+  messageType: 'Report'
+  dataType: 'MessageBoxState'
+  data: {
+    topMessage: MsgItem
+    messageBoxList: MsgItem[]
+  }
+}
+
 type WorkState = 'IDLE' | 'WORKING' | 'PAUSE'
 // 设备工作状态消息
 interface DeviceWorkStateMessage extends BaseMessage {
@@ -210,8 +226,7 @@ interface ConsumableGroupBase {
   color: string
   num: number
   isInstall: boolean
-  reserveNum: number,
-  
+  reserveNum: number
 }
 
 export interface ReactionPlateGroup extends Partial<ConsumableGroupBase> {}
@@ -237,7 +252,7 @@ interface ConsumablesStateMessage extends BaseMessage {
     tips: TipInfo[]
     reactionPlateGroup: ReactionPlateGroup[]
     littBottleGroup: LittleBottleGroup[]
-    larBottleGroup: LargeBottleGroup[],
+    larBottleGroup: LargeBottleGroup[]
   }
   timestamp: number
 }
@@ -251,6 +266,7 @@ type WebSocketMessage =
   | SensorStateMessage
   | IncubationPlateStateMessage
   | AppEventMessage
+  | FooterMessageState
   | ConsumablesStateMessage
 
 // 消息处理器类型
@@ -299,13 +315,12 @@ class WebSocketClient {
   private handleMessage(message: WebSocketMessage): void {
     const handlers = this.messageHandlers.get(message.dataType)
     if (!handlers) {
-      if (message.dataType == 'AppEvent') {
-        console.log(
-          '🚀 ~ WebSocketClient ~ handleMessage ~ handlers is undefined for message type:',
-          message.dataType,
-        )
-      }
-
+      // if (message.dataType === 'MessageBoxState') {
+      //   console.log(
+      //     '🚀 ~ WebSocketClient ~ handleMessage ~ handlers is undefined for message type:',
+      //     message.dataType,
+      //   )
+      // }
       return
     }
     handlers.forEach((handler) => {
@@ -320,8 +335,14 @@ class WebSocketClient {
   // 连接 WebSocket
   connect(): void {
     try {
-      this.ws = new WebSocket(this.url)
-      this.bindEvents()
+      // WebSocket.CONNECTING (0) WebSocket.OPEN (1)
+      if (this.ws && this.ws.readyState <= 1) {
+        // 已连接
+        console.log(`${this.url} 正在连接或已连接，无需重复连接`)
+      } else {
+        this.ws = new WebSocket(this.url)
+        this.bindEvents()
+      }
     } catch (error) {
       console.error('WebSocket 连接失败:', error)
       this.reconnect()
@@ -343,7 +364,6 @@ class WebSocketClient {
       try {
         const data = JSON.parse(event.data)
         // console.log('🚀 ~ WebSocketClient ~ bindEvents ~ data:', data)
-
         this.handleMessage(data)
       } catch (error) {
         console.error('消息解析错误:', error)
@@ -385,6 +405,7 @@ class WebSocketClient {
   }
 }
 
+const urlSocketMap = new Map()
 // 创建单例
 // let wsInstance: WebSocketClient | null = null
 
@@ -411,7 +432,13 @@ export const createWebSocket = (url: string): WebSocketClient => {
   // if (!wsInstance) {
   //   wsInstance = new WebSocketClient(url)
   // }
-  return new WebSocketClient(url)
+  if (urlSocketMap.has(url)) {
+    return urlSocketMap.get(url)
+  } else {
+    const client = new WebSocketClient(url)
+    urlSocketMap.set(url, client)
+    return client
+  }
 }
 
 // 使用示例：