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

2026-03-16 00:50:47 +08:00 · 2025-09-02 23:10:29 +08:00
parent c337195b16
commit 78a65c6afe
35 changed files with 1504 additions and 329 deletions
--- a/frontend_nuxt/.env.example
+++ b/frontend_nuxt/.env.example
@@ -1,5 +1,6 @@
 ; 本地部署后端
 ; NUXT_PUBLIC_API_BASE_URL=https://127.0.0.1:8081
+; NUXT_PUBLIC_WEBSOCKET_URL=https://127.0.0.1:8082
 ; 预发环境后端
 ; NUXT_PUBLIC_API_BASE_URL=https://staging.open-isle.com
 ; 生产环境后端
--- a/frontend_nuxt/.env.staging.example
+++ b/frontend_nuxt/.env.staging.example
@@ -1,5 +1,6 @@
 ; 本地部署后端
 ; NUXT_PUBLIC_API_BASE_URL=https://127.0.0.1:8081
+; NUXT_PUBLIC_WEBSOCKET_URL=https://127.0.0.1:8082
 ; 预发环境后端
 NUXT_PUBLIC_API_BASE_URL=https://staging.open-isle.com
 ; 生产环境后端
--- a/frontend_nuxt/composables/useChannelsUnreadCount.js
+++ b/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,
-  }
+  };
 }
--- a/frontend_nuxt/composables/useUnreadCount.js
+++ b/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, 
  };
 }
--- a/frontend_nuxt/composables/useWebSocket.js
+++ b/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),
  }
 }
--- a/frontend_nuxt/nuxt.config.ts
+++ b/frontend_nuxt/nuxt.config.ts
@@ -6,6 +6,7 @@ export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || '',
+      websocketUrl: process.env.NUXT_PUBLIC_WEBSOCKET_URL || '',
      websiteBaseUrl: process.env.NUXT_PUBLIC_WEBSITE_BASE_URL || '',
      googleClientId: process.env.NUXT_PUBLIC_GOOGLE_CLIENT_ID || '',
      githubClientId: process.env.NUXT_PUBLIC_GITHUB_CLIENT_ID || '',
--- a/frontend_nuxt/pages/message-box/[id].vue
+++ b/frontend_nuxt/pages/message-box/[id].vue
@@ -100,10 +100,9 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 const config = useRuntimeConfig()
 const route = useRoute()
 const API_BASE_URL = config.public.apiBaseUrl
-const { connect, disconnect, subscribe, isConnected } = useWebSocket()
+const { connect, subscribe, unsubscribe, isConnected } = useWebSocket()
 const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 const { fetchChannelUnread: refreshChannelUnread } = useChannelsUnreadCount()
-let subscription = null

 const messages = ref([])
 const participants = ref([])
@@ -338,8 +337,12 @@ onMounted(async () => {
    // 初次进入频道时，平滑滚动到底部
    scrollToBottomSmooth()
    const token = getToken()
-    if (token && !isConnected.value) {
-      connect(token)
+    if (token) {
+      if (isConnected.value) {
+        subscribeToConversation()
+      } else {
+        connect(token)
+      }
    }
  } else {
    toast.error('请先登录')
@@ -347,26 +350,39 @@ onMounted(async () => {
  }
 })

+const subscribeToConversation = () => {
+  if (!currentUser.value) return;
+  const destination = `/topic/conversation/${conversationId}`
+  
+  subscribe(destination, async (message) => {
+    try {
+      const parsedMessage = JSON.parse(message.body)
+
+      if (parsedMessage.sender && parsedMessage.sender.id === currentUser.value.id) {
+        return
+      }
+
+      messages.value.push({
+        ...parsedMessage,
+        src: parsedMessage.sender.avatar,
+        iconClick: () => openUser(parsedMessage.sender.id),
+      })
+
+      await markConversationAsRead()
+      await nextTick()
+      
+      if (isUserNearBottom.value) {
+        scrollToBottomSmooth()
+      }
+    } catch (e) {
+      console.error("Failed to parse websocket message", e)
+    }
+  })
+}
+
 watch(isConnected, (newValue) => {
  if (newValue) {
-    setTimeout(() => {
-      subscription = subscribe(`/topic/conversation/${conversationId}`, async (message) => {
-        // 避免重复显示当前用户发送的消息
-        if (message.sender.id !== currentUser.value.id) {
-          messages.value.push({
-            ...message,
-            src: message.sender.avatar,
-            iconClick: () => {
-              openUser(message.sender.id)
-            },
-          })
-          // 收到消息后只标记已读，不强制滚动（符合“非发送不拉底”）
-          markConversationAsRead()
-          await nextTick()
-          updateNearBottom()
-        }
-      })
-    }, 500)
+    subscribeToConversation()
  }
 })

@@ -378,7 +394,12 @@ onActivated(async () => {
    await nextTick()
    scrollToBottomSmooth()
    updateNearBottom()
-    if (!isConnected.value) {
+    
+    if (isConnected.value) {
+      // 如果已连接，重新订阅
+      subscribeToConversation()
+    } else {
+      // 如果未连接，则发起连接
      const token = getToken()
      if (token) connect(token)
    }
@@ -386,22 +407,17 @@ onActivated(async () => {
 })

 onDeactivated(() => {
-  if (subscription) {
-    subscription.unsubscribe()
-    subscription = null
-  }
-  disconnect()
+  const destination = `/topic/conversation/${conversationId}`
+  unsubscribe(destination)
 })

 onUnmounted(() => {
-  if (subscription) {
-    subscription.unsubscribe()
-    subscription = null
-  }
+  const destination = `/topic/conversation/${conversationId}`
+  unsubscribe(destination)
+
  if (messagesListEl.value) {
    messagesListEl.value.removeEventListener('scroll', updateNearBottom)
  }
-  disconnect()
 })

 function minimize() {
--- a/frontend_nuxt/pages/message-box/index.vue
+++ b/frontend_nuxt/pages/message-box/index.vue
@@ -118,7 +118,7 @@
 </template>

 <script setup>
-import { ref, onUnmounted, watch, onActivated, computed } from 'vue'
+import { ref, onUnmounted, watch, onActivated, computed, onDeactivated } from 'vue'
 import { useRoute } from 'vue-router'
 import { getToken, fetchCurrentUser } from '~/utils/auth'
 import { toast } from '~/main'
@@ -139,11 +139,10 @@ const error = ref(null)
 const route = useRoute()
 const currentUser = ref(null)
 const API_BASE_URL = config.public.apiBaseUrl
-const { connect, disconnect, subscribe, isConnected } = useWebSocket()
+const { connect, subscribe, unsubscribe, isConnected } = useWebSocket()
 const { fetchUnreadCount: refreshGlobalUnreadCount } = useUnreadCount()
 const { fetchChannelUnread: refreshChannelUnread, setFromList: setChannelUnreadFromList } =
  useChannelsUnreadCount()
-let subscription = null

 const activeTab = ref('channels')
 const tabs = [
@@ -259,37 +258,45 @@ onActivated(async () => {
    refreshGlobalUnreadCount()
    refreshChannelUnread()
    const token = getToken()
-    if (token && !isConnected.value) {
-      connect(token)
+    if (token) {
+      if (isConnected.value) {
+        // 如果已经连接，但可能因为组件销毁而取消了订阅，所以需要重新订阅
+        subscribeToUserMessages()
+      } else {
+        // 如果未连接，则发起连接，连接成功后 watch 回调会处理订阅
+        connect(token)
+      }
    }
  } else {
    loading.value = false
  }
 })

-watch(isConnected, (newValue) => {
-  if (newValue && currentUser.value) {
-    const destination = `/topic/user/${currentUser.value.id}/messages`
-
-    // 清理旧的订阅
-    if (subscription) {
-      subscription.unsubscribe()
-    }
-
-    subscription = subscribe(destination, (message) => {
+const subscribeToUserMessages = () => {
+  if (!currentUser.value) return;
+  const destination = `/topic/user/${currentUser.value.id}/messages`
+  
+  subscribe(destination, (message) => {
+    if (activeTab.value === 'messages') {
      fetchConversations()
-      if (activeTab.value === 'channels') {
-        fetchChannels()
-      }
-    })
+    }
+    fetchChannels()
+    refreshGlobalUnreadCount()
+    refreshChannelUnread()
+  })
+}
+
+watch(isConnected, (newValue) => {
+  if (newValue) {
+    subscribeToUserMessages()
  }
 })

-onUnmounted(() => {
-  if (subscription) {
-    subscription.unsubscribe()
+onDeactivated(() => {
+  if (currentUser.value) {
+    const destination = `/topic/user/${currentUser.value.id}/messages`
+    unsubscribe(destination)
  }
-  disconnect()
 })

 function goToConversation(id) {