把更新消息集成为一个方法,优化其功能
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user