feat:Websocket服务拆到单独服务，主后台保持单工通信

frontend_nuxt/composables/useChannelsUnreadCount.js

@@ -3,82 +3,73 @@ import { useWebSocket } from './useWebSocket'
 import { getToken } from '~/utils/auth'
 
 const count = ref(0)
-let isInitialized = false
-let wsSubscription = null
+let isInitialized = false;
 
 export function useChannelsUnreadCount() {
-  const config = useRuntimeConfig()
-  const API_BASE_URL = config.public.apiBaseUrl
-  const { subscribe, isConnected, connect } = useWebSocket()
+  const config = useRuntimeConfig();
+  const API_BASE_URL = config.public.apiBaseUrl;
+  const { subscribe, isConnected, connect } = useWebSocket();
 
   const fetchChannelUnread = async () => {
-    const token = getToken()
+    const token = getToken();
     if (!token) {
-      count.value = 0
-      return
+      count.value = 0;
+      return;
     }
     try {
       const response = await fetch(`${API_BASE_URL}/api/channels/unread-count`, {
         headers: { Authorization: `Bearer ${token}` },
-      })
+      });
       if (response.ok) {
-        const data = await response.json()
-        count.value = data
+        const data = await response.json();
+        count.value = data;
       }
     } catch (e) {
-      console.error('Failed to fetch channel unread count:', e)
+      console.error('Failed to fetch channel unread count:', e);
     }
-  }
+  };
+  
+  const setupWebSocketListener = () => {
+    const destination = '/user/queue/channel-unread';
+
+    subscribe(destination, (message) => {
+      const unread = parseInt(message.body, 10);
+      if (!isNaN(unread)) {
+        count.value = unread;
+      }
+    }).then(subscription => {
+      if (subscription) {
+        console.log('频道未读消息订阅成功');
+      }
+    });
+  };
 
   const initialize = () => {
-    const token = getToken()
+    const token = getToken();
     if (!token) {
-      count.value = 0
-      return
+      count.value = 0;
+      return;
     }
-    fetchChannelUnread()
-    if (!isConnected.value) {
-      connect(token)
-    }
-    setupWebSocketListener()
-  }
 
-  const setupWebSocketListener = () => {
-    if (!wsSubscription) {
-      watch(
-        isConnected,
-        (newValue) => {
-          if (newValue && !wsSubscription) {
-            wsSubscription = subscribe('/user/queue/channel-unread', (message) => {
-              const unread = parseInt(message.body, 10)
-              if (!isNaN(unread)) {
-                count.value = unread
-              }
-            })
-          }
-        },
-        { immediate: true },
-      )
+    if (!isConnected.value) {
+      connect(token);
     }
-  }
+
+    fetchChannelUnread();
+    setupWebSocketListener();
+  };
 
   const setFromList = (channels) => {
-    count.value = Array.isArray(channels) ? channels.filter((c) => c.unreadCount > 0).length : 0
-  }
+    count.value = Array.isArray(channels) ? channels.filter((c) => c.unreadCount > 0).length : 0;
+  };
 
-  const hasUnread = computed(() => count.value > 0)
+  const hasUnread = computed(() => count.value > 0);
 
-  const token = getToken()
-  if (token) {
-    if (!isInitialized) {
-      isInitialized = true
-      initialize()
-    } else {
-      fetchChannelUnread()
-      if (!isConnected.value) {
-        connect(token)
-      }
-      setupWebSocketListener()
+  if (!isInitialized) {
+    const token = getToken();
+    if (token) {
+      isInitialized = true;
+      initialize();
     }
   }
 
@@ -88,5 +79,5 @@ export function useChannelsUnreadCount() {
     fetchChannelUnread,
     initialize,
     setFromList,
-  }
+  };
 }

frontend_nuxt/composables/useUnreadCount.js

@@ -4,7 +4,6 @@ import { getToken } from '~/utils/auth';
 
 const count = ref(0);
 let isInitialized = false;
-let wsSubscription = null;
 
 export function useUnreadCount() {
   const config = useRuntimeConfig();
@@ -30,64 +29,48 @@ export function useUnreadCount() {
     }
   };
 
-  const initialize = async () => {
+  const setupWebSocketListener = () => {
+    console.log('设置未读消息订阅...');
+    const destination = '/user/queue/unread-count';
+    
+    subscribe(destination, (message) => {
+      const unreadCount = parseInt(message.body, 10);
+      if (!isNaN(unreadCount)) {
+        count.value = unreadCount;
+      }
+    }).then(subscription => {
+      if (subscription) {
+        console.log('未读消息订阅成功');
+      }
+    });
+  };
+
+  const initialize = () => {
     const token = getToken();
     if (!token) {
       count.value = 0;
       return;
     }
 
-    // 总是获取最新的未读数量
-    fetchUnreadCount();
-    
-    // 确保WebSocket连接
     if (!isConnected.value) {
       connect(token);
     }
     
-    // 设置WebSocket监听
-    await setupWebSocketListener();
+    fetchUnreadCount();
+    setupWebSocketListener();
   };
 
-  const setupWebSocketListener = async () => {
-    // 只有在还没有订阅的情况下才设置监听
-    if (!wsSubscription) {
-      
-      watch(isConnected, (newValue) => {
-        if (newValue && !wsSubscription) {
-          const destination = `/user/queue/unread-count`;
-          wsSubscription = subscribe(destination, (message) => {
-            const unreadCount = parseInt(message.body, 10);
-            if (!isNaN(unreadCount)) {
-              count.value = unreadCount;
-            }
-          });
-        }
-      }, { immediate: true });
-    }
-  };
-
-  // 自动初始化逻辑 - 确保每次调用都能获取到未读数量并设置监听
-  const token = getToken();
-  if (token) {
-    if (!isInitialized) {
+  if (!isInitialized) {
+    const token = getToken();
+    if (token) {
       isInitialized = true;
-      initialize(); // 完整初始化，包括WebSocket监听
-    } else {
-      // 即使已经初始化，也要确保获取最新的未读数量并确保WebSocket监听存在
-      fetchUnreadCount();
-      
-      // 确保WebSocket连接和监听都存在
-      if (!isConnected.value) {
-        connect(token);
-      }
-      setupWebSocketListener();
+      initialize();
     }
   }
 
   return {
     count,
     fetchUnreadCount,
-    initialize,
+    initialize, 
   };
 }

frontend_nuxt/composables/useWebSocket.js

@@ -1,86 +1,182 @@
-import { ref } from 'vue'
+import { ref, readonly, watch } from 'vue'
 import { Client } from '@stomp/stompjs'
 import SockJS from 'sockjs-client/dist/sockjs.min.js'
 import { useRuntimeConfig } from '#app'
 
 const client = ref(null)
 const isConnected = ref(false)
+const activeSubscriptions = ref(new Map())
+// Store callbacks to allow for re-subscription after reconnect
+const resubscribeCallbacks = new Map()
+
+// Helper for unified subscription logging
+const logSubscriptionActivity = (action, destination, subscriptionId = 'N/A') => {
+  console.log(
+    `[SUB_MAN] ${action} | Dest: ${destination} | SubID: ${subscriptionId} | Active: ${activeSubscriptions.value.size}`
+  )
+}
 
 const connect = (token) => {
-  if (isConnected.value) {
+  if (isConnected.value || (client.value && client.value.active)) {
     return
   }
 
-  const config = useRuntimeConfig()
-  const API_BASE_URL = config.public.apiBaseUrl
-  const socketUrl = `${API_BASE_URL}/api/sockjs`
 
-  const socket = new SockJS(socketUrl)
+  const config = useRuntimeConfig()
+  const WEBSOCKET_URL = config.public.websocketUrl
+  const socketUrl = `${WEBSOCKET_URL}/api/sockjs`
+
   const stompClient = new Client({
-    webSocketFactory: () => socket,
+    webSocketFactory: () => new SockJS(socketUrl),
     connectHeaders: {
       Authorization: `Bearer ${token}`,
     },
-    debug: function (str) {},
-    reconnectDelay: 5000,
+    debug: function (str) {
+    
+    },
+    reconnectDelay: 10000,
     heartbeatIncoming: 4000,
     heartbeatOutgoing: 4000,
   })
 
   stompClient.onConnect = (frame) => {
     isConnected.value = true
+    resubscribeCallbacks.forEach((callback, destination) => {
+        doSubscribe(destination, callback)
+    })
   }
 
   stompClient.onStompError = (frame) => {
-    console.error('WebSocket STOMP error:', frame)
+    console.error('Full frame:', frame)
+  }
+
+  stompClient.onWebSocketError = (event) => {
+    
+  }
+
+  stompClient.onWebSocketClose = (event) => {
+    isConnected.value = false;
+    activeSubscriptions.value.clear();
+    logSubscriptionActivity('Cleared all subscriptions due to WebSocket close', 'N/A');
+  };
+  
+  stompClient.onDisconnect = (frame) => {
+    isConnected.value = false
   }
 
   stompClient.activate()
   client.value = stompClient
 }
 
+const unsubscribe = (destination) => {
+  if (!destination) {
+    return false
+  }
+  const subscription = activeSubscriptions.value.get(destination)
+  if (subscription) {
+    try {
+      subscription.unsubscribe()
+      logSubscriptionActivity('Unsubscribed', destination, subscription.id)
+    } catch (e) {
+      console.error(`Error during unsubscribe for ${destination}:`, e)
+    } finally {
+      activeSubscriptions.value.delete(destination)
+      resubscribeCallbacks.delete(destination)
+    }
+    return true
+  } else {
+    return false
+  }
+}
+
+const unsubscribeAll = () => {
+  logSubscriptionActivity('Unsubscribing from ALL', `Total: ${activeSubscriptions.value.size}`)
+  const destinations = [...activeSubscriptions.value.keys()]
+  destinations.forEach(dest => {
+    unsubscribe(dest)
+  })
+}
+
 const disconnect = () => {
+  unsubscribeAll()
   if (client.value) {
-    isConnected.value = false
-    client.value.deactivate()
+    try {
+      client.value.deactivate()
+    } catch (e) {
+      console.error('Error during client deactivation:', e)
+    }
     client.value = null
+    isConnected.value = false
+  }
+}
+
+const doSubscribe = (destination, callback) => {
+  try {
+    if (!client.value || !client.value.connected) {
+      return null
+    }
+
+    if (activeSubscriptions.value.has(destination)) {
+      unsubscribe(destination)
+    }
+
+    const subscription = client.value.subscribe(destination, (message) => {
+      callback(message)
+    })
+
+    if (subscription) {
+      activeSubscriptions.value.set(destination, subscription)
+      resubscribeCallbacks.set(destination, callback) // Store for re-subscription
+      logSubscriptionActivity('Subscribed', destination, subscription.id)
+      return subscription
+    } else {
+      return null
+    }
+  } catch (error) {
+    console.error(`Exception during subscription to ${destination}:`, error)
+    return null
   }
 }
 
 const subscribe = (destination, callback) => {
-  if (!isConnected.value || !client.value || !client.value.connected) {
-    return null
+  if (!destination) {
+    return Promise.resolve(null)
   }
 
-  try {
-    const subscription = client.value.subscribe(destination, (message) => {
-      try {
-        if (
-          destination.includes('/queue/unread-count') ||
-          destination.includes('/queue/channel-unread')
-        ) {
-          callback(message)
-        } else {
-          const parsedMessage = JSON.parse(message.body)
-          callback(parsedMessage)
+  return new Promise((resolve) => {
+    if (client.value && client.value.connected) {
+      const sub = doSubscribe(destination, callback)
+      resolve(sub)
+    } else {
+      const unwatch = watch(isConnected, (newVal) => {
+        if (newVal) {
+          setTimeout(() => {
+            const sub = doSubscribe(destination, callback)
+            unwatch()
+            resolve(sub)
+          }, 100)
         }
-      } catch (error) {
-        callback(message)
-      }
-    })
-
-    return subscription
-  } catch (error) {
-    return null
-  }
+      }, { immediate: false })
+      
+      setTimeout(() => {
+        unwatch()
+        if (!isConnected.value) {
+          resolve(null)
+        }
+      }, 15000)
+    }
+  })
 }
 
 export function useWebSocket() {
   return {
-    client,
+    client: readonly(client),
     isConnected,
     connect,
     disconnect,
     subscribe,
+    unsubscribe,
+    unsubscribeAll,
+    activeSubscriptions: readonly(activeSubscriptions),
   }
 }