SSE vs WebSockets

Key characteristics of SSE:

• • Unidirectional — server to client only
• • Standard HTTP — uses regular HTTP with Content-Type: text/event-stream
• • Auto-reconnect — browser handles reconnection automatically if connection drops
• • Event IDs — server can tag events with IDs so client resumes from last received event
• • Simple API — just new EventSource(url) on the client
• • Text only — UTF-8 text data (no binary)

Key characteristics of WebSockets:

• • Bidirectional — both client and server send messages freely
• • Custom protocol — uses ws:// after HTTP upgrade handshake
• • No auto-reconnect — you implement reconnection logic yourself
• • Binary + text — supports both UTF-8 text and binary frames
• • Low latency — no HTTP headers per message after handshake
• • More complex — requires WebSocket server, proxy configuration, state management

The flow:

1. Client opens connection:
   GET /events HTTP/1.1
   Accept: text/event-stream

2. Server responds and keeps connection open:
   HTTP/1.1 200 OK
   Content-Type: text/event-stream
   Cache-Control: no-cache
   Connection: keep-alive

3. Server streams messages as they happen:
   data: {"type": "notification", "message": "New order received"}

   data: {"type": "notification", "message": "Payment confirmed"}

4. If connection drops → browser auto-reconnects with:
   GET /events HTTP/1.1
   Last-Event-ID: 42

data: This is a simple message

data: {"user": "alice", "action": "login"}
id: 42
event: user-activity

data: Line one
data: Line two (multi-line message)

: this is a comment (ignored by client)

retry: 5000

const express = require('express');
const app = express();

// Store connected clients
const clients = new Set();

app.get('/events', (req, res) => {
  // Set SSE headers
  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

  // Handle client reconnection — check Last-Event-ID
  const lastEventId = req.headers['last-event-id'];
  if (lastEventId) {
    // Send missed events since lastEventId
    sendMissedEvents(res, parseInt(lastEventId));
  }

  // Add client to connected set
  clients.add(res);

  // Send initial connection confirmation
  res.write('event: connected\ndata: {"status": "ok"}\n\n');

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

// Function to broadcast to all connected clients
let eventId = 0;
function broadcast(eventType, data) {
  eventId++;
  const message = `event: ${eventType}\nid: ${eventId}\ndata: ${JSON.stringify(data)}\n\n`;
  clients.forEach(client => client.write(message));
}

// Example: send notification every time something happens
app.post('/api/orders', (req, res) => {
  // ... process order ...
  broadcast('notification', {
    type: 'new-order',
    message: 'New order #1234 received',
    timestamp: Date.now()
  });
  res.json({ success: true });
});

app.listen(3000);

// Connect to SSE endpoint — that's it
const eventSource = new EventSource('/events');

// Listen for default "message" events
eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Message:', data);
};

// Listen for custom event types
eventSource.addEventListener('notification', (event) => {
  const data = JSON.parse(event.data);
  showNotification(data.message);
});

// Connection opened
eventSource.onopen = () => {
  console.log('Connected to SSE');
};

// Handle errors (browser auto-reconnects)
eventSource.onerror = (error) => {
  if (eventSource.readyState === EventSource.CONNECTING) {
    console.log('Reconnecting...');
  } else {
    console.error('SSE error:', error);
  }
};

// Close when done
// eventSource.close();

const { WebSocketServer } = require('ws');
const express = require('express');
const http = require('http');

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

const clients = new Set();

wss.on('connection', (ws) => {
  clients.add(ws);

  // Send connection confirmation
  ws.send(JSON.stringify({ event: 'connected', status: 'ok' }));

  // Handle incoming messages from client
  ws.on('message', (message) => {
    const data = JSON.parse(message);
    // Handle client messages (not needed for notifications, but required by WS)
    console.log('Client said:', data);
  });

  // Handle heartbeat to detect dead connections
  ws.isAlive = true;
  ws.on('pong', () => { ws.isAlive = true; });

  ws.on('close', () => {
    clients.delete(ws);
  });
});

// Heartbeat interval to detect disconnected clients
setInterval(() => {
  wss.clients.forEach((ws) => {
    if (!ws.isAlive) return ws.terminate();
    ws.isAlive = false;
    ws.ping();
  });
}, 30000);

// Broadcast notifications
function broadcast(eventType, data) {
  const message = JSON.stringify({ event: eventType, ...data });
  clients.forEach(client => {
    if (client.readyState === 1) { // OPEN
      client.send(message);
    }
  });
}

server.listen(3000);

let ws;
let reconnectAttempts = 0;

function connect() {
  ws = new WebSocket('wss://yourserver.com/ws');

  ws.onopen = () => {
    console.log('Connected to WebSocket');
    reconnectAttempts = 0;
  };

  ws.onmessage = (event) => {
    const data = JSON.parse(event.data);
    if (data.event === 'notification') {
      showNotification(data.message);
    }
  };

  // Manual reconnection logic (SSE does this for free)
  ws.onclose = () => {
    reconnectAttempts++;
    const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000);
    console.log(`Reconnecting in ${delay}ms...`);
    setTimeout(connect, delay);
  };

  ws.onerror = (error) => {
    console.error('WebSocket error:', error);
    ws.close();
  };
}

connect();

Complete message example with all fields:

id: 42
event: price-update
retry: 3000
data: {"symbol": "AAPL", "price": 198.52, "change": "+1.23"}

Note the blank line at the end — that's what tells the parser this message is complete.