You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
845 B
HTML
35 lines
845 B
HTML
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Flask-Sock Demo</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Flask-Sock 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");
|
||
|
|
});
|
||
|
|
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>
|