WebSocket vs SSE vs Long Polling: Real-Time JSON Guide 2026

import { WebSocketServer } from 'ws';
import http from 'http';

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

// Track connected clients with metadata
const clients = new Map(); // ws → { userId, roomId }

wss.on('connection', (ws, req) => {
  const userId = extractUserId(req); // parse from query param or cookie
  clients.set(ws, { userId });

  // Send welcome message immediately
  ws.send(JSON.stringify({ type: 'connected', userId, timestamp: new Date().toISOString() }));

  ws.on('message', (rawData) => {
    try {
      const message = JSON.parse(rawData.toString());

      if (message.type === 'chat') {
        // Broadcast to all clients in the same room
        const sender = clients.get(ws);
        const payload = JSON.stringify({
          type:      'chat',
          from:      sender.userId,
          text:      message.text,
          timestamp: new Date().toISOString(),
        });

        wss.clients.forEach((client) => {
          if (client !== ws && client.readyState === 1 /* OPEN */) {
            client.send(payload);
          }
        });
      }
    } catch {
      ws.send(JSON.stringify({ type: 'error', message: 'Invalid JSON message' }));
    }
  });

  ws.on('close', () => clients.delete(ws));
  ws.on('error', (err) => console.error('WS error:', err));
});

server.listen(3001, () => console.log('WebSocket server on :3001'));

import { useEffect, useRef, useCallback, useState } from 'react';

function useWebSocket(url) {
  const wsRef        = useRef(null);
  const [messages, setMessages] = useState([]);
  const [status, setStatus]     = useState('connecting');

  const connect = useCallback(() => {
    const ws = new WebSocket(url);
    wsRef.current = ws;

    ws.onopen    = ()   => setStatus('connected');
    ws.onclose   = ()   => {
      setStatus('disconnected');
      setTimeout(connect, 3000); // reconnect after 3s
    };
    ws.onerror   = ()   => setStatus('error');
    ws.onmessage = (e)  => {
      const data = JSON.parse(e.data);
      setMessages((prev) => [...prev, data]);
    };
  }, [url]);

  useEffect(() => {
    connect();
    return () => wsRef.current?.close();
  }, [connect]);

  const send = useCallback((data) => {
    if (wsRef.current?.readyState === WebSocket.OPEN) {
      wsRef.current.send(JSON.stringify(data));
    }
  }, []);

  return { messages, status, send };
}

import express from 'express';
const app = express();

// In-memory pub/sub (use Redis in production for multi-instance)
const subscribers = new Set();

// ── SSE endpoint — one persistent HTTP connection per client ───────────────
app.get('/api/events', (req, res) => {
  // Required headers for SSE
  res.setHeader('Content-Type',  'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection',    'keep-alive');
  res.setHeader('X-Accel-Buffering', 'no'); // disable Nginx buffering
  res.flushHeaders(); // send headers immediately, keep connection open

  // Send a heartbeat every 30s to prevent proxy timeouts
  const heartbeat = setInterval(() => {
    res.write(': heartbeat\n\n'); // SSE comment — ignored by EventSource
  }, 30_000);

  // Register this client
  const send = (event, data) => {
    res.write(`event: ${event}\n`);
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  subscribers.add(send);

  // Clean up when client disconnects
  req.on('close', () => {
    clearInterval(heartbeat);
    subscribers.delete(send);
  });
});

// ── Publish — call this whenever you have new data ─────────────────────────
function broadcast(event, data) {
  subscribers.forEach((send) => send(event, data));
}

// Example: push stock price every second
setInterval(() => {
  broadcast('price', { symbol: 'AAPL', price: (140 + Math.random() * 10).toFixed(2) });
}, 1000);

app.listen(3002);

import { useEffect, useState } from 'react';

interface PriceEvent { symbol: string; price: string; }

function useLivePrices(symbol: string) {
  const [price, setPrice]   = useState<string | null>(null);
  const [status, setStatus] = useState<'connecting' | 'open' | 'error'>('connecting');

  useEffect(() => {
    const es = new EventSource(`/api/events?symbol=${symbol}`);

    es.addEventListener('price', (e: MessageEvent) => {
      const data: PriceEvent = JSON.parse(e.data);
      setPrice(data.price);
      setStatus('open');
    });

    es.onerror = () => {
      setStatus('error');
      // EventSource automatically reconnects — no manual logic needed
    };

    return () => es.close();
  }, [symbol]);

  return { price, status };
}

// Usage:
// const { price, status } = useLivePrices('AAPL');

// ── Server ─────────────────────────────────────────────────────────────────
app.get('/api/poll', async (req, res) => {
  const since   = req.query.since ? new Date(req.query.since) : new Date(0);
  const timeout = 28_000; // 28s — leave 2s buffer before proxy/load-balancer timeout
  const interval = 500;   // check every 500ms
  const start   = Date.now();

  while (Date.now() - start < timeout) {
    const updates = await db.query(
      'SELECT * FROM events WHERE created_at > ? ORDER BY created_at ASC LIMIT 50',
      [since]
    );

    if (updates.length > 0) {
      return res.json({
        data:      updates,
        timestamp: new Date().toISOString(),
        hasMore:   updates.length === 50,
      });
    }

    await new Promise((resolve) => setTimeout(resolve, interval));
  }

  // Timeout — return empty, client reconnects immediately
  res.json({ data: [], timestamp: new Date().toISOString(), hasMore: false });
});

// ── Client ─────────────────────────────────────────────────────────────────
let lastTimestamp = null;

async function longPoll() {
  try {
    const url = lastTimestamp ? `/api/poll?since=${lastTimestamp}` : '/api/poll';
    const res  = await fetch(url, { signal: AbortSignal.timeout(35_000) });
    const body = await res.json();

    if (body.data.length > 0) {
      processUpdates(body.data);
      lastTimestamp = body.timestamp;
    }
  } catch (err) {
    if (err.name !== 'AbortError') await sleep(2000); // wait on error before retry
  }

  longPoll(); // always reconnect, synchronous recursion avoids stack growth
}

longPoll(); // start the loop