1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<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.movementX, event.movementY)
mouseInfo.innerText = `MOUSE: x=${event.movementX}, y=${event.movementY}`
send({ type:'mousemove', x: event.movementX, y: event.movementY })
}
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>
|
