1
0
Fork 0
mirror of https://github.com/denoland/deno.git synced 2024-11-26 16:09:27 -05:00
denoland-deno/std/examples/chat/index.html
2020-02-22 18:51:04 -05:00

76 lines
2.3 KiB
HTML

<html>
<head>
<title>ws chat example</title>
</head>
<body>
<div>
<input type="text" id="input" />
<button id="sendButton" disabled>send</button>
<button id="connectButton" disabled>connect</button>
<button id="closeButton" disabled>close</button>
</div>
<div id="status"></div>
<ul id="timeline"></div>
<script>
let ws;
function messageDom(msg) {
const div = document.createElement("li");
div.className = "message";
div.innerText = msg;
return div;
}
const timeline = document.getElementById("timeline");
const sendButton = document.getElementById("sendButton");
sendButton.onclick = send;
const closeButton =document.getElementById("closeButton");
closeButton.onclick=close;
const connectButton = document.getElementById("connectButton");
connectButton.onclick=connect;
const status = document.getElementById("status");
const input = document.getElementById("input");
function send() {
const msg = input.value;
ws.send(msg);
applyState({inputValue: ""})
}
function connect() {
if (ws) ws.close();
ws = new WebSocket("ws://0.0.0.0:8080/ws");
ws.addEventListener("open", () => {
console.log("open", ws);
applyState({connected: true});
});
ws.addEventListener("message", ({data}) => {
timeline.appendChild(messageDom(data));
});
ws.addEventListener("close", () => {
applyState({connect: false});
});
}
function close() {
ws.close();
applyState({connected: false});
}
function applyState({connected, status, inputValue}) {
if (inputValue != null) {
input.value = inputValue;
}
if(status != null) {
status.innerText = status;
}
if (connected != null) {
if (connected) {
sendButton.disabled = false;
connectButton.disabled = true;
closeButton.disabled= false;
} else {
sendButton.disabled= true;
connectButton.disabled=false;
closeButton.disabled=true;
}
}
}
connect();
</script>
</body>
</html>