From b8125825975c74e529d2aba6a2a0002fd0ad92d4 Mon Sep 17 00:00:00 2001
From: Seven <1530011482@qq.com>
Date: Wed, 23 Sep 2026 10:21:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8websocket=E5=8F=91=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E5=92=8C=E7=9B=91=E5=90=AC=E6=8E=A5=E6=94=B6=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=EF=BC=8C=E6=9C=AA=E5=86=99=E5=85=A5=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/ChatPage.vue | 70 ++++++++++++++++++++----------------
 1 file changed, 40 insertions(+), 30 deletions(-)

diff --git a/src/pages/index/ChatPage.vue b/src/pages/index/ChatPage.vue
index 0c04cf4..03a2fde 100644
--- a/src/pages/index/ChatPage.vue
+++ b/src/pages/index/ChatPage.vue
@@ -226,11 +226,11 @@ import {
   getContactInfo,
   getRecentMessages,
   getContactMessages,
-  sendMessage,
+  // sendMessage,
 } from "@/utils/api";
 import {
   connectWebSocket,
-  // sendWebSocketMessage,
+  sendWebSocketMessage,
   closeWebSocket,
   // getWebSocket
 } from "@/utils/websocket";
@@ -417,39 +417,39 @@ export default {
 
       // 新消息
       const newMessage = {
+        type: "sendMessage",
         senderName: this.currentUser.username,
         receiverName: this.currentContact.contactName,
         content: content,
         createdAt: new Date(),
       };
 
-      sendMessage(newMessage)
-        .then((response) => {
-          console.log("发送消息成功", response.data);
-          this.contactMessages.push({
-            ...newMessage,
-            from: "me",
-          });
-
-          // 更新最近消息列表
-          this.updateRecentChat(
-            "send",
-            this.currentContact.contactName,
-            newMessage
-          );
-
-          // 清空输入框
-          this.messageText = "";
-          this.$nextTick(() => {
-            this.scrollToBottom();
-          });
-        })
-        .catch((error) => {
-          // 清空输入框
-          this.messageText = "";
-          console.error(error);
-          this.$message.error("发送消息失败");
+      try {
+        sendWebSocketMessage(newMessage);
+        this.contactMessages.push({
+          ...newMessage,
+          from: "me",
+          time: newMessage.createdAt,
         });
+
+        // 更新最近消息列表
+        this.updateRecentChat(
+          "send",
+          this.currentContact.contactName,
+          newMessage
+        );
+        console.log("contactMessages:" + this.contactMessages);
+        // 清空输入框
+        this.messageText = "";
+        this.$nextTick(() => {
+          this.scrollToBottom();
+        });
+      } catch (error) {
+        // 清空输入框
+        this.messageText = "";
+        console.error(error);
+        this.$message.error("发送消息失败");
+      }
     },
 
     // 更新最近消息列表
@@ -465,7 +465,10 @@ export default {
         chat.content = newMessage.content;
         chat.createdAt = newMessage.createdAt;
         // 接收非当前正在聊天的联系人新消息时，未读数量 +1
-        if (messageType == "receive" && this.currentContact.contactName != contactName) {
+        if (
+          messageType == "receive" &&
+          this.currentContact.contactName != contactName
+        ) {
           chat.unreadCount = (chat.unreadCount || 0) + 1;
         }
 
@@ -510,11 +513,18 @@ export default {
 
       // 是当前聊天联系人
       if (senderName === currentContactName) {
-        this.contactMessages.push(message);
+        this.contactMessages.push({
+          ...message,
+          from: "other",
+          time: message.createdAt,
+        });
       } else {
         // 不是当前联系人，不加入 contactMessages，只更新最近聊天列表、未读数量
         this.updateRecentChat("receive", senderName, message);
       }
+      this.$nextTick(() => {
+        this.scrollToBottom();
+      });
     },
 
     websocketOnErr() {