chat

2026-02-06 20:56:24 +01:00 · 2026-02-06 20:56:24 +01:00 · 1fb689fb8f
commit 1fb689fb8f
5 changed files with 1112 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Simple Chat</title>
+    <style>
+        body { font-family: sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
+        #chat { height: 400px; border: 1px solid #ccc; overflow-y: scroll; padding: 10px; margin-bottom: 10px; }
+        #controls { display: flex; gap: 10px; }
+        #message { flex-grow: 1; padding: 5px; }
+        button { padding: 5px 15px; }
+    </style>
+</head>
+<body>
+    <h1>Simple Chat</h1>
+    <div id="chat"></div>
+    <div id="controls">
+        <input type="text" id="message" placeholder="Type a message..." autofocus>
+        <button onclick="sendMessage()">Send</button>
+    </div>
+
+    <script>
+        const chatCheck = document.getElementById("chat");
+        const messageInput = document.getElementById("message");
+        
+        // Connect to WebSocket
+        const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        const ws = new WebSocket(`${proto}://${window.location.host}/ws`);
+
+        ws.onmessage = (event) => {
+            const div = document.createElement("div");
+            div.textContent = event.data;
+            chatCheck.appendChild(div);
+            chatCheck.scrollTop = chatCheck.scrollHeight;
+        };
+
+        ws.onopen = () => {
+            const div = document.createElement("div");
+            div.textContent = "System: Connected to chat server";
+            div.style.color = "green";
+            chatCheck.appendChild(div);
+        };
+        
+        ws.onclose = () => {
+            const div = document.createElement("div");
+            div.textContent = "System: Disconnected";
+            div.style.color = "red";
+            chatCheck.appendChild(div);
+        };
+
+        function sendMessage() {
+            const msg = messageInput.value;
+            if (msg) {
+                ws.send(msg);
+                messageInput.value = "";
+            }
+        }
+
+        messageInput.addEventListener("keypress", (e) => {
+            if (e.key === "Enter") sendMessage();
+        });
+    </script>
+</body>
+</html>