refactor: Use Tauri WebSocket

src/components/layout/layout-traffic.tsx

@@ -30,7 +30,7 @@ export const LayoutTraffic = () => {
   useLogSetup();
 
   const { connect, disconnect } = useWebsocket((event) => {
-    const data = JSON.parse(event.data) as ITrafficItem;
+    const data = JSON.parse(event) as ITrafficItem;
     trafficRef.current?.appendData(data);
     setTraffic(data);
   });
@@ -52,7 +52,7 @@ export const LayoutTraffic = () => {
 
   const memoryWs = useWebsocket(
     (event) => {
-      setMemory(JSON.parse(event.data));
+      setMemory(JSON.parse(event));
     },
     { onError: () => setMemory({ inuse: 0 }) }
   );
@@ -63,7 +63,9 @@ export const LayoutTraffic = () => {
     memoryWs.connect(
       `ws://${server}/memory?token=${encodeURIComponent(secret)}`
     );
-    return () => memoryWs.disconnect();
+    return () => {
+      memoryWs.disconnect();
+    };
   }, [clashInfo, pageVisible, displayMemory]);
 
   const [up, upUnit] = parseTraffic(traffic.up);

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

@@ -16,7 +16,7 @@ export const useLogSetup = () => {
   const setLogData = useSetRecoilState(atomLogData);
 
   const { connect, disconnect } = useWebsocket((event) => {
-    const data = JSON.parse(event.data) as ILogItem;
+    const data = JSON.parse(event) as ILogItem;
     const time = dayjs().format("MM-DD HH:mm:ss");
     setLogData((l) => {
       if (l.length >= MAX_LOG_NUM) l.shift();

src/hooks/use-websocket.ts

@@ -1,20 +1,19 @@
 import { useRef } from "react";
-
-export type WsMsgFn = (event: MessageEvent<any>) => void;
+import WebSocket from "tauri-plugin-websocket-api";
+export type WsMsgFn = (event: string) => void;
 
 export interface WsOptions {
   errorCount?: number; // default is 5
-  retryInterval?: number; // default is 2500
-  onError?: () => void;
+  onError?: (e: any) => void;
 }
 
 export const useWebsocket = (onMessage: WsMsgFn, options?: WsOptions) => {
   const wsRef = useRef<WebSocket | null>(null);
   const timerRef = useRef<any>(null);
 
-  const disconnect = () => {
+  const disconnect = async () => {
     if (wsRef.current) {
-      wsRef.current.close();
+      await wsRef.current.disconnect();
       wsRef.current = null;
     }
     if (timerRef.current) {
@@ -22,31 +21,37 @@ export const useWebsocket = (onMessage: WsMsgFn, options?: WsOptions) => {
     }
   };
 
-  const connect = (url: string) => {
+  const connect = async (url: string) => {
     let errorCount = options?.errorCount ?? 5;
-
     if (!url) return;
+    const connectHelper = async () => {
+      await disconnect();
+      const ws = await WebSocket.connect(url);
 
-    const connectHelper = () => {
-      disconnect();
-
-      const ws = new WebSocket(url);
-      wsRef.current = ws;
-
-      ws.addEventListener("message", onMessage);
-      ws.addEventListener("error", () => {
-        errorCount -= 1;
-
-        if (errorCount >= 0) {
-          timerRef.current = setTimeout(connectHelper, 2500);
-        } else {
-          disconnect();
-          options?.onError?.();
+      ws.addListener((event) => {
+        switch (event.type) {
+          case "Text": {
+            onMessage(event.data);
+            break;
+          }
+          default: {
+            break;
+          }
         }
       });
+      wsRef.current = ws;
     };
-
-    connectHelper();
+    try {
+      await connectHelper();
+    } catch (e) {
+      errorCount -= 1;
+      if (errorCount >= 0) {
+        timerRef.current = setTimeout(connectHelper, 2500);
+      } else {
+        await disconnect();
+        options?.onError?.(e);
+      }
+    }
   };
 
   return { connect, disconnect };

src/pages/connections.tsx

@@ -61,7 +61,7 @@ const ConnectionsPage = () => {
   const { connect, disconnect } = useWebsocket(
     (event) => {
       // meta v1.15.0 出现data.connections为null的情况
-      const data = JSON.parse(event.data) as IConnections;
+      const data = JSON.parse(event) as IConnections;
       // 尽量与前一次connections的展示顺序保持一致
       setConnData((old) => {
         const oldConn = old.connections;
@@ -94,7 +94,7 @@ const ConnectionsPage = () => {
         return { ...data, connections };
       });
     },
-    { errorCount: 3, retryInterval: 1000 }
+    { errorCount: 3 }
   );
 
   useEffect(() => {