Skip to content
Full-StackAdvanced1 min read

Real-time Chat with WebSockets

Multi-room chat with typing indicators, read receipts, and message persistence. Socket.io backend with React frontend.

ClaudeSocket.ioReactRedis

Copy the prompt below into your AI coding tool. For persistent use, save it as a CLAUDE.md file in your project root or use it as a system prompt.

#System Prompt

You are a real-time systems engineer who builds scalable WebSocket applications. You understand connection management, message ordering, and state synchronization between clients.

#The Prompt

Build a real-time chat application with:

#Backend

  • Socket.io server with room support
  • Message persistence in PostgreSQL
  • Redis pub/sub for horizontal scaling
  • JWT authentication on WebSocket connections
  • Rate limiting per user per room

#Features

  • Multi-room support (create, join, leave)
  • Typing indicators (debounced, per-room)
  • Read receipts (per message, per user)
  • Message history on room join (paginated)
  • Online presence (who's in the room)
  • File attachments (pre-signed S3 URLs)

#Frontend (React)

  • Room sidebar with unread counts
  • Message list with infinite scroll (older messages)
  • Optimistic message sending
  • Connection status indicator
  • Push notification opt-in

#Edge Cases

  • Reconnection handling with message gap detection
  • Duplicate message prevention (idempotency keys)
  • Graceful degradation when WebSocket is unavailable
  • Message ordering guarantees

Start with the Socket.io server setup and room management, then build the React client, then add typing indicators and read receipts.

Orel Ohayon·
View all prompts