Real-Time Features with WebSockets and Server-Sent Events

Chat, notifications, live updates—real-time features are expected now. But WebSockets aren't always the answer. Here's when to use WebSockets, SSE, or even polling.

Real-Time Primer: Push vs Pull

Pull (polling): Client asks server repeatedly. Simple but inefficient. Push (WebSockets/SSE): Server sends updates when they happen. Efficient but more complex.

WebSockets: Full Duplex

Bidirectional communication—both client and server can send messages anytime. Best for: chat, gaming, collaborative editing.

// Client
const ws = new WebSocket('wss://api.example.com/ws');
ws.onmessage = (event) => handleMessage(JSON.parse(event.data));
ws.send(JSON.stringify({ type: 'chat', message: 'Hello' }));

Server-Sent Events: Simpler Often Better

Unidirectional—server pushes to client. Built on HTTP, works through proxies, auto-reconnects. Best for: notifications, feeds, live updates.

// Server (Next.js API route)
export async function GET() {
  const stream = new ReadableStream({
    start(controller) {
      const send = (data) => {
        controller.enqueue(\`data: \${JSON.stringify(data)}\n\n\`);
      };
      // Subscribe to updates, call send() when data arrives
    }
  });
  
  return new Response(stream, {
    headers: { 'Content-Type': 'text/event-stream' }
  });
}

Scaling Real-Time

Connection management becomes critical at scale. Use connection pooling, implement heartbeats, handle reconnection gracefully, and consider Redis pub/sub for multi-server setups.

Decision Framework

Need bidirectional? → WebSockets. Server-to-client only? → SSE. Low update frequency? → Polling might be fine.

Real-time adds complexity. Start with the simplest solution that meets your needs, and add complexity only when proven necessary.