web聊天室数据同步修改

urbanLifelineWeb/packages/workcase_wechat/pages/chatRoom/chatRoom/chatRoom.uvue

@@ -108,10 +108,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, nextTick, onMounted } from 'vue'
+import { ref, reactive, computed, nextTick, onMounted, onUnmounted, watch } from 'vue'
 import WorkcaseCreator from '@/components/WorkcaseCreator/WorkcaseCreator.uvue'
 import type { ChatRoomMessageVO, CustomerVO, ChatMemberVO, TbChatRoomMessageDTO } from '@/types/workcase'
 import { workcaseChatAPI } from '@/api/workcase'
+import { wsClient } from '@/utils/websocket'
 
 // 响应式数据
 const headerPaddingTop = ref<number>(44)
@@ -232,6 +233,24 @@ onMounted(() => {
 	loadChatRoom()
 	loadDefaultWorkers()
 	loadChatMembers()
+	initWebSocket()
+})
+
+// 组件卸载时断开WebSocket
+onUnmounted(() => {
+	disconnectWebSocket()
+})
+
+// 监听roomId变化，切换聊天室时重新订阅
+watch(roomId, (newRoomId, oldRoomId) => {
+	if (oldRoomId && newRoomId !== oldRoomId) {
+		// 取消旧聊天室订阅
+		wsClient.unsubscribe(`/topic/chat/${oldRoomId}`)
+	}
+	if (newRoomId && wsClient.isConnected()) {
+		// 订阅新聊天室
+		wsClient.subscribe(`/topic/chat/${newRoomId}`, handleNewMessage)
+	}
 })
 
 // 加载聊天室
@@ -443,6 +462,73 @@ function startMeeting() {
 function goBack() {
 	uni.navigateBack()
 }
+
+// ==================== WebSocket连接管理 ====================
+
+// 初始化WebSocket连接
+async function initWebSocket() {
+	try {
+		const token = uni.getStorageSync('token') || ''
+		if (!token) {
+			console.warn('[chatRoom] 未找到token，跳过WebSocket连接')
+			return
+		}
+		
+		// 构建WebSocket URL
+		const protocol = 'wss:' // 生产环境使用wss
+		const host = 'your-domain.com' // 需要替换为实际域名
+		const wsUrl = `${protocol}//${host}/api/urban-lifeline/workcase/ws/chat-sockjs?token=${encodeURIComponent(token)}`
+		
+		console.log('[chatRoom] 开始连接WebSocket')
+		await wsClient.connect(wsUrl, token)
+		
+		// 订阅当前聊天室消息频道
+		if (roomId.value) {
+			wsClient.subscribe(`/topic/chat/${roomId.value}`, handleNewMessage)
+			console.log('[chatRoom] WebSocket连接成功，已订阅聊天室:', roomId.value)
+		}
+	} catch (error) {
+		console.error('[chatRoom] WebSocket连接失败:', error)
+	}
+}
+
+// 断开WebSocket连接
+function disconnectWebSocket() {
+	try {
+		if (roomId.value) {
+			wsClient.unsubscribe(`/topic/chat/${roomId.value}`)
+		}
+		wsClient.disconnect()
+		console.log('[chatRoom] WebSocket已断开')
+	} catch (error) {
+		console.error('[chatRoom] 断开WebSocket失败:', error)
+	}
+}
+
+// 处理接收到的新消息
+function handleNewMessage(message: ChatRoomMessageVO) {
+	console.log('[chatRoom] 收到新消息:', message)
+	
+	// 避免重复添加自己发送的消息（自己发送的消息已经通过sendMessage添加到列表）
+	if (message.senderId === currentUserId.value) {
+		console.log('[chatRoom] 跳过自己发送的消息')
+		return
+	}
+	
+	// 检查消息是否已存在（避免重复）
+	const exists = messages.some(m => m.messageId === message.messageId)
+	if (exists) {
+		console.log('[chatRoom] 消息已存在，跳过')
+		return
+	}
+	
+	// 添加新消息到列表
+	messages.push(message)
+	nextTick(() => scrollToBottom())
+	
+	// 可以添加消息提示音或震动
+	// uni.vibrateShort()
+}
 </script>
 
 <style lang="scss" scoped>