sse-websocket-streaming-expert

SSE, WebSocket & Streaming Expert

English | Bahasa Indonesia

---

English

Description

A focused guide for building real-time data push architectures. While realtime-collaboration-expert focuses on CRDTs (Yjs) for multi-player editing, this skill focuses on the transport layer: when to use Server-Sent Events (SSE) vs WebSockets vs HTTP Streaming, scaling pub/sub architectures, and streaming AI responses.

Trigger Conditions

• When building live notification systems, live sports scores, or stock tickers.
• When streaming LLM text generation responses chunk-by-chunk to the UI.
• When the user asks about "WebSockets", "Socket.IO", or "SSE".
• When implementing a chat application.

Core Architectural Guidelines

1. SSE vs WebSockets

Choose the right transport mechanism to save server resources.

• Server-Sent Events (SSE): Unidirectional (Server to Client). Uses standard HTTP. Best for live feeds, AI streaming, notifications. Handles reconnections automatically.
• WebSockets: Bidirectional. Best for chat apps, multiplayer games. Requires a persistent TCP connection and custom ping/pong keepalives.

2. Streaming AI Responses (HTTP Streaming)

For LLMs, use standard HTTP Streaming (often via the ai SDK in React/Next.js) instead of complex WebSockets.

// Next.js Route Handler Example
export async function POST(req: Request) {
  const { prompt } = await req.json();
  const stream = await myLLM.stream(prompt);
  
  return new Response(stream, {
    headers: { 'Content-Type': 'text/event-stream' },
  });
}

3. Scaling WebSockets (Pub/Sub)

A single Node.js process can handle thousands of WebSockets, but when you scale horizontally (multiple servers), clients on Server A cannot see messages from Server B.

• Redis Adapter: Use a Pub/Sub mechanism (like Redis) so when a message is published, all server instances broadcast it to their respective connected clients.
• Serverless WebSockets: In serverless environments (AWS API Gateway, Cloudflare Durable Objects), you do not hold the connection in your code. The infrastructure holds it, and calls your webhook when messages arrive.