fix: 修复重连问题

public/background.js

@@ -13,7 +13,7 @@ chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
             console.info("Start to connect websocket")
             const host = msg['host'] || "127.0.0.1"
             const port = msg['port'] || 11212
-            websocketManager.connectWebsocket(`ws://${host}:${port}/?token=${"a"}`)
+            websocketManager.connectWebsocket(`ws://${host}:${port}/?token=${"a"}`, port)
             break;
         case ActionType.DISCONNECT:
             websocketManager.disconnectWebsocket();

public/connect.js

@@ -13,12 +13,12 @@ export class WebSocketManager {
         this.intervalId = null;
     }
 
-    connectWebsocket(url) {
+    connectWebsocket(url, port) {
         this.disconnectWebsocket();
         this.socket = new WebSocket(url);
 
         this.socket.onopen = () => {
-            chrome.runtime.sendMessage({action: ActionType.STATUS, connected: true});
+            chrome.runtime.sendMessage({action: ActionType.STATUS, connected: true, port: port});
             this.startHeartbeat();
         };
 
@@ -27,7 +27,7 @@ export class WebSocketManager {
         };
 
         this.socket.onclose = () => {
-            chrome.runtime.sendMessage({action: ActionType.STATUS, connected: false});
+            chrome.runtime.sendMessage({action: ActionType.STATUS, connected: false, port: port});
         };
 
         this.socket.onerror = (error) => {

src/components/Contro.tsx

@@ -10,7 +10,7 @@ import {
 } from "@assets/icon/icon";
 import { wsc } from "@network/chrome";
 import "./Contro.css";
-import {ActionType} from "../../public/connect";
+import { ActionType } from "../../public/connect";
 
 interface ControProps {}
 export const Contro: React.FC<ControProps> = () => {
@@ -21,8 +21,35 @@ export const Contro: React.FC<ControProps> = () => {
   const [enginePortTemp, setEnginePortTemp] = useState<string>(enginePort);
 
   useEffect(() => {
-    findPort(11212, 11222);
+    const yakitConnectInfo = localStorage.getItem("yakit-connect");
+    if (!yakitConnectInfo) {
+      findPort(11212, 11222);
+    } else {
+      const { port, connected } = JSON.parse(yakitConnectInfo);
+      setConnected(connected);
+      setEnginePort(port + "");
+      setAutoFindFailedReason("");
+    }
+
+    wsc.onWSCMessage((message) => {
+      if (message.action === ActionType.STATUS) {
+        setConnected(message.connected);
+        if (message.connected === false) {
+          localStorage.setItem("yakit-connect", "");
+          setAutoFindFailedReason(
+            "Yakit WebSocket Controller Port is not right"
+          );
+        } else {
+          localStorage.setItem(
+            "yakit-connect",
+            JSON.stringify({ connected: true, port: message.port })
+          );
+          setAutoFindFailedReason("");
+        }
+      }
+    });
   }, []);
+
   const findPort = (port: number, max: number) => {
     const ws = new WebSocket(`ws://127.0.0.1:${port}`);
     ws.onclose = (e: CloseEvent) => {
@@ -34,6 +61,7 @@ export const Contro: React.FC<ControProps> = () => {
         setConnected(false);
         setEnginePort("");
         setAutoFindFailedReason("Cannot found Yakit");
+        localStorage.setItem("yakit-connect", "");
       }
     };
     ws.onopen = () => {
@@ -47,20 +75,6 @@ export const Contro: React.FC<ControProps> = () => {
 
   const connectPort = (port: number) => {
     wsc.connect(port);
-    wsc.onWSCMessage((message) => {
-      if (message.action === ActionType.STATUS) {
-        console.log("onWSCMessage", message)
-        if (message.connected === undefined) {
-          return;
-        }
-        setConnected(message.connected);
-        if (message.connected === false) {
-          setAutoFindFailedReason("Yakit WebSocket Controller Port is not right");
-        } else {
-          setAutoFindFailedReason("");
-        }
-      }
-    });
   };
 
   const safeConnected = useMemo(() => {