添加websocket连接

src/pages/index/ChatPage.vue

@@ -187,7 +187,10 @@
         </div>
 
         <!-- 输入消息区域 -->
-        <div v-if="activeMenu === 'messages'" class="input-panel">
+        <div
+          v-if="activeMenu === 'messages' || activeMenu === 'contacts'"
+          class="input-panel"
+        >
           <div class="toolbar">
             <button type="button">😊</button>
             <button type="button">📎</button>
@@ -225,6 +228,13 @@ import {
   getContactMessages,
   sendMessage,
 } from "@/utils/api";
+import {
+  connectWebSocket,
+  // sendWebSocketMessage,
+  closeWebSocket,
+  // getWebSocket
+} from "@/utils/websocket";
+
 export default {
   name: "ChatPage",
 
@@ -273,6 +283,7 @@ export default {
   created() {
     this.getCurrentUser();
     this.getRecentMessageList();
+    this.createWebsocket();
   },
 
   methods: {
@@ -287,7 +298,8 @@ export default {
 
     // 退出登录
     logout() {
-      // 清除 token 和用户信息
+      // 关闭websocket连接，清除 token 和用户信息
+      closeWebSocket();
       this.$store.commit("SET_TOKEN", "");
       this.$store.commit("SET_USERNAME", "");
       this.$router.push("/login");
@@ -408,7 +420,7 @@ export default {
         senderName: this.currentUser.username,
         receiverName: this.currentContact.contactName,
         content: content,
-        createdAt: new Date()
+        createdAt: new Date(),
       };
 
       sendMessage(newMessage)
@@ -434,7 +446,7 @@ export default {
 
             this.recentChats.splice(index, 1);
             this.recentChats.unshift(chat);
-            console.log(this.recentChats)
+            console.log(this.recentChats);
           } else {
             // 没有找到这条数据，直接添加到数组最前面
             this.recentChats.unshift({
@@ -458,6 +470,32 @@ export default {
         });
     },
 
+    websocketOnOpen() {},
+
+    websocketOnMessage(message) {
+      console.log("message=" + message);
+    },
+
+    websocketOnErr() {
+      this.$message.error("网络连接失败，请重试");
+      this.logout();
+    },
+
+    createWebsocket() {
+      const token = this.$store.state.token;
+      const jwtToken = token.replace("Bearer ", "");
+      // ws = new WebSocket(
+      //   `${WS_URL}?token=${encodeURIComponent(jwtToken)}`
+      // );
+      connectWebSocket(
+        encodeURIComponent(jwtToken),
+        this.websocketOnMessage,
+        this.websocketOnOpen,
+        null,
+        this.websocketOnErr
+      );
+    },
+
     // 滚动到底部
     scrollToBottom() {
       const messageList = this.$refs.messageList;
@@ -496,7 +534,7 @@ export default {
             const addedHeight = newScrollHeight - oldScrollHeight;
             el.scrollTop = addedHeight;
 
-            if(el.scrollTop === 0) this.loadEnd = true; //所有数据已经加载完成，不需要再继续请求了
+            if (el.scrollTop === 0) this.loadEnd = true; //所有数据已经加载完成，不需要再继续请求了
           } finally {
             this.loadingMore = false;
           }