From ca50ac15c704e00b38106797e322b1020467640d Mon Sep 17 00:00:00 2001
From: hi2hi <code@hi2hi.cc>
Date: Fri, 6 Dec 2024 10:09:33 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=200.4.1=20=E4=BC=98=E5=8C=96WebSoc?=
 =?UTF-8?q?ket=E8=BF=9E=E6=8E=A5=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json      |  2 +-
 src/App.vue       | 25 +++++++++++++++++++++----
 src/ws/index.js   | 16 ++++++++++++----
 src/ws/service.js | 25 +++++++++++++++----------
 4 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 6027afc..6eb1672 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nazhua",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.vue b/src/App.vue
index 13f58bd..340a04c 100644
--- a/src/App.vue
+++ b/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) => {
diff --git a/src/ws/index.js b/src/ws/index.js
index b6ae878..c728ab3 100644
--- a/src/ws/index.js
+++ b/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 === 1) {
+  if (wsService.connected === 2) {
     if (actived) {
       actived();
     }
     return;
   }
-  wsService.active();
   msg.once('connect', () => {
     if (actived) {
       actived();
     }
   });
+  // 如果已经连接中，则不再连接
+  if (wsService.connected === 1) {
+    return;
+  }
+  wsService.active();
 };
diff --git a/src/ws/service.js b/src/ws/service.js
index 113e6af..c47d1b8 100644
--- a/src/ws/service.js
+++ b/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);
     });
   }