From 376011ea0836f9b646747bbaf0b2bd271df4f8d1 Mon Sep 17 00:00:00 2001
From: GyDi <zzzgydi@gmail.com>
Date: Fri, 25 Nov 2022 22:22:57 +0800
Subject: [PATCH] fix: refresh websocket

---
 src/components/layout/layout-traffic.tsx |  8 +++++++-
 src/components/layout/use-log-setup.ts   | 10 ++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/layout-traffic.tsx b/src/components/layout/layout-traffic.tsx
index 7d8787d..e579bc1 100644
--- a/src/components/layout/layout-traffic.tsx
+++ b/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);
diff --git a/src/components/layout/use-log-setup.ts b/src/components/layout/use-log-setup.ts
index d7f06a1..ebe0d38 100644
--- a/src/components/layout/use-log-setup.ts
+++ b/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]);
 };