fixed bug for websocket message handler rebind

web/src/App.vue

@@ -54,7 +54,7 @@ onMounted(() => {
 })
 
 watch(() => store.isLogin, (val) => {
-  if (val && store.socket.readyState !== WebSocket.OPEN) {
+  if (val) {
     connect()
   }
 })
@@ -79,26 +79,11 @@ const connect = () => {
         _socket.send(JSON.stringify({"type":"ping"}))
       }
     },5000)
-
-    // 绑定事件监听
-    for (const key in store.messageHandlers) {
-      console.log(store.messageHandlers[key])
-      store.setMessageHandler(store.messageHandlers[key])
-    }
   })
-
   _socket.addEventListener('close', () => {
-    // 移除事件监听
-    for (const key in store.messageHandlers) {
-      if (store.socket) {
-        store.socket.removeEventListener('message', store.messageHandlers[key])
-      }
-    }
-    store.setSocket(null)
     clearInterval(handler.value)
     connect()
   });
-
   store.setSocket(_socket)
 }
 

web/src/store/sharedata.js

@@ -6,8 +6,7 @@ export const useSharedStore = defineStore('shared', {
         showLoginDialog: false,
         chatListStyle: Storage.get("chat_list_style","chat"),
         chatStream: Storage.get("chat_stream",true),
-        socket: WebSocket,
+        socket: {conn:null, handlers:{}},
-        messageHandlers:{},
         mobileTheme: Storage.get("mobile_theme", "light"),
         adminTheme: Storage.get("admin_theme", "light"),
         isLogin: false
@@ -26,41 +25,42 @@ export const useSharedStore = defineStore('shared', {
             Storage.set("chat_stream", value);
         },
         setSocket(value) {
-            this.socket = value;
+            for (const key in this.socket.handlers) {
+                this.setMessageHandler(value, this.socket.handlers[key])
+            }
+            this.socket.conn = value
         },
         addMessageHandler(key, callback) {
-            if (!this.messageHandlers[key]) {
+            if (!this.socket.handlers[key]) {
-                this.setMessageHandler(callback)
+                this.socket.handlers[key] = callback;
             }
-            this.messageHandlers[key] = callback;
+            this.setMessageHandler(this.socket.conn, callback)
         },
-        setMessageHandler(callback) {
+
-            if (this.socket instanceof WebSocket && this.socket.readyState === WebSocket.OPEN) {
+        setMessageHandler(conn, callback) {
-                console.log(callback)
+            if (!conn) {
-                this.socket.addEventListener('message', (event) => {
+                return
-                    try {
+            }
-                        if (event.data instanceof Blob) {
+            conn.addEventListener('message', (event) => {
-                            const reader = new FileReader();
+                try {
-                            reader.readAsText(event.data, "UTF-8");
+                    if (event.data instanceof Blob) {
-                            reader.onload = () => {
+                        const reader = new FileReader();
-                                callback(JSON.parse(String(reader.result)))
+                        reader.readAsText(event.data, "UTF-8");
-                            }
+                        reader.onload = () => {
+                            callback(JSON.parse(String(reader.result)))
                         }
-                    } catch (e) {
-                        console.warn(e)
                     }
-                })
+                } catch (e) {
-            } else {
+                    console.warn(e)
-                setTimeout(() => {
+                }
-                    this.setMessageHandler(callback)
+            })
-                }, 1000)
-            }
         },
+
         removeMessageHandler(key) {
-            if (this.socket.readyState === WebSocket.OPEN) {
+            if (this.socket.conn && this.socket.conn.readyState === WebSocket.OPEN) {
-                this.socket.removeEventListener('message', this.messageHandlers[key])
+                this.socket.conn.removeEventListener('message', this.socket.handlers[key])
             }
-            delete this.messageHandlers[key]
+            delete this.socket.handlers[key]
         },
         setMobileTheme(theme) {
             this.mobileTheme = theme

web/src/views/ChatPlus.vue

@@ -689,7 +689,7 @@ const sendMessage = function () {
     return;
   }
 
-  if (store.socket.readyState !== WebSocket.OPEN) {
+  if (store.socket.conn.readyState !== WebSocket.OPEN) {
     ElMessage.warning("连接断开，正在重连...");
     return
   }
@@ -727,7 +727,7 @@ const sendMessage = function () {
 
   showHello.value = false
   disableInput(false)
-  store.socket.send(JSON.stringify({
+  store.socket.conn.send(JSON.stringify({
     channel: 'chat',
     type:'text',
     body:{
@@ -825,7 +825,7 @@ const reGenerate = function (prompt) {
     icon: loginUser.value.avatar,
     content: text
   });
-  store.socket.send(JSON.stringify({
+  store.socket.conn.send(JSON.stringify({
     channel: 'chat',
     type:'text',
     body:{

web/src/views/mobile/ChatSession.vue

@@ -512,7 +512,7 @@ const sendMessage = () => {
     return
   }
 
-  if (store.socket.readyState !== WebSocket.OPEN) {
+  if (store.socket.conn.readyState !== WebSocket.OPEN) {
     showToast("连接断开，正在重连...");
     return
   }
@@ -536,7 +536,7 @@ const sendMessage = () => {
   })
 
   disableInput(false)
-  store.socket.send(JSON.stringify({
+  store.socket.conn.send(JSON.stringify({
     channel: 'chat',
     type:'text',
     body:{
@@ -569,7 +569,7 @@ const reGenerate = () => {
     icon: loginUser.value.avatar,
     content: renderInputText(text)
   });
-  store.socket.send(JSON.stringify({
+  store.socket.conn.send(JSON.stringify({
     channel: 'chat',
     type:'text',
     body:{