diff options
| author | Sophie Forrest <git@sophieforrest.com> | 2024-08-30 23:13:20 +1200 |
|---|---|---|
| committer | Sophie Forrest <git@sophieforrest.com> | 2024-08-30 23:13:44 +1200 |
| commit | e3cb82a3b33bd2a2e49c58ce18d1258fb505869e (patch) | |
| tree | 2375279182fb4f90f5c28560a08cda90591f608b /crates/messenger_server/chat.html | |
Diffstat (limited to '')
| -rw-r--r-- | crates/messenger_server/chat.html | 65 |
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 |