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

src/pages/index/ChatPage.vue

@@ -88,8 +88,8 @@
             </div>
           </div>
 
-          <div v-if="contact.unread > 0" class="unread">
+          <div v-if="contact.unreadCount > 0" class="unread">
-            {{ contact.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;
+          this.updateRecentChat(this.currentContact.contactName, newMessage);
-          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.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) {
+    websocketOnMessage(data) {
-      console.log("message=" + message);
+      // 格式如下：
+      // {
+      //   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,