Add Real-Time Presence Indicators to a Chat App with WebSockets

About this workflow

A step-by-step flow for implementing real-time online, offline, and typing presence in a chat app using WebSockets, including backend presence tracking, frontend updates, reconnect handling, and verification.

What happens when you run it

1. 1
   Establish where WebSocket connections, user identity, and chat participants already exist so presence can be added without breaking the app.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-1-inspect-the-existin on Claude Sonnet 4.6
2. 2
   Create a reliable event schema and in-memory or persistent tracking model before implementation.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-2-define-the-presence on Claude Sonnet 4.6
3. 3
   Ensure the backend can identify users on socket connect and maintain a real presence registry.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-3-implement-authentic on Claude Sonnet 4.6
4. 4
   Send online and offline updates only to users who should see them.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-4-broadcast-presence- on Claude Sonnet 4.6
5. 5
   Ensure the UI has the correct presence map when the chat screen first loads and stays updated from socket events.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-5-add-initial-presenc on Claude Sonnet 4.6
6. 6
   Display presence in conversation headers, user lists, or message panes using the live presence state.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-6-render-presence-ind on Claude Sonnet 4.6
7. 7
   Add real-time typing state that appears only in the relevant conversation and clears correctly.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-7-implement-conversat on Claude Sonnet 4.6
8. 8
   Make presence resilient during refreshes, temporary network drops, and multi-tab usage.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-8-handle-reconnects-s on Claude Sonnet 4.6
9. 9
   Verify that presence is actually driven by backend socket events across separate clients.

   Runs flow-add-real-time-presence-indicators-websockets-chat-app-9-test-with-two-or-mo on Claude Sonnet 4.6
10. 10
    Resolve mismatches, remove temporary hacks, and leave a maintainable presence system.

    Runs flow-add-real-time-presence-indicators-websockets-chat-app-10-fix-discovered-iss on Claude Sonnet 4.6

Best for

• •Recurring tasks you currently copy-paste between tools.
• •When a single prompt isn't enough — you need a chain where output(n) feeds prompt(n+1).
• •Fork and adapt if your inputs differ materially from the author's use case.

Models used