our/clash-proxy
2
0
Fork 0
Code Pull Requests Activity

refactor(log): use swr subscription (#1220)

Browse Source
This commit is contained in:
Sukka
2024-06-17 10:48:37 +08:00
committed by GitHub
Unverified
parent d89eecacba
commit 18f0177fce
6 changed files with 69 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/layout/layout-traffic.tsx
View File

@@ -8,7 +8,7 @@ import {
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 { useLogData } from "@/hooks/use-log-data";
import { useVisibility } from "@/hooks/use-visibility";
import parseTraffic from "@/utils/parse-traffic";
import useSWRSubscription from "swr/subscription";
@@ -30,8 +30,10 @@ export const LayoutTraffic = () => {
const trafficRef = useRef<TrafficRef>(null);
const pageVisible = useVisibility();
// setup log ws during layout
useLogSetup();
// https://swr.vercel.app/docs/subscription#deduplication
// useSWRSubscription auto deduplicates to one subscription per key per entire app
// So we can simply invoke it here acting as preconnect
useLogData();
const { data: traffic = { up: 0, down: 0 } } = useSWRSubscription<
ITrafficItem,

38
src/components/layout/use-log-setup.ts
View File

@@ -1,38 +0,0 @@
import dayjs from "dayjs";
import { useEffect } from "react";
import { getClashLogs } from "@/services/cmds";
import { useClashInfo } from "@/hooks/use-clash";
import { useEnableLog, useSetLogData } from "@/services/states";
import { useWebsocket } from "@/hooks/use-websocket";
const MAX_LOG_NUM = 1000;
// setup the log websocket
export const useLogSetup = () => {
const { clashInfo } = useClashInfo();
const [enableLog] = useEnableLog();
const setLogData = useSetLogData();
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;
getClashLogs().then(setLogData);
const { server = "", secret = "" } = clashInfo;
connect(`ws://${server}/logs?token=${encodeURIComponent(secret)}`);
return () => {
disconnect();
};
}, [clashInfo, enableLog]);
};