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

src/pages/index/ChatPage.vue

@@ -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>
@@ -187,7 +187,10 @@
         </div>
 
         <!-- 输入消息区域 -->
-        <div v-if="activeMenu === 'messages'" class="input-panel">
+        <div
+          v-if="activeMenu === 'messages' || activeMenu === 'contacts'"
+          class="input-panel"
+        >
           <div class="toolbar">
             <button type="button">😊</button>
             <button type="button">📎</button>
@@ -225,6 +228,13 @@ import {
   getContactMessages,
   sendMessage,
 } from "@/utils/api";
+import {
+  connectWebSocket,
+  // sendWebSocketMessage,
+  closeWebSocket,
+  // getWebSocket
+} from "@/utils/websocket";
+
 export default {
   name: "ChatPage",
 
@@ -273,6 +283,7 @@ export default {
   created() {
     this.getCurrentUser();
     this.getRecentMessageList();
+    this.createWebsocket();
   },
 
   methods: {
@@ -287,7 +298,8 @@ export default {
 
     // 退出登录
     logout() {
-      // 清除 token 和用户信息
+      // 关闭websocket连接，清除 token 和用户信息
+      closeWebSocket();
       this.$store.commit("SET_TOKEN", "");
       this.$store.commit("SET_USERNAME", "");
       this.$router.push("/login");
@@ -329,7 +341,7 @@ export default {
       await this.getContactMessageList(contact.contactName, 10, 0);
 
       // 查看联系人后清除未读数量
-      contact.unread = 0;
+      contact.unreadCount = 0;
 
       // 使用同步等消息获取完成后再让滚动条滚到底部，否则滚动条的位置不对
       this.$nextTick(() => {
@@ -382,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) => {
@@ -403,43 +415,24 @@ export default {
         this.$set(this.contactMessages, this.currentContact.contactName, []);
       }
 
+      // 新消息
       const newMessage = {
         senderName: this.currentUser.username,
         receiverName: this.currentContact.contactName,
         content: content,
+        createdAt: new Date(),
       };
 
       sendMessage(newMessage)
         .then((response) => {
           console.log("发送消息成功", response.data);
-          this.contactMessages[this.currentContact.contactName].push({
+          this.contactMessages.push({
             ...newMessage,
             from: "me",
           });
 
           // 更新最近消息列表
-          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);
-          } else {
-            // 没有找到这条数据，直接添加到数组最前面
-            this.recentChats.unshift({
-              contactName: contactName,
-              content: content,
-              createdAt: newMessage.createdAt,
-            });
-          }
+          this.updateRecentChat(this.currentContact.contactName, newMessage);
 
           // 清空输入框
           this.messageText = "";
@@ -455,6 +448,87 @@ 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(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() {
+      this.$message.error("网络连接失败，请重试");
+      this.logout();
+    },
+
+    createWebsocket() {
+      const token = this.$store.state.token;
+      const jwtToken = token.replace("Bearer ", "");
+      connectWebSocket(
+        encodeURIComponent(jwtToken),
+        this.websocketOnMessage,
+        this.websocketOnOpen,
+        null,
+        this.websocketOnErr
+      );
+    },
+
     // 滚动到底部
     scrollToBottom() {
       const messageList = this.$refs.messageList;

src/utils/websocket.js

@@ -0,0 +1,83 @@
+let ws = null;
+
+// WebSocket连接地址
+const WS_URL = "ws://localhost:3000";
+
+// 建立WebSocket连接
+export function connectWebSocket(token, onMessage, onOpen, onClose, onError) {
+    // 如果已经连接，就不重复连接
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        console.log("WebSocket已经连接");
+        return;
+    }
+
+    // 携带JWT token
+    ws = new WebSocket(`${WS_URL}?token=${token}`);
+
+    // 连接成功
+    ws.onopen = () => {
+        console.log("WebSocket连接成功");
+
+        if (onOpen) {
+            onOpen();
+        }
+    };
+
+    // 接收到服务器消息
+    ws.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+
+            console.log("收到WebSocket消息：", data);
+
+            if (onMessage) {
+                onMessage(data);
+            }
+        } catch (error) {
+            console.error("WebSocket消息解析失败：", error);
+        }
+    };
+
+    // 连接关闭
+    ws.onclose = () => {
+        console.log("WebSocket连接关闭");
+
+        if (onClose) {
+            onClose();
+        }
+
+        ws = null;
+    };
+
+    // 连接错误
+    ws.onerror = (error) => {
+        console.error("WebSocket连接错误：", error);
+
+        if (onError) {
+            onError(error);
+        }
+    };
+}
+
+// 发送消息
+export function sendWebSocketMessage(data) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        console.error("WebSocket没有连接");
+        return;
+    }
+
+    ws.send(JSON.stringify(data));
+}
+
+// 关闭WebSocket
+export function closeWebSocket() {
+    if (ws) {
+        ws.close();
+        ws = null;
+    }
+}
+
+// 获取当前WebSocket
+export function getWebSocket() {
+    return ws;
+}