优化退回登录页面功能

src/pages/index/ChatPage.vue

@@ -226,13 +226,12 @@ import {
   getContactInfo,
   getRecentMessages,
   getContactMessages,
-  sendMessage,
+  // sendMessage,
 } from "@/utils/api";
 import {
   connectWebSocket,
-  // sendWebSocketMessage,
-  closeWebSocket,
-  // getWebSocket
+  sendWebSocketMessage,
+  closeWebSocket
 } from "@/utils/websocket";
 
 export default {
@@ -417,39 +416,46 @@ 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,
         createdAt: new Date(),
       };
 
-      sendMessage(newMessage)
-        .then((response) => {
-          console.log("发送消息成功", response.data);
-          this.contactMessages.push({
-            ...newMessage,
-            from: "me",
-          });
-
-          // 更新最近消息列表
-          this.updateRecentChat(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",
+          createdAt: newMessage.createdAt,
+          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("发送消息失败");
+      }
     },
 
     // 更新最近消息列表
-    updateRecentChat(contactName, newMessage) {
+    updateRecentChat(messageType, contactName, newMessage) {
       const index = this.recentChats.findIndex(
         (item) => item.contactName === contactName
       );
@@ -460,9 +466,13 @@ export default {
 
         chat.content = newMessage.content;
         chat.createdAt = newMessage.createdAt;
-        // 未读数量 +1
-        chat.unreadCount =
-          (chat.unreadCount || 0) + 1;
+        // 接收非当前正在聊天的联系人新消息时，未读数量 +1
+        if (
+          messageType == "receive" &&
+          this.currentContact.contactName != contactName
+        ) {
+          chat.unreadCount = (chat.unreadCount || 0) + 1;
+        }
 
         this.recentChats.splice(index, 1);
         this.recentChats.unshift(chat);
@@ -473,13 +483,15 @@ export default {
           contactName: contactName,
           content: newMessage.content,
           createdAt: newMessage.createdAt,
-          unreadCount: 1
+          unreadCount: 1,
         });
       }
     },
 
+    // 监听websocket连接成功事件
     websocketOnOpen() {},
 
+    // 监听websocket接收消息事件
     websocketOnMessage(data) {
       // 格式如下：
       // {
@@ -493,30 +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);
+        // 是当前聊天联系人
+        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(message);
+        return;
       }
     },
 
+    // 监听websocket连接报错事件
     websocketOnErr() {
       this.$message.error("网络连接失败，请重试");
       this.logout();
     },
 
+    // 创建websocket
     createWebsocket() {
       const token = this.$store.state.token;
       const jwtToken = token.replace("Bearer ", "");
@@ -881,6 +914,7 @@ export default {
 .message-content {
   max-width: 60%;
   margin: 0 10px;
+  clear: both;
 }
 
 .message-time {
@@ -901,6 +935,7 @@ export default {
   line-height: 1.5;
   word-break: break-word;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  float: right;
 }
 
 .message-me .message-bubble {

src/router.js

@@ -43,10 +43,13 @@ const router = new VueRouter({
 router.beforeEach((to, from, next) => {
     const token = store.state.token;
     if(to.meta.requiresAuth) {
-        if(token) {
-            next()
-        } else {
+        // 加入/login判断，防止vue-router报错
+        if(!token && to.path !== "/login") {
             next('/login')
+            return
+        } else {
+            next()
+            return
         }
     } else {
         next()