Create WebSocket Server

- Created a WebSocket server with connection handling and message broadcasting - Added frontend files including HTML, TypeScript, and CSS for a WebSocket test client - Configured package.json for both server and frontend with necessary scripts and dependencies - Introduced Prettier configuration for code formatting - Established a basic structure for handling WebSocket connections and messages
2025-09-05 23:44:28 -04:00
parent 7733ef2488
commit d8fe4a9dc6
23 changed files with 2180 additions and 39 deletions
--- a/server/public/test-page.html
+++ b/server/public/test-page.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>WebSocket Test</title>
+    <style>
+        body { font-family: Arial, sans-serif; margin: 20px; }
+        #messages { border: 1px solid #ccc; height: 300px; overflow-y: scroll; padding: 10px; margin: 10px 0; }
+        #input { width: 70%; padding: 5px; }
+        button { padding: 5px 10px; margin-left: 5px; }
+        .status { padding: 5px; margin: 5px 0; border-radius: 3px; }
+        .connected { background-color: #d4edda; color: #155724; }
+        .disconnected { background-color: #f8d7da; color: #721c24; }
+    </style>
+</head>
+<body>
+    <h1>WebSocket Test Client</h1>
+    <div id="status" class="status disconnected">Disconnected</div>
+    <div id="messages"></div>
+    <input type="text" id="input" placeholder="Type a message..." disabled>
+    <button id="send" disabled>Send</button>
+    <button id="connect">Connect</button>
+    <button id="disconnect" disabled>Disconnect</button>
+
+    <script>
+        let ws = null;
+        const status = document.getElementById('status');
+        const messages = document.getElementById('messages');
+        const input = document.getElementById('input');
+        const sendBtn = document.getElementById('send');
+        const connectBtn = document.getElementById('connect');
+        const disconnectBtn = document.getElementById('disconnect');
+
+        function addMessage(message) {
+            const div = document.createElement('div');
+            div.textContent = new Date().toLocaleTimeString() + ': ' + message;
+            messages.appendChild(div);
+            messages.scrollTop = messages.scrollHeight;
+        }
+
+        function updateStatus(connected) {
+            if (connected) {
+                status.textContent = 'Connected';
+                status.className = 'status connected';
+                input.disabled = false;
+                sendBtn.disabled = false;
+                connectBtn.disabled = true;
+                disconnectBtn.disabled = false;
+            } else {
+                status.textContent = 'Disconnected';
+                status.className = 'status disconnected';
+                input.disabled = true;
+                sendBtn.disabled = true;
+                connectBtn.disabled = false;
+                disconnectBtn.disabled = true;
+            }
+        }
+
+        connectBtn.onclick = function() {
+            ws = new WebSocket('ws://localhost:3000');
+            
+            ws.onopen = function() {
+                addMessage('Connected to WebSocket server');
+                updateStatus(true);
+            };
+            
+            ws.onmessage = function(event) {
+                addMessage('Received: ' + event.data);
+            };
+            
+            ws.onclose = function() {
+                addMessage('Disconnected from WebSocket server');
+                updateStatus(false);
+            };
+            
+            ws.onerror = function(error) {
+                addMessage('Error: ' + error);
+            };
+        };
+
+        disconnectBtn.onclick = function() {
+            if (ws) {
+                ws.close();
+            }
+        };
+
+        sendBtn.onclick = function() {
+            if (ws && input.value) {
+                ws.send(input.value);
+                addMessage('Sent: ' + input.value);
+                input.value = '';
+            }
+        };
+
+        input.onkeypress = function(e) {
+            if (e.key === 'Enter') {
+                sendBtn.click();
+            }
+        };
+    </script>
+</body>
+</html>