Real-Time Systems with WebSockets, SSE, and Long Polling

When I built the notification system for BirJob, I needed real-time job alerts: when a new job matching a user's criteria gets scraped, they should see it within seconds. I started with polling (check the API every 30 seconds). It worked, but it hammered our database with 200,000 unnecessary queries per day and created a 30-second delay users noticed. I switched to Server-Sent Events, and the database load dropped 94% while notifications became instant. The entire migration took one afternoon.

This guide is a comprehensive comparison of the three primary approaches to real-time web communication: WebSockets, Server-Sent Events (SSE), and Long Polling. Not theory — practical implementation with production considerations, performance data, and clear guidance on when to use each.

The Three Approaches at a Glance

According to the HTTP Archive 2024 report, WebSocket adoption has grown to 4.3% of all websites (up from 2.1% in 2020), while SSE usage has grown 340% year-over-year, driven largely by AI streaming responses (ChatGPT, Claude, and similar products all use SSE).

Long Polling: The Reliable Fallback

Long polling is the simplest real-time approach. The client sends a request, the server holds it open until there's new data (or a timeout), responds, and the client immediately sends another request.

Server Implementation (Node.js/Express)

// Long polling server
import express from 'express';

const app = express();
const subscribers = new Map<string, express.Response[]>();

// Subscribe to updates for a topic
app.get('/api/poll/:topic', async (req, res) => {
  const { topic } = req.params;
  const timeout = parseInt(req.query.timeout as string) || 30000;
  const lastEventId = req.query.lastEventId as string;

  // Check for immediate data
  const newEvents = await getEventsSince(topic, lastEventId);
  if (newEvents.length > 0) {
    return res.json({ events: newEvents, lastEventId: newEvents.at(-1)?.id });
  }

  // No new data — hold the connection
  if (!subscribers.has(topic)) subscribers.set(topic, []);
  subscribers.get(topic)!.push(res);

  // Set timeout
  const timer = setTimeout(() => {
    const subs = subscribers.get(topic);
    if (subs) {
      const idx = subs.indexOf(res);
      if (idx !== -1) subs.splice(idx, 1);
    }
    res.json({ events: [], lastEventId }); // No new data, reconnect
  }, timeout);

  // Clean up on client disconnect
  req.on('close', () => {
    clearTimeout(timer);
    const subs = subscribers.get(topic);
    if (subs) {
      const idx = subs.indexOf(res);
      if (idx !== -1) subs.splice(idx, 1);
    }
  });
});

// Publish an event
app.post('/api/publish/:topic', express.json(), (req, res) => {
  const { topic } = req.params;
  const event = { id: crypto.randomUUID(), data: req.body, timestamp: Date.now() };

  // Store event
  storeEvent(topic, event);

  // Notify all waiting subscribers
  const subs = subscribers.get(topic) || [];
  for (const subscriber of subs) {
    subscriber.json({ events: [event], lastEventId: event.id });
  }
  subscribers.set(topic, []); // Clear — they'll reconnect

  res.json({ published: true, subscriberCount: subs.length });
});

Client Implementation

// Long polling client
class LongPollClient {
  private lastEventId: string | null = null;
  private active = true;
  private retryDelay = 1000;

  constructor(
    private url: string,
    private onEvent: (event: any) => void,
    private onError?: (error: Error) => void,
  ) {}

  async start(): Promise<void> {
    this.active = true;
    while (this.active) {
      try {
        const params = new URLSearchParams({
          timeout: '30000',
          ...(this.lastEventId ? { lastEventId: this.lastEventId } : {}),
        });

        const response = await fetch(`${this.url}?${params}`);

        if (!response.ok) {
          throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        this.retryDelay = 1000; // Reset on success

        if (data.events?.length > 0) {
          for (const event of data.events) {
            this.onEvent(event);
          }
          this.lastEventId = data.lastEventId;
        }
      } catch (error) {
        this.onError?.(error as Error);
        await new Promise(r => setTimeout(r, this.retryDelay));
        this.retryDelay = Math.min(this.retryDelay * 2, 30000); // Exponential backoff
      }
    }
  }

  stop(): void {
    this.active = false;
  }
}

// Usage
const poller = new LongPollClient(
  '/api/poll/job-alerts',
  (event) => console.log('New job:', event.data),
  (error) => console.error('Poll error:', error),
);
poller.start();

When to use Long Polling:

• When you need broad compatibility (corporate firewalls, old proxies)
• When your infrastructure doesn't support WebSocket upgrades
• When updates are infrequent (minutes between events)
• As a fallback mechanism when SSE or WebSockets fail

Server-Sent Events: The Underrated Champion

SSE is an HTML5 standard for unidirectional server-to-client streaming over HTTP. It's criminally underrated.

Server Implementation

// SSE server with proper event formatting
import express from 'express';

const app = express();
const clients = new Map<string, Set<express.Response>>();

app.get('/api/events/:channel', (req, res) => {
  const { channel } = req.params;
  const lastEventId = req.headers['last-event-id'];

  // Set SSE headers
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive',
    'X-Accel-Buffering': 'no', // Disable Nginx buffering
  });

  // Send initial connection event
  res.write(`event: connected\ndata: ${JSON.stringify({ channel, timestamp: Date.now() })}\n\n`);

  // If client reconnected, send missed events
  if (lastEventId) {
    const missedEvents = getEventsSince(channel, lastEventId);
    for (const event of missedEvents) {
      res.write(`id: ${event.id}\nevent: ${event.type}\ndata: ${JSON.stringify(event.data)}\n\n`);
    }
  }

  // Register client
  if (!clients.has(channel)) clients.set(channel, new Set());
  clients.get(channel)!.add(res);

  // Send keepalive every 30 seconds (prevents proxy timeout)
  const keepalive = setInterval(() => {
    res.write(': keepalive\n\n'); // Comment-only line, ignored by EventSource
  }, 30000);

  // Clean up on disconnect
  req.on('close', () => {
    clearInterval(keepalive);
    clients.get(channel)?.delete(res);
  });
});

// Broadcast to all clients on a channel
function broadcast(channel: string, eventType: string, data: unknown): void {
  const channelClients = clients.get(channel);
  if (!channelClients || channelClients.size === 0) return;

  const eventId = crypto.randomUUID();
  const message = `id: ${eventId}\nevent: ${eventType}\ndata: ${JSON.stringify(data)}\n\n`;

  // Store for reconnection recovery
  storeEvent(channel, { id: eventId, type: eventType, data });

  for (const client of channelClients) {
    client.write(message);
  }
}

// Publish endpoint
app.post('/api/publish/:channel', express.json(), (req, res) => {
  const { channel } = req.params;
  broadcast(channel, req.body.type || 'message', req.body.data);
  res.json({ published: true, clientCount: clients.get(channel)?.size || 0 });
});

Client Implementation

// SSE client — remarkably simple thanks to the EventSource API
class SSEClient {
  private eventSource: EventSource | null = null;

  constructor(
    private url: string,
    private handlers: Record<string, (data: any) => void>,
  ) {}

  connect(): void {
    this.eventSource = new EventSource(this.url);

    // Built-in auto-reconnect with Last-Event-ID header!
    this.eventSource.onopen = () => {
      console.log('SSE connected');
    };

    this.eventSource.onerror = (error) => {
      console.error('SSE error — will auto-reconnect:', error);
      // Browser automatically reconnects with Last-Event-ID
    };

    // Register event handlers
    for (const [eventType, handler] of Object.entries(this.handlers)) {
      this.eventSource.addEventListener(eventType, (event: MessageEvent) => {
        try {
          const data = JSON.parse(event.data);
          handler(data);
        } catch (e) {
          console.error(`Failed to parse SSE event: ${event.data}`);
        }
      });
    }
  }

  disconnect(): void {
    this.eventSource?.close();
    this.eventSource = null;
  }
}

// Usage — crystal clear
const sse = new SSEClient('/api/events/job-alerts', {
  'new-job': (job) => {
    showNotification(`New job: ${job.title} at ${job.company}`);
    updateJobList(job);
  },
  'job-expired': (job) => {
    removeFromJobList(job.id);
  },
  'connected': (info) => {
    console.log(`Connected to channel, server time: ${info.timestamp}`);
  },
});

sse.connect();

SSE with Next.js App Router

// app/api/events/route.ts — SSE in Next.js
export const runtime = 'nodejs'; // SSE requires Node.js runtime, not Edge

export async function GET(request: Request): Promise<Response> {
  const encoder = new TextEncoder();

  const stream = new ReadableStream({
    start(controller) {
      // Send initial event
      controller.enqueue(encoder.encode(`data: ${JSON.stringify({ type: 'connected' })}\n\n`));

      // Subscribe to events
      const unsubscribe = eventBus.on('job:new', (job) => {
        controller.enqueue(
          encoder.encode(`event: new-job\ndata: ${JSON.stringify(job)}\n\n`)
        );
      });

      // Keepalive
      const keepalive = setInterval(() => {
        controller.enqueue(encoder.encode(': keepalive\n\n'));
      }, 30000);

      // Cleanup
      request.signal.addEventListener('abort', () => {
        unsubscribe();
        clearInterval(keepalive);
        controller.close();
      });
    },
  });

  return new Response(stream, {
    headers: {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive',
    },
  });
}

WebSockets: Full Bidirectional Communication

WebSockets provide full-duplex communication over a single TCP connection. They start as an HTTP request that gets "upgraded" to the WebSocket protocol.

Server Implementation (ws library)

// WebSocket server with rooms, heartbeat, and reconnection support
import { WebSocketServer, WebSocket } from 'ws';
import { createServer } from 'http';

const server = createServer();
const wss = new WebSocketServer({ server });

interface Client {
  ws: WebSocket;
  id: string;
  rooms: Set<string>;
  isAlive: boolean;
  lastSeen: number;
}

const clients = new Map<string, Client>();
const rooms = new Map<string, Set<string>>();

wss.on('connection', (ws, req) => {
  const clientId = crypto.randomUUID();
  const client: Client = {
    ws,
    id: clientId,
    rooms: new Set(),
    isAlive: true,
    lastSeen: Date.now(),
  };
  clients.set(clientId, client);

  // Send welcome message
  send(ws, { type: 'welcome', clientId, timestamp: Date.now() });

  // Handle incoming messages
  ws.on('message', (raw) => {
    try {
      const message = JSON.parse(raw.toString());
      handleMessage(client, message);
    } catch (e) {
      send(ws, { type: 'error', message: 'Invalid JSON' });
    }
  });

  // Heartbeat
  ws.on('pong', () => {
    client.isAlive = true;
    client.lastSeen = Date.now();
  });

  // Cleanup
  ws.on('close', () => {
    for (const room of client.rooms) {
      leaveRoom(client, room);
    }
    clients.delete(clientId);
  });
});

function handleMessage(client: Client, message: any): void {
  switch (message.type) {
    case 'join':
      joinRoom(client, message.room);
      break;
    case 'leave':
      leaveRoom(client, message.room);
      break;
    case 'message':
      broadcastToRoom(message.room, {
        type: 'message',
        from: client.id,
        data: message.data,
        timestamp: Date.now(),
      }, client.id);
      break;
    case 'ping':
      send(client.ws, { type: 'pong', timestamp: Date.now() });
      break;
  }
}

function joinRoom(client: Client, room: string): void {
  client.rooms.add(room);
  if (!rooms.has(room)) rooms.set(room, new Set());
  rooms.get(room)!.add(client.id);
  send(client.ws, { type: 'joined', room, memberCount: rooms.get(room)!.size });
}

function leaveRoom(client: Client, room: string): void {
  client.rooms.delete(room);
  rooms.get(room)?.delete(client.id);
  if (rooms.get(room)?.size === 0) rooms.delete(room);
}

function broadcastToRoom(room: string, message: any, excludeId?: string): void {
  const memberIds = rooms.get(room);
  if (!memberIds) return;

  const payload = JSON.stringify(message);
  for (const id of memberIds) {
    if (id === excludeId) continue;
    const client = clients.get(id);
    if (client?.ws.readyState === WebSocket.OPEN) {
      client.ws.send(payload);
    }
  }
}

function send(ws: WebSocket, data: any): void {
  if (ws.readyState === WebSocket.OPEN) {
    ws.send(JSON.stringify(data));
  }
}

// Heartbeat interval — detect dead connections
setInterval(() => {
  for (const [id, client] of clients) {
    if (!client.isAlive) {
      client.ws.terminate();
      clients.delete(id);
      continue;
    }
    client.isAlive = false;
    client.ws.ping();
  }
}, 30000);

server.listen(8080);

Client Implementation with Reconnection

// Production-ready WebSocket client
class ReconnectingWebSocket {
  private ws: WebSocket | null = null;
  private reconnectAttempts = 0;
  private maxReconnectAttempts = 10;
  private baseDelay = 1000;
  private handlers = new Map<string, ((data: any) => void)[]>();
  private messageQueue: string[] = [];

  constructor(private url: string) {}

  connect(): void {
    this.ws = new WebSocket(this.url);

    this.ws.onopen = () => {
      console.log('WebSocket connected');
      this.reconnectAttempts = 0;

      // Flush queued messages
      while (this.messageQueue.length > 0) {
        const msg = this.messageQueue.shift()!;
        this.ws!.send(msg);
      }

      this.emit('connected', {});
    };

    this.ws.onmessage = (event) => {
      try {
        const message = JSON.parse(event.data);
        this.emit(message.type, message);
      } catch (e) {
        console.error('Failed to parse WebSocket message');
      }
    };

    this.ws.onclose = (event) => {
      if (event.code !== 1000) { // 1000 = normal closure
        this.scheduleReconnect();
      }
    };

    this.ws.onerror = () => {
      // onclose will fire after onerror
    };
  }

  private scheduleReconnect(): void {
    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
      this.emit('max-reconnect-reached', {});
      return;
    }

    const delay = this.baseDelay * Math.pow(2, this.reconnectAttempts) +
      Math.random() * 1000; // Jitter
    this.reconnectAttempts++;

    console.log(`Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);
    setTimeout(() => this.connect(), delay);
  }

  send(type: string, data: any): void {
    const message = JSON.stringify({ type, data, timestamp: Date.now() });
    if (this.ws?.readyState === WebSocket.OPEN) {
      this.ws.send(message);
    } else {
      this.messageQueue.push(message); // Queue for when connection restores
    }
  }

  on(event: string, handler: (data: any) => void): () => void {
    if (!this.handlers.has(event)) this.handlers.set(event, []);
    this.handlers.get(event)!.push(handler);
    return () => {
      const handlers = this.handlers.get(event);
      if (handlers) {
        const idx = handlers.indexOf(handler);
        if (idx !== -1) handlers.splice(idx, 1);
      }
    };
  }

  private emit(event: string, data: any): void {
    for (const handler of this.handlers.get(event) || []) {
      handler(data);
    }
  }

  disconnect(): void {
    this.ws?.close(1000, 'Client disconnect');
  }
}

// Usage
const ws = new ReconnectingWebSocket('wss://api.example.com/ws');
ws.connect();

ws.on('connected', () => {
  ws.send('join', { room: 'job-alerts-baku' });
});

ws.on('message', (msg) => {
  console.log(`New message from ${msg.from}:`, msg.data);
});

Performance Benchmarks: Real Numbers

I ran benchmarks on a c5.xlarge EC2 instance (4 vCPUs, 8GB RAM) with 10,000 simultaneous connections, sending 1 message per second per client.

Key takeaway: Long polling's overhead is dramatically higher than persistent connections. For 10,000 clients, long polling consumed 4.5x more memory and 9x more CPU than WebSockets, primarily due to constant connection establishment and teardown.

Decision Matrix: Which Technology for Which Use Case

Opinionated: SSE Is the Right Default

Most teams should start with SSE, not WebSockets. Here's why:

1. 80% of "real-time" features are server-to-client only. Notifications, live updates, dashboard metrics, AI streaming — all unidirectional. WebSockets' bidirectional capability is unused overhead for these cases.

2. SSE works with existing HTTP infrastructure. Load balancers, CDNs, API gateways, authentication middleware, rate limiters — they all understand HTTP. WebSockets require upgrade support, which breaks many proxies and complicates deployment.

3. SSE has built-in reconnection with event recovery. The browser's EventSource API automatically reconnects and sends the Last-Event-ID header. With WebSockets, you build this from scratch — and you'll get it wrong the first time.

4. SSE is debuggable. Open Chrome DevTools, look at the Network tab — you can see SSE events as plain text. WebSocket frames require specialized tooling to inspect.

Use WebSockets only when you need: bidirectional communication, binary data, or sub-10ms latency. For everything else, SSE is simpler, more reliable, and easier to operate.

Action Plan: Adding Real-Time to Your App

Day 1: Evaluate

• List all features that would benefit from real-time updates
• Classify each as unidirectional (SSE) or bidirectional (WebSocket)
• Check your infrastructure: does your load balancer support WebSocket upgrade?

Day 2-3: Implement SSE

• Build a server-side event stream endpoint
• Add client-side EventSource with event handlers
• Implement event ID tracking for reconnection recovery
• Add keepalive comments to prevent proxy timeouts

Day 4-5: Production-Harden

• Add authentication to the event stream
• Implement channel/room-based routing
• Add monitoring: track connected clients, message throughput, reconnection rate
• Load test with your target concurrent connection count

Sources

• HTTP Archive — State of the Web 2024
• WHATWG — Server-Sent Events Specification
• RFC 6455 — The WebSocket Protocol
• MDN — EventSource API
• MDN — WebSocket API
• Socket.IO Documentation

I'm Ismat, and I build BirJob — Azerbaijan's job aggregator scraping 80+ sources daily.