blob: ea259b71fdacd8556eac3a2873d3f5a139deb18b (
plain)
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
62
63
64
65
66
|
<!doctype html>
<html>
<head>
<title>WS Test</title>
<style>
.b {
border-bottom: 1px solid black;
}
</style>
</head>
<body style='background: black; color: white'>
<div id='cons'>connected</div><br>
<button onclick='test_connection()'>Launch</button><br>
<span>Server address: </span><input id='addr'></input>
<div id='chat' style='background: rgb(20, 20, 20); padding-left: 20px; margin: 40px' />
</body>
<script>
function get_addr() {
return document.getElementById('addr').value;
}
function test_connection() {
let a = 'ws://' + get_addr();
add_text('create a new connection at "' + a + '"');
const ws = new WebSocket(a, 'tuesday');
ws.addEventListener('open', function (event) {
add_text('connection established');
toggle_connected(true);
ws.send('1230123');
});
ws.addEventListener('error', function (event) {
add_text('ws error occured: "' + event + '"');
toggle_connected(false);
});
ws.addEventListener('close', function (event) {
add_text('ws is closed now');
toggle_connected(false);
});
ws.addEventListener('message', function (event) {
add_text('got ws message: ' + event.data);
});
}
function add_text(text, color='white') {
let c = document.getElementById('chat');
let n = document.createElement('span');
n.setAttribute('class', 'b');
n.style = 'color: ' + color;
n.textContent = (new Date()).toTimeString().substring(0, 8) + '|> '+ text;
c.appendChild(n);
c.appendChild(document.createElement('br'));
}
function toggle_connected(con) {
let c = document.getElementById('cons');
if (con) {
c.style = 'background: green'
c.textContent = 'connected';
} else {
c.style = 'background: red'
c.textContent = 'not connected';
}
}
toggle_connected(false);
add_text("JS loaded");
</script>
</html>
|
