feat: Contro逻辑调整

public/background.js

@@ -3,10 +3,10 @@ const connectWebsocket = url => {
     disconnectWebsocket()
     socket = new WebSocket(url);
     socket.onopen = () => {
-        chrome.runtime.sendMessage({status: "connected"})
+        chrome.runtime.sendMessage({connected: true})
     }
     socket.onclose = () => {
-        chrome.runtime.sendMessage({status: "disconnected"})
+        chrome.runtime.sendMessage({connected: false})
     }
 }
 
@@ -44,7 +44,6 @@ console.info("Chrome Extenstion Background is loaded")
 let proxyHost = "";
 
 chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
-    console.log(msg);
     if (msg.action === "connect") {
         console.info("Start to connect websocket")
         const host = msg['host'] || "127.0.0.1"
@@ -52,12 +51,6 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
         connectWebsocket(`ws://${host}:${port}/?token=${"a"}`)
     } else if (msg.action === 'disconnect') {
         disconnectWebsocket()
-    } else if (msg.action === "status") {
-        if (socket) {
-            chrome.runtime.sendMessage({connected: true})
-        } else {
-            chrome.runtime.sendMessage({connected: false})
-        }
     } else if (msg.action === 'setproxy') {
         chrome.proxy.settings.set({
             value: {

src/components/Contro.tsx

@@ -8,7 +8,6 @@ import {
   RefreshIcon,
   XIcon,
 } from "@assets/icon/icon";
-import { useUpdateEffect } from "ahooks";
 import { wsc } from "@network/chrome";
 import "./Contro.css";
 
@@ -16,56 +15,50 @@ interface ControProps {}
 export const Contro: React.FC<ControProps> = () => {
   const [isEdit, setIsEdit] = useState<boolean>(false);
   const [connected, setConnected] = useState(false);
-  const [init, setInit] = React.useState(false);
   const [autoFindFailedReason, setAutoFindFailedReason] = useState<string>("");
   const [enginePort, setEnginePort] = useState<string>("");
   const [enginePortTemp, setEnginePortTemp] = useState<string>(enginePort);
 
   useEffect(() => {
-    const updateStatus = () => {
+    findPort(11212, 11222);
-      wsc.updateWSCStatus();
+  }, []);
-    };
+  const findPort = (port: number, max: number) => {
-    updateStatus();
+    const ws = new WebSocket(`ws://127.0.0.1:${port}`);
-    const id = setInterval(updateStatus, 500);
+    ws.onclose = (e: CloseEvent) => {
+      if (e.reason !== `FoundYakitWebSocketController` && port + 1 <= max) {
+        setTimeout(() => findPort(port + 1, max), 200);
+      }
 
+      if (port + 1 > max) {
+        setConnected(false);
+        setEnginePort("");
+        setAutoFindFailedReason("Cannot found Yakit");
+      }
+    };
+    ws.onopen = () => {
+      setConnected(true);
+      setEnginePort(port + "");
+      setAutoFindFailedReason("");
+      ws.close(1000, "FoundYakitWebSocketController");
+      connectPort(port);
+    };
+  };
+
+  const connectPort = (port: number) => {
+    wsc.connect(port);
     wsc.onWSCMessage((req: { connected: boolean }) => {
       if (req["connected"] === undefined) {
         return;
       }
       setConnected(req.connected);
-      setInit(true);
+      if (req.connected === false) {
+        setAutoFindFailedReason("Yakit WebSocket Controller Port is not right");
+      } else {
+        setAutoFindFailedReason("");
+      }
     });
-    return () => {
-      clearInterval(id);
-    };
-  }, []);
-
-  const findPort = (port: number, max: number) => {
-    const ws = new WebSocket(`ws://127.0.0.1:${port}`);
-    ws.onclose = (e: CloseEvent) => {
-      if (e.reason !== `FoundYakitWebSocketController` && port + 1 <= max) {
-        setTimeout(() => findPort(port + 1, max), 300);
-      }
-
-      if (port + 1 > max) {
-        setAutoFindFailedReason(
-          "Cannot found Yakit or Yakit WebSocket Controller Port is not right"
-        );
-      }
-    };
-    ws.onopen = () => {
-      setEnginePort(port + "");
-      ws.close(1000, "FoundYakitWebSocketController");
-    };
   };
 
-  useUpdateEffect(() => {
-    if (!init || connected) {
-      return;
-    }
-    findPort(11212, 11222);
-  }, [connected, init]);
-
   const safeConnected = useMemo(() => {
     return connected && enginePort;
   }, [connected, enginePort]);
@@ -109,7 +102,7 @@ export const Contro: React.FC<ControProps> = () => {
                       if (enginePortTemp) {
                         setIsEdit(false);
                         setEnginePort(enginePortTemp);
-                        wsc.connect(Number(enginePortTemp));
+                        connectPort(Number(enginePortTemp));
                       }
                     }}
                   />
@@ -151,7 +144,7 @@ export const Contro: React.FC<ControProps> = () => {
                         className="grey-icon icon-active"
                         onClick={() => {
                           if (enginePort) {
-                            wsc.connect(Number(enginePort));
+                            connectPort(Number(enginePort));
                           } else {
                             findPort(11212, 11222);
                           }