Real-time features transform static applications into dynamic experiences. Live notifications, collaborative editing, real-time dashboards—users expect instant updates. AI can help you implement these features correctly from the start.
Choosing the Right Technology#
WebSockets#
Full-duplex communication for bidirectional, low-latency needs:
Loading code block...
Best for: Chat, gaming, collaborative editing, trading platforms
Server-Sent Events (SSE)#
One-way server-to-client streaming:
Loading code block...
Best for: Notifications, feeds, dashboards, progress updates
Long Polling#
Fallback for restricted environments:
Loading code block...
Best for: When WebSockets and SSE aren't available
Pattern 1: Real-Time Notifications#
Design a notification system with these requirements:
Features:
- Push notifications to online users
- Persist unread notifications for offline users
- Support notification types: mention, like, follow, system
- Allow muting/preferences per type
Tech stack:
- Node.js backend
- Redis for pub/sub
- PostgreSQL for persistence
- React frontend
Include:
- WebSocket server implementation
- Notification service
- Frontend hook for consuming notifications
Pattern 2: Live Collaboration#
Implement collaborative text editing:
Requirements:
- Multiple users edit same document
- Real-time cursor positions
- Conflict resolution for simultaneous edits
- Offline support with sync
Approaches to evaluate:
- Operational Transformation (OT)
- Conflict-free Replicated Data Types (CRDTs)
Provide architecture and key implementation details.
Pattern 3: Real-Time Dashboard#
Loading code block...
Connection Management#
Reconnection Logic#
Implement robust WebSocket reconnection:
Requirements:
- Exponential backoff
- Maximum retry limit
- Connection state tracking
- Resubscribe on reconnect
- Handle network changes (online/offline events)
```typescript
class ReconnectingWebSocket {
// Implementation needed
}
Provide complete implementation.
### Heartbeat/Ping-Pong
```typescript
class WebSocketClient {
private ws: WebSocket;
private heartbeatInterval: NodeJS.Timer;
private heartbeatTimeout: NodeJS.Timer;
connect() {
this.ws = new WebSocket(this.url);
this.ws.onopen = () => {
this.startHeartbeat();
};
this.ws.onmessage = (event) => {
if (event.data === 'pong') {
this.resetHeartbeatTimeout();
return;
}
this.handleMessage(event);
};
}
private startHeartbeat() {
this.heartbeatInterval = setInterval(() => {
this.ws.send('ping');
this.heartbeatTimeout = setTimeout(() => {
this.ws.close();
this.reconnect();
}, 5000);
}, 30000);
}
private resetHeartbeatTimeout() {
clearTimeout(this.heartbeatTimeout);
}
}
Scaling Real-Time Systems#
Horizontal Scaling with Redis#
Design a scalable WebSocket architecture:
Requirements:
- 100K concurrent connections
- Multiple server instances behind load balancer
- Message delivery to correct server/connection
- Pub/sub for broadcast messages
Architecture:
- Sticky sessions or Redis for connection registry
- Redis pub/sub for cross-server messaging
- Room/channel abstraction
Provide implementation with Socket.io and Redis adapter.
Connection Distribution#
┌─────────────────────────────────────────────┐
│ Load Balancer │
│ (sticky sessions or L4) │
└─────────────────┬───────────────────────────┘
│
┌─────────────┼─────────────┐
▼ ▼ ▼
┌───────┐ ┌───────┐ ┌───────┐
│ WS 1 │ │ WS 2 │ │ WS 3 │
│ 33K │ │ 33K │ │ 33K │
└───┬───┘ └───┬───┘ └───┬───┘
│ │ │
└────────────┼────────────┘
▼
┌───────────┐
│ Redis │
│ Pub/Sub │
└───────────┘
Security Considerations#
Authentication#
Implement secure WebSocket authentication:
Options:
1. Token in connection URL (risky - logged)
2. Token in first message (delays)
3. Cookie-based (requires same origin)
4. Token in header (not always possible)
Recommend approach for:
- Browser clients
- Mobile clients
- Server-to-server
Include token refresh handling.
Rate Limiting#
Loading code block...
Testing Real-Time Features#
Unit Testing#
Generate tests for this WebSocket handler:
```typescript
class ChatHandler {
async handleMessage(socket: Socket, message: ChatMessage) {
// Validate message
// Store in database
// Broadcast to room
// Send delivery confirmation
}
}
Include tests for:
- Message validation
- Database errors
- Broadcast failures
- Concurrent messages
### Load Testing
Design a load test for WebSocket server:
Target:
- 10K concurrent connections
- 100 messages/second per connection
- 99th percentile latency < 100ms
Tools: Artillery, k6, or custom
Provide:
- Test scenario
- Metrics to collect
- Success criteria
## Frontend Patterns
### React Hook for WebSocket
```typescript
function useWebSocket<T>(url: string, options: WebSocketOptions = {}) {
const [status, setStatus] = useState<'connecting' | 'connected' | 'disconnected'>('connecting');
const [lastMessage, setLastMessage] = useState<T | null>(null);
const wsRef = useRef<WebSocket | null>(null);
const send = useCallback((data: unknown) => {
if (wsRef.current?.readyState === WebSocket.OPEN) {
wsRef.current.send(JSON.stringify(data));
}
}, []);
useEffect(() => {
const ws = new WebSocket(url);
wsRef.current = ws;
ws.onopen = () => setStatus('connected');
ws.onclose = () => setStatus('disconnected');
ws.onmessage = (e) => setLastMessage(JSON.parse(e.data));
return () => ws.close();
}, [url]);
return { status, lastMessage, send };
}
Optimistic Updates#
Loading code block...
Conclusion#
Real-time features add complexity but transform user experience. With proper patterns for connection management, scaling, and security, you can build reliable real-time systems.
AI assists at every step—choosing technologies, implementing patterns, handling edge cases, and testing under load. Start with simple SSE for one-way updates, graduate to WebSockets when you need bidirectional communication, and scale with Redis when you outgrow a single server.