1 files changed, 76 insertions, 0 deletions
diff --git a/std/examples/chat/index.html b/std/examples/chat/index.html
new file mode 100644
index 000000000..b84a9f1dd
--- /dev/null
+++ b/std/examples/chat/index.html
@@ -0,0 +1,76 @@
+<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>