修复WebSocket消息接收问题:更新前端订阅路径以匹配后端推送路径
This commit is contained in:
@@ -93,6 +93,12 @@ export class WebSocketService {
|
||||
connectHeaders['Authorization'] = `Bearer ${token}`
|
||||
}
|
||||
|
||||
console.log('WebSocket连接配置:', {
|
||||
userId: this.userId,
|
||||
hasToken: !!token,
|
||||
headers: connectHeaders
|
||||
})
|
||||
|
||||
this.client.connect(
|
||||
connectHeaders,
|
||||
(frame) => {
|
||||
@@ -204,7 +210,11 @@ export class WebSocketService {
|
||||
|
||||
try {
|
||||
this.client.send('/app/chat.send', {}, JSON.stringify(chatRequest))
|
||||
console.log('发送聊天消息:', chatRequest)
|
||||
console.log('发送聊天消息:', {
|
||||
...chatRequest,
|
||||
currentUserId: this.userId,
|
||||
expectedSubscriptionPath: '/user/queue/messages'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('发送消息失败:', error)
|
||||
this.callbacks.onError?.({
|
||||
@@ -249,16 +259,39 @@ export class WebSocketService {
|
||||
private subscribeToMessages(): void {
|
||||
if (!this.client?.connected) return
|
||||
|
||||
// 订阅用户私有消息
|
||||
this.client.subscribe('/user/queue/messages', (message) => {
|
||||
try {
|
||||
const wsMessage: WebSocketMessage = JSON.parse(message.body)
|
||||
console.log('收到WebSocket消息:', wsMessage)
|
||||
this.callbacks.onMessage?.(wsMessage)
|
||||
} catch (error) {
|
||||
console.error('解析WebSocket消息失败:', error)
|
||||
// 订阅用户私有消息 - 包含用户ID的完整路径
|
||||
if (this.userId) {
|
||||
const userQueuePath = `/user/${this.userId}/queue/messages`
|
||||
console.log('订阅用户私有队列:', userQueuePath)
|
||||
this.client.subscribe(userQueuePath, (message) => {
|
||||
try {
|
||||
const wsMessage: WebSocketMessage = JSON.parse(message.body)
|
||||
console.log('收到用户私有WebSocket消息:', wsMessage)
|
||||
this.callbacks.onMessage?.(wsMessage)
|
||||
} catch (error) {
|
||||
console.error('解析用户私有WebSocket消息失败:', error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 同时订阅基于sessionId的队列(从日志看后端也在使用这个)
|
||||
if (this.client.ws && this.client.ws.url) {
|
||||
// 从WebSocket URL中提取sessionId
|
||||
const urlParts = this.client.ws.url.split('/')
|
||||
const sessionId = urlParts[urlParts.length - 2] // 倒数第二个部分是sessionId
|
||||
if (sessionId) {
|
||||
console.log('订阅基于sessionId的队列:', `/queue/messages-user${sessionId}`)
|
||||
this.client.subscribe(`/queue/messages-user${sessionId}`, (message) => {
|
||||
try {
|
||||
const wsMessage: WebSocketMessage = JSON.parse(message.body)
|
||||
console.log('收到基于sessionId的WebSocket消息:', wsMessage)
|
||||
this.callbacks.onMessage?.(wsMessage)
|
||||
} catch (error) {
|
||||
console.error('解析基于sessionId的WebSocket消息失败:', error)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 订阅广播消息
|
||||
this.client.subscribe('/topic/broadcast', (message) => {
|
||||
@@ -270,6 +303,19 @@ export class WebSocketService {
|
||||
console.error('解析广播消息失败:', error)
|
||||
}
|
||||
})
|
||||
|
||||
// 如果有会话ID,也订阅会话特定的消息
|
||||
if (this.conversationId) {
|
||||
this.client.subscribe(`/topic/conversation/${this.conversationId}`, (message) => {
|
||||
try {
|
||||
const wsMessage: WebSocketMessage = JSON.parse(message.body)
|
||||
console.log('收到会话WebSocket消息:', wsMessage)
|
||||
this.callbacks.onMessage?.(wsMessage)
|
||||
} catch (error) {
|
||||
console.error('解析会话WebSocket消息失败:', error)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -190,12 +190,16 @@ export const useChatStore = defineStore('chat', () => {
|
||||
|
||||
segments.forEach((segment, index) => {
|
||||
setTimeout(() => {
|
||||
addMessage({
|
||||
const aiMessage = addMessage({
|
||||
content: segment.trim(),
|
||||
type: 'ai',
|
||||
sessionId: currentSession.value?.id
|
||||
})
|
||||
|
||||
// 强制触发响应式更新
|
||||
console.log('AI消息已添加,当前消息总数:', messages.value.length)
|
||||
console.log('最新AI消息:', aiMessage)
|
||||
|
||||
// 最后一条消息后停止输入状态
|
||||
if (index === segments.length - 1) {
|
||||
isTyping.value = false
|
||||
@@ -206,7 +210,7 @@ export const useChatStore = defineStore('chat', () => {
|
||||
|
||||
// WebSocket消息处理
|
||||
const handleWebSocketMessage = (wsMessage: WebSocketMessage) => {
|
||||
console.log('处理WebSocket消息:', wsMessage)
|
||||
console.log('收到WebSocket消息:', wsMessage.type, wsMessage.senderType)
|
||||
|
||||
switch (wsMessage.type) {
|
||||
case 'TEXT':
|
||||
|
||||
@@ -62,6 +62,8 @@
|
||||
<!-- 聊天消息区域 -->
|
||||
<main class="chat-main" ref="chatMainRef">
|
||||
<div class="messages-container">
|
||||
|
||||
|
||||
<div
|
||||
v-for="message in chatStore.messages"
|
||||
:key="message.id"
|
||||
@@ -424,13 +426,14 @@
|
||||
|
||||
.message-wrapper {
|
||||
display: flex;
|
||||
|
||||
margin-bottom: $spacing-md;
|
||||
|
||||
&.user-message {
|
||||
justify-content: flex-end;
|
||||
|
||||
|
||||
.message-bubble {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
|
||||
.message-content {
|
||||
background: $tech-blue;
|
||||
color: white;
|
||||
|
||||
Reference in New Issue
Block a user