add 1 on 1 chat

static/index.js

@@ -1,22 +1,54 @@
 (() => {
+  let ws = null
   let expectingMessage = false
+  const currentUserEl = document.getElementById('username')
+  const loginBtn = document.getElementById('login-btn')
+  const messageLog = document.getElementById('message-log')
+  const publishForm = document.getElementById('publish-form')
+  const recipientSelect = document.getElementById('recipient-select')
+  const messageInput = document.getElementById('message-input')
+  const onlineList = document.getElementById('online-list')
 
-  function dial() {
-    const conn = new WebSocket(`ws://${location.host}/ws/subscribe`)
+  // Auto-fill username from URL parameter
+  const urlParams = new URLSearchParams(window.location.search)
+  const urlUser = urlParams.get('user')
+  if (urlUser) {
+    currentUserEl.value = urlUser
+  }
 
-    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)
-      }
-    })
+  // Login button handler
+  loginBtn.addEventListener('click', () => {
+    const username = currentUserEl.value.trim()
+    if (!username) {
+      appendLog('Please enter a username', true)
+      return
+    }
 
-    conn.addEventListener('open', ev => {
+    // Connect to WebSocket with username
+    connect(username)
+
+    // Show publish form, hide login
+    loginBtn.style.display = 'none'
+    currentUserEl.style.display = 'none'
+    publishForm.style.display = 'flex'
+    messageInput.disabled = false
+    messageInput.focus()
+
+    appendLog(`Joined as ${username}`)
+  })
+
+  function connect(username) {
+    const encodedUser = encodeURIComponent(username)
+    ws = new WebSocket(`ws://${location.host}/ws/subscribe?user=${encodedUser}`)
+
+    ws.addEventListener('open', () => {
       console.info('WebSocket connected')
+      refreshUsers()
+      // Refresh users every 5 seconds
+      setInterval(refreshUsers, 5000)
     })
 
-    conn.addEventListener('message', ev => {
+    ws.addEventListener('message', (ev) => {
       if (typeof ev.data !== 'string') {
         console.error('unexpected message type', typeof ev.data)
         return
@@ -27,47 +59,84 @@
         expectingMessage = false
       }
     })
+
+    ws.addEventListener('close', (ev) => {
+      appendLog(`Disconnected (code: ${ev.code})`, true)
+      if (ev.code !== 1001) {
+        appendLog('Reconnecting...', true)
+        setTimeout(() => connect(username), 2000)
+      }
+    })
+
+    ws.addEventListener('error', (err) => {
+      console.error('WebSocket error:', err)
+    })
   }
 
-  dial()
+  function refreshUsers() {
+    fetch('/ws/users')
+      .then(r => r.json())
+      .then(users => {
+        onlineList.textContent = users.join(', ') || 'none'
 
-  const messageLog = document.getElementById('message-log')
-  const publishForm = document.getElementById('publish-form')
-  const messageInput = document.getElementById('message-input')
+        // Update recipient dropdown
+        recipientSelect.innerHTML = ''
+        if (users.length > 0) {
+          users.forEach(user => {
+            const opt = document.createElement('option')
+            opt.value = user
+            opt.textContent = user
+            recipientSelect.appendChild(opt)
+          })
+        }
+      })
+      .catch(err => {
+        console.error('Failed to refresh users:', err)
+      })
+  }
 
-  function appendLog(text, error) {
+  function appendLog(text, error = false) {
     const p = document.createElement('p')
-    p.innerText = `${new Date().toLocaleTimeString()}: ${text}`
+    const time = new Date().toLocaleTimeString()
+    p.innerText = `[${time}] ${text}`
     if (error) {
-      p.style.color = 'red'
-      p.style.fontStyle = 'bold'
+      p.style.color = '#ff6b6b'
     }
     messageLog.append(p)
     return p
   }
 
-  appendLog('Submit a message to get started!')
-
-  publishForm.onsubmit = async ev => {
+  // Submit message
+  publishForm.onsubmit = async (ev) => {
     ev.preventDefault()
 
-    const msg = messageInput.value
-    if (msg === '') {
+    const recipient = recipientSelect.value.trim()
+    const msg = messageInput.value.trim()
+
+    if (!recipient || !msg) {
+      appendLog('Please select a recipient and enter a message', true)
       return
     }
-    messageInput.value = ''
 
+    messageInput.value = ''
     expectingMessage = true
+
     try {
+      const payload = JSON.stringify({ to: recipient, message: msg })
       const resp = await fetch('/ws/publish', {
         method: 'POST',
-        body: msg,
+        headers: { 'Content-Type': 'application/json' },
+        body: payload,
       })
+
       if (resp.status !== 202) {
-        throw new Error(`Unexpected HTTP Status ${resp.status} ${resp.statusText}`)
+        const text = await resp.text()
+        throw new Error(`Failed: ${text}`)
       }
     } catch (err) {
-      appendLog(`Publish failed: ${err.message}`, true)
+      appendLog(`Send failed: ${err.message}`, true)
     }
   }
+
+  appendLog('Enter your username to join the chat')
 })()