Chapter 52: WebSockets in HTML5

Building a Real-Time Collaborative Chat Room UI

**Part 11: HTML5 APIs Part 2** — Chapter 52: WebSockets in HTML

LEARNING OBJECTIVES ⌵

Construct an accessible, responsive real-time chat interface with HTML5 and WebSockets.
Manage user presence (online/offline indicators), typing debouncing, and message delivery receipts.
Implement smart automatic scrolling with user scroll-lock preservation.
Ensure WCAG 2.2 accessibility with aria-live="polite" dynamic message regions.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story

A real-time chat application is a digital conversation circle. When someone starts speaking, everyone in the circle sees visual feedback (typing indicator). When a message is sent, it is broadcast to all participants instantly.

Key to an enterprise chat experience is smart viewport preservation: if the user is reviewing message history, new messages should not jerk the scroll position away!

💻 Interactive Code Playground

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Real-Time WebSocket Chat</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #0f172a; color: #f8fafc; margin: 0; padding: 2rem; display: flex; justify-content: center; }
    .chat-container { width: 100%; max-width: 500px; background: #1e293b; border-radius: 12px; display: flex; flex-direction: column; height: 500px; }
    .chat-header { padding: 1rem; border-bottom: 1px solid #334155; font-weight: bold; display: flex; justify-content: space-between; }
    .messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
    .msg { padding: 0.5rem 0.75rem; border-radius: 8px; max-width: 80%; }
    .msg.self { align-self: flex-end; background: #3b82f6; color: #fff; }
    .msg.other { align-self: flex-start; background: #334155; }
    .chat-form { display: flex; padding: 1rem; gap: 0.5rem; border-top: 1px solid #334155; }
    .chat-input { flex: 1; padding: 0.5rem; border-radius: 6px; border: 1px solid #475569; background: #0f172a; color: #fff; }
  </style>
</head>
<body>
  <main class="chat-container">
    <div class="chat-header">
      <span>💬 Team Chat</span>
      <span id="conn-pill" style="color: #10b981;">● Connected</span>
    </div>
    <div class="messages" id="messages" role="log" aria-live="polite"></div>
    <form class="chat-form" id="chat-form">
      <input type="text" id="msg-input" class="chat-input" placeholder="Type a message..." autocomplete="off" required>
      <button type="submit" style="padding: 0.5rem 1rem; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer;">Send</button>
    </form>
  </main>

form.addEventListener('submit', (e) => {
      e.preventDefault();
      const val = input.value.trim();
      if (!val) return;
      appendMessage(val, true);
      input.value = '';
    });
  </script>
</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

📌 Key Takeaways

Use role="log" and aria-live="polite" on the message list container to ensure screen reader users receive new message announcements.
Calculate scrollHeight - clientHeight <= scrollTop + threshold before scrolling to avoid breaking user scroll reading positions.
--

❓ Knowledge Check

1. Which of the following is correct?

A) - Use role="log" and aria-live="polite" on the message list container to ensure screen reader users receive new message announcements. B) The opposite of the above statement is true.

2. Which of the following is correct?

A) - Calculate scrollHeight - clientHeight <= scrollTop + threshold before scrolling to avoid breaking user scroll reading positions. B) The opposite of the above statement is true.

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story

💻 Interactive Code Playground

📌 Key Takeaways

❓ Knowledge Check