fix: infinite retry when websocket error

src/components/layout/layout-traffic.tsx

@@ -5,6 +5,7 @@ import { useClashInfo } from "@/hooks/use-clash";
 import { useVerge } from "@/hooks/use-verge";
 import { TrafficGraph, type TrafficRef } from "./traffic-graph";
 import { useLogSetup } from "./use-log-setup";
+import { useWebsocket } from "@/hooks/use-websocket";
 import parseTraffic from "@/utils/parse-traffic";
 
 // setup the traffic
@@ -18,58 +19,36 @@ const LayoutTraffic = () => {
   const trafficRef = useRef<TrafficRef>(null);
   const [traffic, setTraffic] = useState({ up: 0, down: 0 });
 
-  const wsRef = useRef<WebSocket | null>(null);
-  const [refresh, setRefresh] = useState({});
-
   // setup log ws during layout
   useLogSetup();
 
+  const { connect, disconnect } = useWebsocket((event) => {
+    const data = JSON.parse(event.data) as ITrafficItem;
+    trafficRef.current?.appendData(data);
+    setTraffic(data);
+  });
+
   useEffect(() => {
     if (!clashInfo) return;
 
     const { server = "", secret = "" } = clashInfo;
-    const ws = new WebSocket(`ws://${server}/traffic?token=${secret}`);
-
-    ws.addEventListener("message", (event) => {
-      const data = JSON.parse(event.data) as ITrafficItem;
-      trafficRef.current?.appendData(data);
-      setTraffic(data);
-    });
-
-    ws.addEventListener("error", () => {
-      setTimeout(() => {
-        if (document.visibilityState === "visible") {
-          setRefresh({});
-        }
-      }, 1000);
-    });
-
-    ws.addEventListener("close", () => {
-      setTimeout(() => {
-        if (document.visibilityState === "visible") {
-          setRefresh({});
-        }
-      }, 1000);
-    });
-
-    wsRef.current = ws;
+    connect(`ws://${server}/traffic?token=${secret}`);
 
     return () => {
-      ws?.close();
-      wsRef.current = null;
+      disconnect();
     };
-  }, [clashInfo, refresh]);
+  }, [clashInfo]);
 
   useEffect(() => {
+    // 页面隐藏时去掉请求
     const handleVisibleChange = () => {
+      if (!clashInfo) return;
       if (document.visibilityState === "visible") {
         // reconnect websocket
-        if (
-          wsRef.current &&
-          wsRef.current.readyState !== WebSocket.CONNECTING
-        ) {
-          setRefresh({});
-        }
+        const { server = "", secret = "" } = clashInfo;
+        connect(`ws://${server}/traffic?token=${secret}`);
+      } else {
+        disconnect();
       }
     };
 

src/components/layout/use-log-setup.ts

@@ -1,9 +1,10 @@
 import dayjs from "dayjs";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { getClashLogs } from "@/services/cmds";
 import { useClashInfo } from "@/hooks/use-clash";
 import { atomEnableLog, atomLogData } from "@/services/states";
+import { useWebsocket } from "@/hooks/use-websocket";
 
 const MAX_LOG_NUM = 1000;
 
@@ -14,7 +15,14 @@ export const useLogSetup = () => {
   const enableLog = useRecoilValue(atomEnableLog);
   const setLogData = useSetRecoilState(atomLogData);
 
-  const [refresh, setRefresh] = useState({});
+  const { connect, disconnect } = useWebsocket((event) => {
+    const data = JSON.parse(event.data) as ILogItem;
+    const time = dayjs().format("MM-DD HH:mm:ss");
+    setLogData((l) => {
+      if (l.length >= MAX_LOG_NUM) l.shift();
+      return [...l, { ...data, time }];
+    });
+  });
 
   useEffect(() => {
     if (!enableLog || !clashInfo) return;
@@ -22,21 +30,10 @@ export const useLogSetup = () => {
     getClashLogs().then(setLogData);
 
     const { server = "", secret = "" } = clashInfo;
-    const ws = new WebSocket(`ws://${server}/logs?token=${secret}`);
+    connect(`ws://${server}/logs?token=${secret}`);
 
-    ws.addEventListener("message", (event) => {
-      const data = JSON.parse(event.data) as ILogItem;
-      const time = dayjs().format("MM-DD HH:mm:ss");
-      setLogData((l) => {
-        if (l.length >= MAX_LOG_NUM) l.shift();
-        return [...l, { ...data, time }];
-      });
-    });
-
-    ws.addEventListener("error", () => {
-      setTimeout(() => setRefresh({}), 1000);
-    });
-
-    return () => ws?.close();
-  }, [clashInfo, enableLog, refresh]);
+    return () => {
+      disconnect();
+    };
+  }, [clashInfo, enableLog]);
 };