1 files changed, 65 insertions, 0 deletions
diff --git a/crates/messenger_server/chat.html b/crates/messenger_server/chat.html
new file mode 100644
index 0000000..0347cc1
--- /dev/null
+++ b/crates/messenger_server/chat.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>WebSocket Chat</title>
+    </head>
+    <body>
+        <h1>WebSocket Chat Example</h1>
+
+        <input id="username" style="display:block; width:100px; box-sizing: border-box" type="text" placeholder="username">
+        <button id="join-chat" type="button">Join Chat</button>
+        <textarea id="chat" style="display:block; width:600px; height:400px; box-sizing: border-box" cols="30" rows="10"></textarea>
+        <input id="input" style="display:block; width:600px; box-sizing: border-box" type="text" placeholder="chat">
+
+        <script>
+            const username = document.querySelector("#username");
+            const join_btn = document.querySelector("#join-chat");
+            const textarea = document.querySelector("#chat");
+            const input = document.querySelector("#input");
+
+            join_btn.addEventListener("click", function(e) {
+                this.disabled = true;
+
+                const websocket = new WebSocket("ws://localhost:3000/websocket");
+
+                websocket.onopen = function() {
+                    console.log("connection opened");
+                    const data = { setUsername: username.value };
+                    websocket.send(JSON.stringify(data));
+                }
+
+                const btn = this;
+
+                websocket.onclose = function() {
+                    console.log("connection closed");
+                    btn.disabled = false;
+                }
+
+                websocket.onmessage = function(e) {
+                    console.log("received message: "+e.data);
+					console.log(JSON.parse(e.data));
+
+					const data = extractData(e.data);
+                    textarea.value += data+"\r\n";
+                }
+
+                input.onkeydown = function(e) {
+                    if (e.key == "Enter") {
+                        const data = {
+                            userMessage: input.value,
+                        }
+                        websocket.send(JSON.stringify(data));
+                        input.value = "";
+                    }
+                }
+            });
+
+			function extractData(data) {
+				const d = JSON.parse(data);
+
+				return data;
+			}
+        </script>
+    </body>
+</html>
+\ No newline at end of file