feat: Contro

public/background.js

@@ -44,6 +44,7 @@ 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"

src/App.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import "./App.css";
 import { ConfigProvider } from "antd";
-// import { Contro } from "@components/Contro";
+import { Contro } from "@components/Contro";
 import { Proxifier } from "@components/Proxifier";
-// import { Controller } from "./components/Controller";
+import { Controller } from "./components/Controller";
 
 function App() {
   return (
@@ -15,9 +15,9 @@ function App() {
       }}
     >
       <div className="App">
-        {/* <Contro /> */}
+        <Contro />
-        {/* <Controller/> */}
         <Proxifier/>
+        {/* <Controller/> */}
       </div>
     </ConfigProvider>
   );

src/components/Contro.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { Divider, Tooltip, Input } from "antd";
 import classNames from "classnames";
 import {
@@ -8,40 +8,79 @@ import {
   RefreshIcon,
   XIcon,
 } from "@assets/icon/icon";
+import { useUpdateEffect } from "ahooks";
+import { wsc } from "@network/chrome";
 import "./Contro.css";
 
 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>("0");
+  const [enginePort, setEnginePort] = useState<string>("");
   const [enginePortTemp, setEnginePortTemp] = useState<string>(enginePort);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   const updateStatus = () => {
+    const updateStatus = () => {
-  //     wsc.updateWSCStatus();
+      wsc.updateWSCStatus();
-  //   };
+    };
-  //   updateStatus();
+    updateStatus();
-  //   const id = setInterval(updateStatus, 500);
+    const id = setInterval(updateStatus, 500);
 
-  //   wsc.onWSCMessage((req: { connected: boolean }) => {
+    wsc.onWSCMessage((req: { connected: boolean }) => {
-  //     if (req["connected"] === undefined) {
+      if (req["connected"] === undefined) {
-  //       return;
+        return;
-  //     }
+      }
-  //     console.log("connected", req.connected);
+      setConnected(req.connected);
-  //     setConnected(req.connected);
+      setInit(true);
-  //   });
+    });
-  //   return () => {
+    return () => {
-  //     clearInterval(id);
+      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]);
+
+  const failConnected = useMemo(() => {
+    return !connected && autoFindFailedReason;
+  }, [connected, autoFindFailedReason]);
 
   return (
+    <>
+      {safeConnected || failConnected ? (
         <div
           className={classNames("Contro", {
-        ["Contro-success-bg"]: !autoFindFailedReason,
+            ["Contro-success-bg"]: safeConnected,
-        ["Contro-error-bg"]: autoFindFailedReason,
+            ["Contro-error-bg"]: failConnected,
           })}
         >
           <div className="Contro-lable">Yakit 引擎连接状态：</div>
@@ -51,8 +90,8 @@ export const Contro: React.FC<ControProps> = () => {
                 <Input
                   rootClassName="Contro-cont-input"
                   value={enginePortTemp}
+                  placeholder="输入范围 11212 - 11222"
                   onChange={(e) => {
-                // TODO 需要校验
                     const value = e.target.value;
                     setEnginePortTemp(value);
                   }}
@@ -67,8 +106,11 @@ export const Contro: React.FC<ControProps> = () => {
                   <CheckIcon
                     className="contro-handle-icon-check icon-p"
                     onClick={() => {
+                      if (enginePortTemp) {
                         setIsEdit(false);
                         setEnginePort(enginePortTemp);
+                        wsc.connect(Number(enginePortTemp));
+                      }
                     }}
                   />
                 </div>
@@ -77,13 +119,15 @@ export const Contro: React.FC<ControProps> = () => {
               <>
                 <div
                   className={classNames("Contro-cont-text", {
-                ["Contro-cont-text-success"]: !autoFindFailedReason,
+                    ["Contro-cont-text-success"]: safeConnected,
-                ["Contro-cont-text-error"]: autoFindFailedReason,
+                    ["Contro-cont-text-error"]: failConnected,
                   })}
                 >
-              {autoFindFailedReason
+                  {safeConnected && "已连接（" + enginePort + "）"}
+                  {failConnected &&
+                    (enginePort
                       ? autoFindFailedReason + "（" + enginePort + "）"
-                : "已连接（" + enginePort + "）"}
+                      : autoFindFailedReason)}
                 </div>
                 <div className="Contro-handle-icon">
                   <Tooltip title="修改监听端口">
@@ -96,13 +140,22 @@ export const Contro: React.FC<ControProps> = () => {
                     />
                   </Tooltip>
                   <Divider type="vertical" style={{ height: 16 }} />
-              {autoFindFailedReason ? (
+                  {safeConnected && (
-                <Tooltip title="重新连接">
-                  <RefreshIcon />
-                </Tooltip>
-              ) : (
                     <Tooltip title="断开连接">
-                  <ExitIcon />
+                      <ExitIcon onClick={() => wsc.disconnect()} />
+                    </Tooltip>
+                  )}
+                  {failConnected && (
+                    <Tooltip title="重新连接">
+                      <RefreshIcon
+                        onClick={() => {
+                          if (enginePort) {
+                            wsc.connect(Number(enginePort));
+                          } else {
+                            findPort(11212, 11222);
+                          }
+                        }}
+                      />
                     </Tooltip>
                   )}
                 </div>
@@ -110,5 +163,7 @@ export const Contro: React.FC<ControProps> = () => {
             )}
           </div>
         </div>
+      ) : null}
+    </>
   );
 };

src/components/Proxifier.tsx

@@ -68,7 +68,10 @@ export const Proxifier: React.FC<ProxifierProps> = () => {
     wsc.updateProxyStatus();
 
     wsc.onProxyStatusMessage((msg) => {
-      if (!msg.proxy || !msg.enable) {
+      if (msg.proxy === undefined || msg.enable === undefined) {
+        return;
+      }
+      if (msg.proxy === "" || msg.enable === false) {
         if (proxyList.some((i) => i.open)) {
           const copyProxyList = [...proxyList];
           copyProxyList.forEach((i) => {