fix: refresh websocket

src/components/layout/layout-traffic.tsx

@@ -21,6 +21,8 @@ const LayoutTraffic = () => {
   // setup log ws during layout
   useLogSetup();
 
+  const [refresh, setRefresh] = useState({});
+
   useEffect(() => {
     if (!clashInfo) return;
 
@@ -33,8 +35,12 @@ const LayoutTraffic = () => {
       setTraffic(data);
     });
 
+    ws.addEventListener("error", () => {
+      setTimeout(() => setRefresh({}), 1000);
+    });
+
     return () => ws?.close();
-  }, [clashInfo]);
+  }, [clashInfo, refresh]);
 
   const [up, upUnit] = parseTraffic(traffic.up);
   const [down, downUnit] = parseTraffic(traffic.down);

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

@@ -1,5 +1,5 @@
 import dayjs from "dayjs";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import { getClashLogs } from "@/services/cmds";
 import { useClashInfo } from "@/hooks/use-clash";
@@ -14,6 +14,8 @@ export const useLogSetup = () => {
   const enableLog = useRecoilValue(atomEnableLog);
   const setLogData = useSetRecoilState(atomLogData);
 
+  const [refresh, setRefresh] = useState({});
+
   useEffect(() => {
     if (!enableLog || !clashInfo) return;
 
@@ -31,6 +33,10 @@ export const useLogSetup = () => {
       });
     });
 
+    ws.addEventListener("error", () => {
+      setTimeout(() => setRefresh({}), 1000);
+    });
+
     return () => ws?.close();
-  }, [clashInfo, enableLog]);
+  }, [clashInfo, enableLog, refresh]);
 };