hardreal_time
Design a Real-time Chat UI
Interview Prep mode active
Interview answer templates and key talking points. Switch the mode in the header to change your experience.
Asked In
SlackDiscordMeta (Messenger)WhatsAppIntercomZoom
Key Challenges
- ·WebSocket lifecycle management (connect, reconnect, heartbeat)
- ·Optimistic message sends with reliable rollback on failure
- ·Typing indicators that don't spam the server
- ·Read receipts delivered without blocking the read UI
- ·Message ordering under concurrent sends and network jitter
Key Takeaways
- ✓Optimistic sends: render message immediately with status='sending', update to 'sent'/'failed' on ack.
- ✓Debounce typing events at 500ms to avoid flooding; send 'stopped_typing' after 2s of inactivity.
- ✓Use a client-generated tempId for optimistic messages; server returns stable messageId in ack.
- ✓On reconnect, fetch missed messages since lastSeenAt to fill gaps — do not rely on WS alone.
- ✓Read receipts are eventually consistent: batch updates and send lazily (Intersection Observer).