61 lines
2.3 KiB
HTML
61 lines
2.3 KiB
HTML
<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> |