增加ack确认消息机制

src/pages/index/ChatPage.vue

@@ -231,8 +231,7 @@ import {
 import {
   connectWebSocket,
   sendWebSocketMessage,
-  closeWebSocket,
-  // getWebSocket
+  closeWebSocket
 } 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,37 +505,51 @@ export default {
       //   }
       // }
 
-      if (data.type !== "newMessage") {
-        return;
-      }
+      // 当接收到新消息的时候，对消息显示进行处理，同时需要给websocket回一个ack确认收到的消息
+      if (data.type == "newMessage") {
+        const message = data.message;
+        const senderName = message.senderName;
 
-      const message = data.message;
-      const senderName = message.senderName;
+        const currentContactName =
+          this.currentContact && this.currentContact.contactName;
 
-      const currentContactName =
-        this.currentContact && this.currentContact.contactName;
-
-      // 是当前聊天联系人
-      if (senderName === currentContactName) {
-        this.contactMessages.push({
-          ...message,
-          from: "other",
-          time: message.createdAt,
+        // 是当前聊天联系人
+        if (senderName === currentContactName) {
+          this.contactMessages.push({
+            ...message,
+            from: "other",
+            time: message.createdAt,
+          });
+        } else {
+          // 不是当前联系人，不加入 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 {
-        // 不是当前联系人，不加入 contactMessages，只更新最近聊天列表、未读数量
-        this.updateRecentChat("receive", senderName, message);
+        return;
       }
-      this.$nextTick(() => {
-        this.scrollToBottom();
-      });
     },
 
+    // 监听websocket连接报错事件
     websocketOnErr() {
       this.$message.error("网络连接失败，请重试");
       this.logout();
     },
 
+    // 创建websocket
     createWebsocket() {
       const token = this.$store.state.token;
       const jwtToken = token.replace("Bearer ", "");