summaryrefslogtreecommitdiff
path: root/std/examples/chat/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'std/examples/chat/index.html')
-rw-r--r--std/examples/chat/index.html81
1 files changed, 0 insertions, 81 deletions
diff --git a/std/examples/chat/index.html b/std/examples/chat/index.html
deleted file mode 100644
index 2daf288b3..000000000
--- a/std/examples/chat/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <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"></ul>
- <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");
- input.addEventListener("keydown", keyDownEvent);
- function send() {
- const msg = input.value;
- ws.send(msg);
- applyState({inputValue: ""});
- }
- function keyDownEvent(e) {
- if (e.keyCode === 13) return send();
- }
- function connect() {
- if (ws) ws.close();
- ws = new WebSocket(`ws://${location.host}/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>