🚀 0.4.1

优化WebSocket连接逻辑

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nazhua",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -26,6 +26,9 @@ const currentTime = ref(0);
 
 provide('currentTime', currentTime);
 
+/**
+ * 刷新当前时间
+ */
 function refreshTime() {
   currentTime.value = Date.now();
   setTimeout(() => {
@@ -40,6 +43,9 @@ function handleSystem() {
   }
 }
 
+/**
+ * websocket断连的自动重连
+ */
 let stopReconnect = false;
 async function wsReconnect() {
   if (stopReconnect) {
@@ -55,7 +61,15 @@ async function wsReconnect() {
 onMounted(async () => {
   handleSystem();
   refreshTime();
+
+  /**
+   * 初始化服务器信息
+   */
   await store.dispatch('initServerInfo');
+
+  /**
+   * 初始化WS重连维护
+   */
   msg.on('close', () => {
     console.log('ws closed');
     wsReconnect();
@@ -68,14 +82,17 @@ onMounted(async () => {
     console.log('ws connected');
     store.dispatch('watchWsMsg');
   });
-  activeWebsocketService();
-
-  // 监听窗口重新获得焦点
   window.addEventListener('focus', () => {
-    if (wsService.connected !== 1) {
+    // ws在离开焦点后出现断连，尝试重新连接
+    // 暂定仅针对-1状态进行重连
+    if ([-1].includes(wsService.connected)) {
       restart();
     }
   });
+  /**
+   * 激活websocket服务
+   */
+  activeWebsocketService();
 });
 
 window.addEventListener('unhandledrejection', (event) => {

src/ws/index.js

@@ -3,8 +3,12 @@ import MessageSubscribe from '@/utils/subscribe';
 import {
   handelV1toV0,
 } from '@/utils/load-nezha-v1-config';
+
 import WSService from './service';
 
+/**
+ * 获取不同版本的WebSocket路径
+ */
 function getWsApiPath() {
   if (config.nazhua.nezhaVersion === 'v1') {
     return config.nazhua.v1WsPath;
@@ -25,7 +29,8 @@ const wsService = new WSService({
     msg.emit('error', error);
   },
   onMessage: (data) => {
-    if (data?.now) {
+    // 消息体包含.now和.servers 粗暴的判定为服务器列表项信息
+    if (data?.now && data?.servers) {
       if (config.nazhua.nezhaVersion === 'v1') {
         msg.emit('servers', {
           now: data.now,
@@ -57,17 +62,20 @@ export {
 };
 
 export default (actived) => {
-  // console.log('wsService active');
+  if (wsService.connected === 2) {
-  if (wsService.connected === 1) {
     if (actived) {
       actived();
     }
     return;
   }
-  wsService.active();
   msg.once('connect', () => {
     if (actived) {
       actived();
     }
   });
+  // 如果已经连接中，则不再连接
+  if (wsService.connected === 1) {
+    return;
+  }
+  wsService.active();
 };

src/ws/service.js

@@ -1,11 +1,5 @@
 class WSService {
   constructor(options) {
-    // 确保单例模式
-    if (WSService.instance) {
-      return WSService.instance;
-    }
-    WSService.instance = this;
-
     const {
       wsUrl,
       onConnect,
@@ -25,6 +19,15 @@ class WSService {
       message: onMessage || (() => {}),
       messageError: onMessageError || (() => {}),
     };
+
+    // 单例模式 遇到重复的ws服务，不再允许建立新的ws消息处理，如果遇到问题，等待用户自行刷新页面（破罐子破摔解决方法）
+    if (WSService.instance) {
+      // 抛出错误，防止重复创建 WebSocket 连接
+      this.$on.error(new Error('WebSocket connection already exists'));
+      return;
+    }
+
+    WSService.instance = this;
     // 0: 未连接，1: 连接中，2: 已连接，-1: 已关闭
     this.connected = 0;
     this.ws = undefined;
@@ -50,14 +53,15 @@ class WSService {
   }
 
   active() {
-    if (this.connected !== 0) {
+    // 如果已经连接中或已连接，则不再连接
+    if (this.connected > 0) {
       console.warn('WebSocket connection already exists or is connecting');
       return;
     }
-    
+
     // 标记为正在连接中
     this.connected = 1;
-    
+
     // 创建 WebSocket 连接
     this.ws = new WebSocket(this.$wsUrl);
     this.ws.addEventListener('open', (event) => {
@@ -77,7 +81,8 @@ class WSService {
     });
     this.ws.addEventListener('message', this.evt);
     this.ws.addEventListener('error', (event) => {
-      console.error('ai-live-websocket error', event);
+      console.log('socket error', event);
+      WSService.instance = null; // 清除实例引用
       this.$on.error(event);
     });
   }