diff --git a/src/pages/index/ChatPage.vue b/src/pages/index/ChatPage.vue index 81c6548..2a3d43f 100644 --- a/src/pages/index/ChatPage.vue +++ b/src/pages/index/ChatPage.vue @@ -88,8 +88,8 @@ -
- {{ contact.unread }} +
+ {{ contact.unreadCount }}
@@ -341,7 +341,7 @@ export default { await this.getContactMessageList(contact.contactName, 10, 0); // 查看联系人后清除未读数量 - contact.unread = 0; + contact.unreadCount = 0; // 使用同步等消息获取完成后再让滚动条滚到底部,否则滚动条的位置不对 this.$nextTick(() => { @@ -394,7 +394,7 @@ export default { .then((response) => { this.contactList = response.data.contacts.map((contact) => ({ ...contact, - unread: contact.unread || 0, + unreadCount: contact.unreadCount || 0, })); }) .catch((error) => { @@ -432,29 +432,7 @@ export default { }); // 更新最近消息列表 - const contactName = this.currentContact.contactName; - const index = this.recentChats.findIndex( - (item) => item.contactName === contactName - ); - - if (index !== -1) { - //找到这条数据,修改内容并移除后添加到数组最前面 - const chat = this.recentChats[index]; - - chat.content = content; - chat.createdAt = newMessage.createdAt; - - this.recentChats.splice(index, 1); - this.recentChats.unshift(chat); - console.log(this.recentChats); - } else { - // 没有找到这条数据,直接添加到数组最前面 - this.recentChats.unshift({ - contactName: contactName, - content: content, - createdAt: newMessage.createdAt, - }); - } + this.updateRecentChat(this.currentContact.contactName, newMessage); // 清空输入框 this.messageText = ""; @@ -470,10 +448,68 @@ export default { }); }, + // 更新最近消息列表 + updateRecentChat(contactName, newMessage) { + const index = this.recentChats.findIndex( + (item) => item.contactName === contactName + ); + + if (index !== -1) { + //找到这条数据,修改内容并移除后添加到数组最前面 + const chat = this.recentChats[index]; + + chat.content = newMessage.content; + chat.createdAt = newMessage.createdAt; + // 未读数量 +1 + chat.unreadCount = + (chat.unreadCount || 0) + 1; + + this.recentChats.splice(index, 1); + this.recentChats.unshift(chat); + console.log(this.recentChats); + } else { + // 没有找到这条数据,直接添加到数组最前面 + this.recentChats.unshift({ + contactName: contactName, + content: newMessage.content, + createdAt: newMessage.createdAt, + unreadCount: 1 + }); + } + }, + websocketOnOpen() {}, - websocketOnMessage(message) { - console.log("message=" + message); + websocketOnMessage(data) { + // 格式如下: + // { + // type: "newMessage", + // message: { + // "messageId": 146, + // "senderName": "admin", + // "receiverName": "query", + // "content": "好的额没关系", + // "createdAt": "2026-09-22T06:38:13.000Z" + // } + // } + + if (data.type !== "newMessage") { + return; + } + + const message = data.message; + const senderName = message.senderName; + + const currentContactName = + this.currentContact && this.currentContact.contactName; + + // 是当前聊天联系人 + if (senderName === currentContactName) { + this.contactMessages.push(message); + } else { + // 不是当前联系人,不加入 contactMessages,只更新最近聊天列表、未读数量 + this.updateRecentChat(message); + } }, websocketOnErr() { @@ -484,9 +520,6 @@ export default { createWebsocket() { const token = this.$store.state.token; const jwtToken = token.replace("Bearer ", ""); - // ws = new WebSocket( - // `${WS_URL}?token=${encodeURIComponent(jwtToken)}` - // ); connectWebSocket( encodeURIComponent(jwtToken), this.websocketOnMessage,