From 8a65ef0335fc756b3318b6953e631c156a1f5635 Mon Sep 17 00:00:00 2001
From: Montia37 <MTChaoyi@outlook.com>
Date: Wed, 10 Sep 2025 11:51:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=A7=81=E6=9C=89?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/contexts/LiveDataContext.tsx | 48 +++++++++++++++++++-------------
 src/contexts/NodeDataContext.tsx |  2 +-
 src/services/api.ts              | 11 ++++++--
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/contexts/LiveDataContext.tsx b/src/contexts/LiveDataContext.tsx
index e37f159..7aa88d9 100644
--- a/src/contexts/LiveDataContext.tsx
+++ b/src/contexts/LiveDataContext.tsx
@@ -5,8 +5,9 @@ import {
   useContext,
   type ReactNode,
 } from "react";
-import { wsService } from "../services/api";
+import { getWsService } from "../services/api";
 import type { NodeStats } from "../types/node";
+import { useNodeData } from "./NodeDataContext";
 
 interface LiveData {
   online: string[];
@@ -38,30 +39,37 @@ export const LiveDataProvider = ({
   enableWebSocket = true,
 }: LiveDataProviderProps) => {
   const [liveData, setLiveData] = useState<LiveData | null>(null);
+  const { nodes, loading } = useNodeData();
 
   useEffect(() => {
-    if (!enableWebSocket) {
+    // 只有在加载完成、站点非私有且启用了 WebSocket 时才连接
+    if (!loading && nodes !== "private" && enableWebSocket) {
+      const wsService = getWsService(); // 在需要时才获取实例
+      console.log("连接------", loading, nodes, enableWebSocket);
+
+      const handleWebSocketData = (data: LiveData) => {
+        if (data.online && data.data) {
+          setLiveData({
+            online: [...data.online],
+            data: { ...data.data },
+          });
+        }
+      };
+
+      const unsubscribe = wsService.subscribe(handleWebSocketData);
+      wsService.connect();
+
+      return () => {
+        unsubscribe();
+        wsService.disconnect(); // 确保在组件卸载或条件变化时断开连接
+      };
+    } else {
+      // 如果条件不满足，确保断开任何现有连接
+      const wsService = getWsService(); // 获取实例以调用 disconnect
       wsService.disconnect();
       setLiveData(null);
-      return;
     }
-
-    const handleWebSocketData = (data: LiveData) => {
-      if (data.online && data.data) {
-        setLiveData({
-          online: [...data.online],
-          data: { ...data.data },
-        });
-      }
-    };
-
-    const unsubscribe = wsService.subscribe(handleWebSocketData);
-    wsService.connect();
-
-    return () => {
-      unsubscribe();
-    };
-  }, [enableWebSocket]);
+  }, [loading, nodes, enableWebSocket]);
 
   return (
     <LiveDataContext.Provider value={{ liveData }}>
diff --git a/src/contexts/NodeDataContext.tsx b/src/contexts/NodeDataContext.tsx
index cfbf786..95f9bef 100644
--- a/src/contexts/NodeDataContext.tsx
+++ b/src/contexts/NodeDataContext.tsx
@@ -13,7 +13,7 @@ import type { NodeData, PublicInfo, HistoryRecord } from "../types/node";
 function useNodesInternal() {
   const [staticNodes, setStaticNodes] = useState<NodeData[] | "private">([]);
   const [publicSettings, setPublicSettings] = useState<PublicInfo | null>(null);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   const fetchNodes = useCallback(async () => {
diff --git a/src/services/api.ts b/src/services/api.ts
index 77b3d5d..fdd753f 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -231,5 +231,12 @@ export class WebSocketService {
   }
 }
 
-// 创建 WebSocket 服务实例
-export const wsService = new WebSocketService();
+// 延迟 WebSocket 服务实例的创建
+let wsServiceInstance: WebSocketService | null = null;
+
+export function getWsService(): WebSocketService {
+  if (!wsServiceInstance) {
+    wsServiceInstance = new WebSocketService();
+  }
+  return wsServiceInstance;
+}