1<html>
2    <head>
3    </head>
4    <body>
5        Server Port <input id="port" type="text" value="8989"></input> <button onclick="connect()">Connect</button><br>
6        <div id="socketState"></div>
7        <div id="mouseInfo"></div>
8        <div id="keyInfo"></div>
9        <br>
10        <div id="frame" style="border: 2px solid; height:300"></div>
11        <script>
12            let portInput = document.getElementById("port")
13            let mouseInfo = document.getElementById("mouseInfo")
14            let ketInfo = document.getElementById("keyInfo")
15            let frame = document.getElementById("frame")
16            let socketState = document.getElementById("socketState")
17            let socket
18
19            frame.addEventListener('mousemove', onMouseMove)
20            document.addEventListener('keydown', onKeyDown)
21            document.addEventListener('keyup', onKeyUp)
22
23            function connect() {
24                socket = new WebSocket(`ws://localhost:${portInput.value}`);
25                socket.onopen = _ => {
26                    socketState.innerText = 'OPEN'
27                }
28                socket.onclose = _ => {
29                    socketState.innerText = 'CLOSED'
30                }
31                socket.onerror = (error) => {
32                    socketState.innerText = 'ERROR'
33                    console.log(`ERROR: ${error}`)
34                }
35            }
36
37            function send(message) {
38                if (socket && socket.readyState == WebSocket.OPEN) {
39                    socket.send(JSON.stringify(message))
40                }
41            }
42            function onMouseMove(event) {
43                //console.log(event.movementX, event.movementY)
44                mouseInfo.innerText = `MOUSE: x=${event.movementX}, y=${event.movementY}`
45                send({ type:'mousemove', x: event.movementX, y: event.movementY })
46            }
47
48            function onKeyDown(event) {
49                //console.log(event)
50                keyInfo.innerText = `KEYDOWN: ${event.key}`
51                send({ type:'keydown', key: event.key })
52            }
53
54            function onKeyUp(event) {
55                //console.log(event)
56                keyInfo.innerText = `KEYUP: ${event.key}`
57                send({ type:'keyup', key: event.key })
58            }
59        </script>
60    </body>
61</html>
62