添加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;

src/utils/websocket.js

@@ -0,0 +1,83 @@
+let ws = null;
+
+// WebSocket连接地址
+const WS_URL = "ws://localhost:3000";
+
+// 建立WebSocket连接
+export function connectWebSocket(token, onMessage, onOpen, onClose, onError) {
+    // 如果已经连接，就不重复连接
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        console.log("WebSocket已经连接");
+        return;
+    }
+
+    // 携带JWT token
+    ws = new WebSocket(`${WS_URL}?token=${token}`);
+
+    // 连接成功
+    ws.onopen = () => {
+        console.log("WebSocket连接成功");
+
+        if (onOpen) {
+            onOpen();
+        }
+    };
+
+    // 接收到服务器消息
+    ws.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+
+            console.log("收到WebSocket消息：", data);
+
+            if (onMessage) {
+                onMessage(data);
+            }
+        } catch (error) {
+            console.error("WebSocket消息解析失败：", error);
+        }
+    };
+
+    // 连接关闭
+    ws.onclose = () => {
+        console.log("WebSocket连接关闭");
+
+        if (onClose) {
+            onClose();
+        }
+
+        ws = null;
+    };
+
+    // 连接错误
+    ws.onerror = (error) => {
+        console.error("WebSocket连接错误：", error);
+
+        if (onError) {
+            onError(error);
+        }
+    };
+}
+
+// 发送消息
+export function sendWebSocketMessage(data) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        console.error("WebSocket没有连接");
+        return;
+    }
+
+    ws.send(JSON.stringify(data));
+}
+
+// 关闭WebSocket
+export function closeWebSocket() {
+    if (ws) {
+        ws.close();
+        ws = null;
+    }
+}
+
+// 获取当前WebSocket
+export function getWebSocket() {
+    return ws;
+}