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 /> */}
-        {/* <Controller/> */}
+        <Contro />
         <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,107 +8,162 @@ 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(() => {
-  //   const updateStatus = () => {
-  //     wsc.updateWSCStatus();
-  //   };
-  //   updateStatus();
-  //   const id = setInterval(updateStatus, 500);
+  useEffect(() => {
+    const updateStatus = () => {
+      wsc.updateWSCStatus();
+    };
+    updateStatus();
+    const id = setInterval(updateStatus, 500);
 
-  //   wsc.onWSCMessage((req: { connected: boolean }) => {
-  //     if (req["connected"] === undefined) {
-  //       return;
-  //     }
-  //     console.log("connected", req.connected);
-  //     setConnected(req.connected);
-  //   });
-  //   return () => {
-  //     clearInterval(id);
-  //   };
-  // }, []);
+    wsc.onWSCMessage((req: { connected: boolean }) => {
+      if (req["connected"] === undefined) {
+        return;
+      }
+      setConnected(req.connected);
+      setInit(true);
+    });
+    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]);
+
+  const failConnected = useMemo(() => {
+    return !connected && autoFindFailedReason;
+  }, [connected, autoFindFailedReason]);
 
   return (
-    <div
-      className={classNames("Contro", {
-        ["Contro-success-bg"]: !autoFindFailedReason,
-        ["Contro-error-bg"]: autoFindFailedReason,
-      })}
-    >
-      <div className="Contro-lable">Yakit 引擎连接状态：</div>
-      <div className="Contro-cont">
-        {isEdit ? (
-          <>
-            <Input
-              rootClassName="Contro-cont-input"
-              value={enginePortTemp}
-              onChange={(e) => {
-                // TODO 需要校验
-                const value = e.target.value;
-                setEnginePortTemp(value);
-              }}
-            />
-            <div className="Contro-handle-icon">
-              <XIcon
-                className="icon-p"
-                onClick={() => {
-                  setIsEdit(false);
-                }}
-              />
-              <CheckIcon
-                className="contro-handle-icon-check icon-p"
-                onClick={() => {
-                  setIsEdit(false);
-                  setEnginePort(enginePortTemp);
-                }}
-              />
-            </div>
-          </>
-        ) : (
-          <>
-            <div
-              className={classNames("Contro-cont-text", {
-                ["Contro-cont-text-success"]: !autoFindFailedReason,
-                ["Contro-cont-text-error"]: autoFindFailedReason,
-              })}
-            >
-              {autoFindFailedReason
-                ? autoFindFailedReason + "（" + enginePort + "）"
-                : "已连接（" + enginePort + "）"}
-            </div>
-            <div className="Contro-handle-icon">
-              <Tooltip title="修改监听端口">
-                <PencilAltIcon
-                  className="icon-p"
-                  onClick={() => {
-                    setIsEdit(true);
-                    setEnginePortTemp(enginePort);
+    <>
+      {safeConnected || failConnected ? (
+        <div
+          className={classNames("Contro", {
+            ["Contro-success-bg"]: safeConnected,
+            ["Contro-error-bg"]: failConnected,
+          })}
+        >
+          <div className="Contro-lable">Yakit 引擎连接状态：</div>
+          <div className="Contro-cont">
+            {isEdit ? (
+              <>
+                <Input
+                  rootClassName="Contro-cont-input"
+                  value={enginePortTemp}
+                  placeholder="输入范围 11212 - 11222"
+                  onChange={(e) => {
+                    const value = e.target.value;
+                    setEnginePortTemp(value);
                   }}
                 />
-              </Tooltip>
-              <Divider type="vertical" style={{ height: 16 }} />
-              {autoFindFailedReason ? (
-                <Tooltip title="重新连接">
-                  <RefreshIcon />
-                </Tooltip>
-              ) : (
-                <Tooltip title="断开连接">
-                  <ExitIcon />
-                </Tooltip>
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
+                <div className="Contro-handle-icon">
+                  <XIcon
+                    className="icon-p"
+                    onClick={() => {
+                      setIsEdit(false);
+                    }}
+                  />
+                  <CheckIcon
+                    className="contro-handle-icon-check icon-p"
+                    onClick={() => {
+                      if (enginePortTemp) {
+                        setIsEdit(false);
+                        setEnginePort(enginePortTemp);
+                        wsc.connect(Number(enginePortTemp));
+                      }
+                    }}
+                  />
+                </div>
+              </>
+            ) : (
+              <>
+                <div
+                  className={classNames("Contro-cont-text", {
+                    ["Contro-cont-text-success"]: safeConnected,
+                    ["Contro-cont-text-error"]: failConnected,
+                  })}
+                >
+                  {safeConnected && "已连接（" + enginePort + "）"}
+                  {failConnected &&
+                    (enginePort
+                      ? autoFindFailedReason + "（" + enginePort + "）"
+                      : autoFindFailedReason)}
+                </div>
+                <div className="Contro-handle-icon">
+                  <Tooltip title="修改监听端口">
+                    <PencilAltIcon
+                      className="icon-p"
+                      onClick={() => {
+                        setIsEdit(true);
+                        setEnginePortTemp(enginePort);
+                      }}
+                    />
+                  </Tooltip>
+                  <Divider type="vertical" style={{ height: 16 }} />
+                  {safeConnected && (
+                    <Tooltip title="断开连接">
+                      <ExitIcon onClick={() => wsc.disconnect()} />
+                    </Tooltip>
+                  )}
+                  {failConnected && (
+                    <Tooltip title="重新连接">
+                      <RefreshIcon
+                        onClick={() => {
+                          if (enginePort) {
+                            wsc.connect(Number(enginePort));
+                          } else {
+                            findPort(11212, 11222);
+                          }
+                        }}
+                      />
+                    </Tooltip>
+                  )}
+                </div>
+              </>
+            )}
+          </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) => {