37 lines
1.0 KiB
HTML
37 lines
1.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Microdot WebSocket Demo</title>
|
|
<meta charset="UTF-8">
|
|
</head>
|
|
<body>
|
|
<h1>Microdot WebSocket Demo</h1>
|
|
<div id="log"></div>
|
|
<br>
|
|
<form id="form">
|
|
<label for="text">Input: </label>
|
|
<input type="text" id="text" autofocus>
|
|
</form>
|
|
<script>
|
|
const log = (text, color) => {
|
|
document.getElementById('log').innerHTML += `<span style="color: ${color}">${text}</span><br>`;
|
|
};
|
|
|
|
const socket = new WebSocket('ws://' + location.host + '/echo');
|
|
socket.addEventListener('message', ev => {
|
|
log('<<< ' + ev.data, 'blue');
|
|
});
|
|
socket.addEventListener('close', ev => {
|
|
log('<<< closed');
|
|
});
|
|
document.getElementById('form').onsubmit = ev => {
|
|
ev.preventDefault();
|
|
const textField = document.getElementById('text');
|
|
log('>>> ' + textField.value, 'red');
|
|
socket.send(textField.value);
|
|
textField.value = '';
|
|
};
|
|
</script>
|
|
</body>
|
|
</html>
|