initial commit

2026-07-24 21:38:32 +01:00
commit fb91a40032
10 changed files with 540 additions and 0 deletions
@@ -0,0 +1,59 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: monospace;
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    background: #1a1a2e;
+    color: #e0e0e0;
+}
+
+#messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1rem;
+}
+
+.message {
+    padding: 0.4rem 0.6rem;
+    margin-bottom: 0.3rem;
+    background: #16213e;
+    border-radius: 4px;
+    word-break: break-word;
+}
+
+#publish-form {
+    display: flex;
+    padding: 1rem;
+    background: #0f0f23;
+    border-top: 1px solid #333;
+}
+
+#message-input {
+    flex: 1;
+    padding: 0.5rem;
+    background: #16213e;
+    border: 1px solid #333;
+    border-radius: 4px;
+    color: #e0e0e0;
+    font-family: monospace;
+}
+
+#publish-form button {
+    margin-left: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: #6d4aff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#publish-form button:hover {
+    background: #5a3acc;
+}
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WS-Chat</title>
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <div id="message-log"></div>
+
+    <form id="publish-form">
+        <input type="text" id="message-input" placeholder="Type a message..." autocomplete="off" autofocus>
+        <button type="submit">Send</button>
+    </form>
+
+    <script src="index.js"></script>
+</body>
+</html>
@@ -0,0 +1,73 @@
+(() => {
+  let expectingMessage = false
+
+  function dial() {
+    const conn = new WebSocket(`ws://${location.host}/ws/subscribe`)
+
+    conn.addEventListener('close', ev => {
+      appendLog(`WebSocket Disconnected code: ${ev.code}, reason: ${ev.reason}`, true)
+      if (ev.code !== 1001) {
+        appendLog('Reconnecting in 1s', true)
+        setTimeout(dial, 1000)
+      }
+    })
+
+    conn.addEventListener('open', ev => {
+      console.info('WebSocket connected')
+    })
+
+    conn.addEventListener('message', ev => {
+      if (typeof ev.data !== 'string') {
+        console.error('unexpected message type', typeof ev.data)
+        return
+      }
+      const p = appendLog(ev.data)
+      if (expectingMessage) {
+        p.scrollIntoView()
+        expectingMessage = false
+      }
+    })
+  }
+
+  dial()
+
+  const messageLog = document.getElementById('message-log')
+  const publishForm = document.getElementById('publish-form')
+  const messageInput = document.getElementById('message-input')
+
+  function appendLog(text, error) {
+    const p = document.createElement('p')
+    p.innerText = `${new Date().toLocaleTimeString()}: ${text}`
+    if (error) {
+      p.style.color = 'red'
+      p.style.fontStyle = 'bold'
+    }
+    messageLog.append(p)
+    return p
+  }
+
+  appendLog('Submit a message to get started!')
+
+  publishForm.onsubmit = async ev => {
+    ev.preventDefault()
+
+    const msg = messageInput.value
+    if (msg === '') {
+      return
+    }
+    messageInput.value = ''
+
+    expectingMessage = true
+    try {
+      const resp = await fetch('/ws/publish', {
+        method: 'POST',
+        body: msg,
+      })
+      if (resp.status !== 202) {
+        throw new Error(`Unexpected HTTP Status ${resp.status} ${resp.statusText}`)
+      }
+    } catch (err) {
+      appendLog(`Publish failed: ${err.message}`, true)
+    }
+  }
+})()