使用websocket发消息和监听接收消息，未写入数据库

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)
+      try {
-        .then((response) => {
+        sendWebSocketMessage(newMessage);
-          console.log("发送消息成功", response.data);
+        this.contactMessages.push({
-          this.contactMessages.push({
+          ...newMessage,
-            ...newMessage,
+          from: "me",
-            from: "me",
+          time: newMessage.createdAt,
-          });
-
-          // 更新最近消息列表
-          this.updateRecentChat(
-            "send",
-            this.currentContact.contactName,
-            newMessage
-          );
-
-          // 清空输入框
-          this.messageText = "";
-          this.$nextTick(() => {
-            this.scrollToBottom();
-          });
-        })
-        .catch((error) => {
-          // 清空输入框
-          this.messageText = "";
-          console.error(error);
-          this.$message.error("发送消息失败");
         });
+
+        // 更新最近消息列表
+        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() {