<html>
    <head>
    </head>
    <body>
        Server Port <input id="port" type="text" value="8989"></input> <button onclick="connect()">Connect</button><br>
        <div id="socketState"></div>
        <div id="mouseInfo"></div>
        <div id="keyInfo"></div>
        <br>
        <div id="frame" style="border: 2px solid; height:300"></div>
        <script>
            let portInput = document.getElementById("port")
            let mouseInfo = document.getElementById("mouseInfo")
            let ketInfo = document.getElementById("keyInfo")
            let frame = document.getElementById("frame")
            let socketState = document.getElementById("socketState")
            let socket

            frame.addEventListener('mousemove', onMouseMove)
            document.addEventListener('keydown', onKeyDown)
            document.addEventListener('keyup', onKeyUp)

            function connect() {
                socket = new WebSocket(`ws://localhost:${portInput.value}`);
                socket.onopen = _ => {
                    socketState.innerText = 'OPEN'
                }
                socket.onclose = _ => {
                    socketState.innerText = 'CLOSED'
                }
                socket.onerror = (error) => {
                    socketState.innerText = 'ERROR'
                    console.log(`ERROR: ${error}`)
                }
            }

            function send(message) {
                if (socket && socket.readyState == WebSocket.OPEN) {
                    socket.send(JSON.stringify(message))
                }
            }
            function onMouseMove(event) {
                //console.log(event.clientX, event.clientY)
                mouseInfo.innerText = `MOUSE: x=${event.clientX}, y=${event.clientY}`
                send({ type:'mousemove', x: event.clientX, y: event.clientY })
            }

            function onKeyDown(event) {
                //console.log(event)
                keyInfo.innerText = `KEYDOWN: ${event.key}`
                send({ type:'keydown', key: event.key })
            }

            function onKeyUp(event) {
                //console.log(event)
                keyInfo.innerText = `KEYUP: ${event.key}`
                send({ type:'keyup', key: event.key })
            }
        </script>
    </body>
</html>