refactor: improve webSocket connection handling and error recovery

src/components/layout/layout-traffic.tsx

@@ -11,7 +11,7 @@ import { TrafficGraph, type TrafficRef } from "./traffic-graph";
 import { useVisibility } from "@/hooks/use-visibility";
 import parseTraffic from "@/utils/parse-traffic";
 import useSWRSubscription from "swr/subscription";
-import { createSockette } from "@/utils/websocket";
+import { createSockette, createAuthSockette } from "@/utils/websocket";
 import { useTranslation } from "react-i18next";
 import { isDebugEnabled, gc } from "@/services/api";
 
@@ -47,23 +47,41 @@ export const LayoutTraffic = () => {
     (_key, { next }) => {
       const { server = "", secret = "" } = clashInfo!;
 
-      const s = createSockette(
-        `ws://${server}${secret ? `/traffic?token=${encodeURIComponent(secret)}` : "/traffic"}`,
-        {
-          onmessage(event) {
-            const data = JSON.parse(event.data) as ITrafficItem;
-            trafficRef.current?.appendData(data);
-            next(null, data);
-          },
-          onerror(event) {
-            this.close();
-            next(event, { up: 0, down: 0 });
-          },
+      if (!server) {
+        console.warn("[Traffic] 服务器地址为空，无法建立连接");
+        next(null, { up: 0, down: 0 });
+        return () => {};
+      }
+
+      console.log(`[Traffic] 正在连接: ${server}/traffic`);
+
+      const s = createAuthSockette(`${server}/traffic`, secret, {
+        timeout: 8000, // 8秒超时
+        onmessage(event) {
+          const data = JSON.parse(event.data) as ITrafficItem;
+          trafficRef.current?.appendData(data);
+          next(null, data);
         },
-      );
+        onerror(event) {
+          console.error("[Traffic] WebSocket 连接错误", event);
+          this.close();
+          next(null, { up: 0, down: 0 });
+        },
+        onclose(event) {
+          console.log("[Traffic] WebSocket 连接关闭", event);
+        },
+        onopen(event) {
+          console.log("[Traffic] WebSocket 连接已建立");
+        },
+      });
 
       return () => {
-        s.close();
+        console.log("[Traffic] 清理WebSocket连接");
+        try {
+          s.close();
+        } catch (e) {
+          console.error("[Traffic] 关闭连接时出错", e);
+        }
       };
     },
     {
@@ -85,22 +103,40 @@ export const LayoutTraffic = () => {
     (_key, { next }) => {
       const { server = "", secret = "" } = clashInfo!;
 
-      const s = createSockette(
-        `ws://${server}${secret ? `/memory?token=${encodeURIComponent(secret)}` : "/memory"}`,
-        {
-          onmessage(event) {
-            const data = JSON.parse(event.data) as MemoryUsage;
-            next(null, data);
-          },
-          onerror(event) {
-            this.close();
-            next(event, { inuse: 0 });
-          },
+      if (!server) {
+        console.warn("[Memory] 服务器地址为空，无法建立连接");
+        next(null, { inuse: 0 });
+        return () => {};
+      }
+
+      console.log(`[Memory] 正在连接: ${server}/memory`);
+
+      const s = createAuthSockette(`${server}/memory`, secret, {
+        timeout: 8000, // 8秒超时
+        onmessage(event) {
+          const data = JSON.parse(event.data) as MemoryUsage;
+          next(null, data);
         },
-      );
+        onerror(event) {
+          console.error("[Memory] WebSocket 连接错误", event);
+          this.close();
+          next(null, { inuse: 0 });
+        },
+        onclose(event) {
+          console.log("[Memory] WebSocket 连接关闭", event);
+        },
+        onopen(event) {
+          console.log("[Memory] WebSocket 连接已建立");
+        },
+      });
 
       return () => {
-        s.close();
+        console.log("[Memory] 清理WebSocket连接");
+        try {
+          s.close();
+        } catch (e) {
+          console.error("[Memory] 关闭连接时出错", e);
+        }
       };
     },
     {