CrashCourse on basic ws

2026-01-31 07:04:01 -06:00
parent 9eb51b7e9f
commit e3f990815b
4 changed files with 199 additions and 10 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Websocket tutorial</title>
+    <style>
+        body { font-family: sans-serif; padding: 20px; background: #121212 ; color: #ffff;}
+        #log {background: #0000; padding:  10px; height: 300px; overflow-y: scroll; border: 1px solid #333;}
+        .status-on {color: #00ff00}
+        .status-off {color: #ff0000;}
+    </style>
+</head>
+<body>
+    <h1>WebSocket Broadcast Console</h1>
+    <p id="status" class="status-off">Connecting...</p>
+    
+    <form id="message-form">
+        <input 
+            id="message-input"
+            type="text"
+            placeholder="Send cargo..."
+            required    
+        />
+        <button
+        type="submit">
+        Deploy Message
+        </button>
+    </form>
+    <h3>Live Steam Logs:</h3>
+    <pre id="log"></pre>
+</body>
+<script>
+    const statusEl = document.getElementById('status')
+    const log = document.getElementById('log')
+    const input = document.getElementById('message-input')
+
+    // 1. creates the connection
+    const s = new WebSocket('ws://localhost:8081')
+
+    const appendLog = (label, message) =>{
+        const entry = `${new Date().toLocaleTimeString()} ${label}: ${message}\n`
+        log.textContent = entry + log.textContent
+    }
+
+    s.addEventListener('open', ()=>{
+        statusEl.textContent = 'CONNECTED: ws://localhost:8081'
+        statusEl.className = 'status-on'
+        appendLog('[SYSTEM]', 'Tunnel Established')
+    })
+
+    s.addEventListener('close', ()=>{
+        statusEl.textContent = 'Disconnected from: ws://localhost:8081'
+        statusEl.className = 'status-off'
+        appendLog('[SYSTEM]', 'Tunnel Disconnected')
+    })
+
+     s.addEventListener('message', (e)=>{
+        appendLog('[RECEIVED]', e.data)
+    })
+
+    document.getElementById("message-form").addEventListener('submit', (e)=>{
+        e.preventDefault()
+        if(s.readyState !== WebSocket.OPEN){
+            appendLog('[ERROR]', 'Not Connected')
+        }
+
+        const msg = input.value.trim()
+        s.send(msg)
+        appendLog('[SENT]', msg)
+        input.value = ''
+    })
+
+</script>
+</html>