title WebSocket Chat Flow actor Alice actor Bob participant "Chat Server" as Server Alice->Server: WS connect Server-->Alice: Connected Bob->Server: WS connect Server-->Bob: Connected Alice->Server: join room:general Server->Bob: user:alice joined Bob->Server: message: Hello Alice! Server->Alice: message from Bob: Hello Alice! Alice->Server: message: Hey Bob! Server->Bob: message from Alice: Hey Bob! Alice->Server: WS disconnect Server->Bob: user:alice left
What this diagram shows
This sequence diagram models real-time bidirectional communication using WebSockets — the protocol behind chat apps, live notifications, multiplayer games, collaborative editors, and live dashboards. Unlike HTTP, WebSockets keep a persistent connection open, allowing the server to push messages to clients without being polled.
The diagram captures the key feature of WebSocket: server-initiated messages. When Bob sends a message, the server forwards it directly to Alice — no request from Alice needed. This is the core capability that makes real-time apps possible.
Step-by-step flow breakdown
- WS connect — both clients initiate a WebSocket handshake (HTTP Upgrade request). The server accepts and returns
Connected. - Room joining — Alice sends a
joinevent for roomgeneral. The server notifies all existing room members (Bob) that Alice joined. - Bob sends a message — a client-to-server message. The server fans it out to all other room members.
- Server pushes to Alice — a server-initiated message (no prior request from Alice). This is the key WebSocket capability absent in plain HTTP.
- Alice replies — same pattern in reverse: client → server → other clients.
- Disconnect + cleanup — when Alice disconnects, the server notifies remaining room members so UIs can update the presence list.
When to use a WebSocket sequence diagram
- Real-time feature design — decide which events flow from client-to-server vs. server-to-client before writing Socket.IO or native WS code
- Presence/typing indicators — map out the join/leave/typing event sequence
- Live dashboard architecture — show how updates are pushed from a data service to connected browsers
- Collaborative editing docs — diagram operation broadcasting and conflict resolution
- Debugging disconnects — trace the event sequence that leads to unexpected disconnects
Common variations
Typing indicators
Add Alice->Server: typing:start and Server->Bob: alice:typing between the connect and message steps. Include a timeout: Server->Bob: alice:stopped typing after a few seconds of inactivity.
Read receipts
After the server delivers a message, add Alice->Server: message:read (id=xyz) and Server->Bob: alice:read your message.
Authentication on connect
Add a step after WS connect: Alice->Server: auth token and Server-->Alice: auth ok before joining any room. The server should reject connections that don't authenticate within a timeout.
Server-Sent Events (SSE) alternative
For one-way push (server to client only — e.g. live feed, notifications), Server-Sent Events are simpler. Replace the bidirectional arrows with one-directional Server->Client pushes and a standard HTTP connection arrow from the client.
Related sequence diagram examples
Frequently asked questions
How do you diagram WebSocket communication?
Show the initial WS connect as a client-to-server arrow. After the connection, use bidirectional arrows — client-to-server for messages sent, and server-to-client for pushed messages. Both are valid arrows at any time after the handshake.
What is the difference between WebSocket and HTTP in a sequence diagram?
HTTP is request-response: every server response requires a prior client request. WebSocket is persistent and bidirectional: after connection, the server can push messages to the client at any time. This appears in a sequence diagram as server-initiated arrows (Server→Client) unprompted by a client arrow.
Should I use WebSocket or Server-Sent Events (SSE)?
Use WebSocket when you need both sides to send messages (chat, games, collaborative editing). Use SSE when only the server pushes updates to the client (live news feed, stock ticker, notification bell) — SSE is simpler and HTTP-native.
Can I edit this WebSocket diagram?
Yes — click Open in Editor. Add typing indicators, read receipts, authentication steps, or expand to multiple rooms. Export as PNG, SVG, or Mermaid. Free, no account required.