增加ack确认消息机制

src/pages/index/ChatPage.vue

@@ -231,8 +231,7 @@ import {
 import {
   connectWebSocket,
   sendWebSocketMessage,
-  closeWebSocket,
+  closeWebSocket
-  // getWebSocket
 } from "@/utils/websocket";
 
 export default {
@@ -418,6 +417,7 @@ export default {
       // 新消息
       const newMessage = {
         type: "sendMessage",
+        messageId: Date.now() + "-" + Math.random().toString(36).slice(2),
         senderName: this.currentUser.username,
         receiverName: this.currentContact.contactName,
         content: content,
@@ -429,6 +429,7 @@ export default {
         this.contactMessages.push({
           ...newMessage,
           from: "me",
+          createdAt: newMessage.createdAt,
           time: newMessage.createdAt,
         });
 
@@ -439,6 +440,7 @@ export default {
           newMessage
         );
         console.log("contactMessages:" + this.contactMessages);
+
         // 清空输入框
         this.messageText = "";
         this.$nextTick(() => {
@@ -486,8 +488,10 @@ export default {
       }
     },
 
+    // 监听websocket连接成功事件
     websocketOnOpen() {},
 
+    // 监听websocket接收消息事件
     websocketOnMessage(data) {
       // 格式如下：
       // {
@@ -501,10 +505,8 @@ export default {
       //   }
       // }
 
-      if (data.type !== "newMessage") {
+      // 当接收到新消息的时候，对消息显示进行处理，同时需要给websocket回一个ack确认收到的消息
-        return;
+      if (data.type == "newMessage") {
-      }
-
         const message = data.message;
         const senderName = message.senderName;
 
@@ -522,16 +524,32 @@ export default {
           // 不是当前联系人，不加入 contactMessages，只更新最近聊天列表、未读数量
           this.updateRecentChat("receive", senderName, message);
         }
+        
+        // 返回 ACK
+        sendWebSocketMessage({
+          type: "ack",
+          messageId: message.messageId
+        });
         this.$nextTick(() => {
           this.scrollToBottom();
         });
+      } else if (data.type == "sendError") {
+        this.$message.error("发送失败，请重试");
+        this.$nextTick(() => {
+          this.scrollToBottom();
+        });
+      } else {
+        return;
+      }
     },
 
+    // 监听websocket连接报错事件
     websocketOnErr() {
       this.$message.error("网络连接失败，请重试");
       this.logout();
     },
 
+    // 创建websocket
     createWebsocket() {
       const token = this.$store.state.token;
       const jwtToken = token.replace("Bearer ", "");