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,58 +59,60 @@ const ConnectionsPage = () => {
     IConnections,
     any,
     "getClashConnections" | null
-  >(clashInfo ? "getClashConnections" : null, (_key, { next }) => {
+  >(
-    const { server = "", secret = "" } = clashInfo!;
+    clashInfo && pageVisible ? "getClashConnections" : null,
+    (_key, { next }) => {
+      const { server = "", secret = "" } = clashInfo!;
+      const s = createSockette(
+        `ws://${server}/connections?token=${encodeURIComponent(secret)}`,
+        {
+          onmessage(event) {
+            // meta v1.15.0 出现 data.connections 为 null 的情况
+            const data = JSON.parse(event.data) as IConnections;
+            // 尽量与前一次 connections 的展示顺序保持一致
+            next(null, (old = initConn) => {
+              const oldConn = old.connections;
+              const maxLen = data.connections?.length;
 
-    const s = createSockette(
+              const connections: IConnectionsItem[] = [];
-      `ws://${server}/connections?token=${encodeURIComponent(secret)}`,
-      {
-        onmessage(event) {
-          // meta v1.15.0 出现 data.connections 为 null 的情况
-          const data = JSON.parse(event.data) as IConnections;
-          // 尽量与前一次 connections 的展示顺序保持一致
-          next(null, (old = initConn) => {
-            const oldConn = old.connections;
-            const maxLen = data.connections?.length;
 
-            const connections: IConnectionsItem[] = [];
+              const rest = (data.connections || []).filter((each) => {
+                const index = oldConn.findIndex((o) => o.id === each.id);
 
-            const rest = (data.connections || []).filter((each) => {
+                if (index >= 0 && index < maxLen) {
-              const index = oldConn.findIndex((o) => o.id === each.id);
+                  const old = oldConn[index];
+                  each.curUpload = each.upload - old.upload;
+                  each.curDownload = each.download - old.download;
 
-              if (index >= 0 && index < maxLen) {
+                  connections[index] = each;
-                const old = oldConn[index];
+                  return false;
-                each.curUpload = each.upload - old.upload;
+                }
-                each.curDownload = each.download - old.download;
+                return true;
+              });
 
-                connections[index] = each;
+              for (let i = 0; i < maxLen; ++i) {
-                return false;
+                if (!connections[i] && rest.length > 0) {
+                  connections[i] = rest.shift()!;
+                  connections[i].curUpload = 0;
+                  connections[i].curDownload = 0;
+                }
               }
-              return true;
+
+              return { ...data, connections };
             });
-
+          },
-            for (let i = 0; i < maxLen; ++i) {
+          onerror(event) {
-              if (!connections[i] && rest.length > 0) {
+            next(event);
-                connections[i] = rest.shift()!;
+          },
-                connections[i].curUpload = 0;
-                connections[i].curDownload = 0;
-              }
-            }
-
-            return { ...data, connections };
-          });
         },
-        onerror(event) {
+        3,
-          next(event);
+      );
-        },
-      },
-      3,
-    );
 
-    return () => {
+      return () => {
-      s.close();
+        s.close();
-    };
+      };
-  });
+    },
+  );
 
   const [filterConn, download, upload] = useMemo(() => {
     const orderFunc = orderOpts[curOrderOpt];