UI workflow

Scenario

Real-Time Chat

A single shared chat room over a real WebSocket connection — open two tabs and watch messages and a typing indicator sync between them instantly. True bidirectional interception, not Server-Sent Events.

How this works

  • · A real WebSocket connection to /ws/chat — open two tabs (or two browsers) and messages plus typing indicators sync instantly between them, genuine bidirectional push rather than one-way streaming.
  • · There's no persistence at all — messages exist only while connections are open. Close every tab and reopen, and the room is empty again.
  • · The dev server and the production server share the exact same WebSocket-handling code, so the connection behaves identically in both.

What you'll practice

  • A real WebSocket connection (ws://), not Server-Sent Events — bidirectional, and the connection itself has state (connecting/open/closed) to assert on
  • Multi-tab/multi-session sync: open this page in two tabs and messages sent in one appear in the other instantly
  • A typing indicator that appears and disappears based on events from another connection, not a local timer
  • This is a single shared room — like Two-Role Approval Workflow, state here is NOT cookie-isolated per visitor
  1. 1 Chat Room

Open the Chat Room in two browser tabs (or a normal + private window) to see messages sync between them live.