把更新消息集成为一个方法,优化其功能

This commit is contained in:
2026-09-22 17:13:13 +08:00
parent fc563ab4bc
commit f8625ab36e
+65 -32
View File
@@ -88,8 +88,8 @@
</div>
</div>
<div v-if="contact.unread > 0" class="unread">
{{ contact.unread }}
<div v-if="contact.unreadCount > 0" class="unread">
{{ contact.unreadCount }}
</div>
</div>
</div>
@@ -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,