✨ update websocket

src/constant/qq_emoji.ts

@@ -384,7 +384,8 @@ const QQ_EMOJI = [
         path: "/emoji/qq/gif/96.gif",
     },
     {
-        name: "97.gif", path: "/emoji/qq/gif/97.gif",
+        name: "97.gif",
+        path: "/emoji/qq/gif/97.gif",
     },
     {
         name: "98.gif",
@@ -541,14 +542,6 @@ const QQ_EMOJI = [
     {
         name: "136.gif",
         path: "/emoji/qq/gif/136.gif",
-    },
-    {
-        name: "137.gif",
-        path: "/emoji/qq/gif/137.gif",
-    },
-    {
-        name: "138.gif",
-        path: "/emoji/qq/gif/138.gif",
     }
 ];
 

src/store/modules/websocketStore.ts

@@ -1,6 +1,6 @@
 // useWebSocketStore.ts
 import {defineStore} from 'pinia';
-import {onUnmounted, reactive} from 'vue';
+import {reactive} from 'vue';
 import {WebSocketService} from '@/utils/websocket/websocket.ts';
 
 type MessageCallback = (data: any) => void;
@@ -10,13 +10,13 @@ export const useWebSocketStore = defineStore('websocket', () => {
         wsService: null as WebSocketService | null,
     });
 
-    function initialize(options: { url: string; protocols?: string | string[]; reconnectTimeout?: number }) {
+    function initialize(options: {
+        url: string;
+        protocols?: string | string[];
+        reconnectTimeout?: number
+    }) {
         state.wsService = new WebSocketService(options);
-        state.wsService.open();
-
-        onUnmounted(() => {
-            state.wsService?.close(true);
-        });
+        state.wsService?.open();
     }
 
     function sendMessage(data: any) {
@@ -31,8 +31,8 @@ export const useWebSocketStore = defineStore('websocket', () => {
         state.wsService?.on(event, callback);
     }
 
-    function close() {
-        state.wsService?.close();
+    function close(isActiveClose: boolean) {
+        state.wsService?.close(isActiveClose);
     }
 
     return {

src/utils/websocket/websocket.ts

@@ -11,10 +11,9 @@ type EventCallback = () => void;
 export class WebSocketService {
     private ws: WebSocket | null = null;
     private callbacks: { [key: string]: (MessageCallback | EventCallback)[] } = {};
-    private reconnectTimeoutMs: number = 5000; // 默认5秒重连间隔
-    private heartbeatIntervalMs: number = 5000; // 默认5秒心跳间隔
-
-    constructor(private options: WebSocketOptions) {}
+    private reconnectTimeoutMs: number = 10000; // 默认10秒重连间隔
+    constructor(private options: WebSocketOptions) {
+    }
 
     public open(): void {
         this.ws = new WebSocket(this.options.url, this.options.protocols);
@@ -22,18 +21,12 @@ export class WebSocketService {
         this.ws.addEventListener('message', this.handleMessage);
         this.ws.addEventListener('error', this.handleError);
         this.ws.addEventListener('close', this.handleClose);
-
-        setInterval(() => {
-            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
-                this.send("ping");
-            }
-        }, this.heartbeatIntervalMs);
     }
 
     public close(isActiveClose = false): void {
         if (this.ws) {
             this.ws.close();
-            if (!isActiveClose) {
+            if (isActiveClose) {
                 setTimeout(() => this.reconnect(), this.reconnectTimeoutMs);
             }
         }

src/views/Main/MainPage.vue

@@ -3,34 +3,40 @@
     <Header/>
 
     <CommentReply/>
+
+    <AAvatar :size="100" :text="userInfo.user.username" :svgCode="svgCode"/>
   </div>
 </template>
 <script setup lang="ts">
 import useStore from "@/store";
 import CommentReply from "@/components/CommentReply/index.vue";
-import {onMounted} from "vue";
+import {h, onMounted, onUnmounted} from "vue";
 import Header from "@/layout/default/Header/Header.vue";
+import {notification} from "ant-design-vue";
+import {SmileOutlined} from "@ant-design/icons-vue";
 
 const websocket = useStore().websocket;
 const userInfo = useStore().user;
 
-
 const wsOptions = {
-  url: import.meta.env.VITE_WEB_SOCKET_URL + "?client_id=" + userInfo.user.uid,
+  url: import.meta.env.VITE_MESSAGE_SOCKET_URL + "?user_id=" + userInfo.user.uid + "&token=" + userInfo.user.accessToken,
 };
 
 onMounted(() => {
   websocket.initialize(wsOptions);
-  websocket.on("message", async (_data: any) => {
-    // notification.open({
-    //   message: '消息来了',
-    //   description:
-    //   data,
-    //   icon: () => h(SmileOutlined, {style: 'color: #108ee9'}),
-    // });
+  websocket.on("message", async (data: any) => {
+    notification.open({
+      message: '消息来了',
+      description:
+      data,
+      icon: () => h(SmileOutlined, {style: 'color: #108ee9'}),
+    });
   });
 });
 
+onUnmounted(() => {
+  websocket.close(false);
+});
 
 </script>
 <style scoped>

src/views/QRLogin/QRLogin.vue

@@ -116,7 +116,7 @@ function getLocalClientId() {
 }
 
 const wsOptions = {
-  url: import.meta.env.VITE_WEB_SOCKET_URL + "?client_id=" + getLocalClientId(),
+  url: import.meta.env.VITE_QR_SOCKET_URL + "?client_id=" + getLocalClientId(),
 };
 
 

src/vite-env.d.ts

@@ -5,7 +5,9 @@ declare interface ImportMetaEnv {
     readonly VITE_API_BASE_URL: string;
     readonly VITE_NODE_ENV: string;
     readonly VITE_TITLE_NAME: string;
-    readonly VITE_APP_TOKEN_KEY?: string;
+    readonly VITE_APP_TOKEN_KEY: string;
+    readonly VITE_QR_SOCKET_URL: string;
+    readonly VITE_MESSAGE_SOCKET_URL: string;
 }
 
 interface ImportMeta {