add basic dev boostrap

src/components/Controller.tsx

@@ -1,29 +1,87 @@
 import React, {useEffect} from "react";
-import {Card} from "antd";
+import {Alert, Button, Card, Form, InputNumber} from "antd";
+import {wsc} from "../network/chrome";
+import {useGetState} from "ahooks";
 
 export interface ControllerProp {
 
 }
 
 export const Controller: React.FC<ControllerProp> = (props) => {
-    const [connected, setConnected] = React.useState<boolean>(false)
-    const ref = React.useRef<HTMLAnchorElement>(null)
+    const [findingPort, setFindingPort] = React.useState<boolean>(false)
+    const [autoFindFailedReason, setAutoFindFailedReason] = React.useState<string>("")
+    const [port, setPort] = React.useState<number>()
+
+    const [connected, setConnected, getConnected] = useGetState(false);
+    const [init, setInit] = React.useState(false)
 
     useEffect(() => {
-        if (!ref) {
+        // control status
+        const updateStatus = () => {
+            wsc.getStatus()
+        }
+        updateStatus()
+        const id = setInterval(updateStatus, 1000)
+
+        wsc.listen((req: { connected: boolean }) => {
+            setConnected(req.connected)
+            setTimeout(() => {
+                setInit(true)
+            }, 500)
+        })
+        return () => {
+            clearInterval(id)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (!init) {
             return
         }
 
-        // const update = () => {
-        //     ref.current.click()
-        // }
-        // const id = setInterval(update, 10000)
-        // return () => {
-        //     clearInterval(id)
-        // }
-    }, [ref])
+        if (connected) {
+            return
+        }
 
-    return <Card size={"small"} title={"连接器"}>
-        <a href={"yakitctrl://start/"} ref={ref}>Yakit 启动</a>
+        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), 1000)
+                }
+
+                if (port + 1 > max) {
+                    setFindingPort(false)
+                    setAutoFindFailedReason("Yakit 未启动或无法监测到 WebSocket Controller 端口")
+                }
+            }
+            ws.onopen = () => {
+                setFindingPort(false)
+                setPort(port)
+                ws.close(1000, "FoundYakitWebSocketController")
+            }
+        }
+        findPort(11212, 11222)
+    }, [connected, init])
+
+    const freeze = findingPort || (!init);
+    const safeConnected = connected && init;
+
+    return <Card size={"small"} extra={safeConnected ? <Button>
+        断开链接
+    </Button> : <Button></Button>}>
+        {connected && init ? <Alert type={"success"} message={"已连接至 Yakit"}/> : <Form onSubmitCapture={e => {
+            e.preventDefault()
+
+            wsc.connect(port)
+        }}>
+            {autoFindFailedReason !== '' ? <Alert type={"error"} message={autoFindFailedReason}/> : undefined}
+            <Form.Item label={"端口"}>
+                <InputNumber disabled={freeze} value={port} onChange={e => setPort(e)}/>
+            </Form.Item>
+            <Form.Item>
+                <Button loading={freeze} htmlType={"submit"}>连接至 Yakit</Button>
+            </Form.Item>
+        </Form>}
     </Card>
 };