fix: when the window is hidden, close the websocket connection, reduce the risk of memory leaks

src/hooks/use-log-data.ts

@@ -4,6 +4,7 @@ import { createSockette } from "../utils/websocket";
 import { useClashInfo } from "./use-clash";
 import dayjs from "dayjs";
 import { create } from "zustand";
+import { useVisibility } from "./use-visibility";
 
 const MAX_LOG_NUM = 1000;
 
@@ -69,9 +70,10 @@ export const useLogData = (logLevel: LogLevel) => {
   const { clashInfo } = useClashInfo();
   const [enableLog] = useEnableLog();
   const { logs, appendLog } = useLogStore();
+  const pageVisible = useVisibility();
 
   useEffect(() => {
-    if (!enableLog || !clashInfo) return;
+    if (!enableLog || !clashInfo || !pageVisible) return;
 
     const { server = "", secret = "" } = clashInfo;
     const wsUrl = buildWSUrl(server, secret, logLevel);

src/pages/connections.tsx

@@ -20,6 +20,7 @@ import { BaseStyledSelect } from "@/components/base/base-styled-select";
 import useSWRSubscription from "swr/subscription";
 import { createSockette } from "@/utils/websocket";
 import { useTheme } from "@mui/material/styles";
+import { useVisibility } from "@/hooks/use-visibility";
 
 const initConn: IConnections = {
   uploadTotal: 0,
@@ -32,7 +33,7 @@ type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];
 const ConnectionsPage = () => {
   const { t } = useTranslation();
   const { clashInfo } = useClashInfo();
-
+  const pageVisible = useVisibility();
   const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
   const [match, setMatch] = useState(() => (_: string) => true);
@@ -58,9 +59,10 @@ const ConnectionsPage = () => {
     IConnections,
     any,
     "getClashConnections" | null
-  >(clashInfo ? "getClashConnections" : null, (_key, { next }) => {
+  >(
+    clashInfo && pageVisible ? "getClashConnections" : null,
+    (_key, { next }) => {
       const { server = "", secret = "" } = clashInfo!;
-
       const s = createSockette(
         `ws://${server}/connections?token=${encodeURIComponent(secret)}`,
         {
@@ -109,7 +111,8 @@ const ConnectionsPage = () => {
       return () => {
         s.close();
       };
-  });
+    },
+  );
 
   const [filterConn, download, upload] = useMemo(() => {
     const orderFunc = orderOpts[curOrderOpt];