Server-Sent Events: Simple Real-Time Updates

// Client-side
const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
  console.log('Received:', event.data);
};

// SSE: Server → Client (one-way)
✓ Simpler API
✓ Automatic reconnection
✓ Built-in HTTP caching
✗ Only server-to-client

// WebSockets: Bidirectional
✓ Full duplex
✓ Lower latency
✗ More complex
✗ Manual reconnection

import express from 'express';

const app = express();

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');
  
  // Send initial event
  res.write('data: Connected\n\n');
  
  // Send updates every second
  const interval = setInterval(() => {
    const data = JSON.stringify({
      time: new Date().toISOString(),
      value: Math.random()
    });
    
    res.write(`data: ${data}\n\n`);
  }, 1000);
  
  // Cleanup on client disconnect
  req.on('close', () => {
    clearInterval(interval);
  });
});

app.listen(3000);

const eventSource = new EventSource('/events');

eventSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log('Time:', data.time);
  console.log('Value:', data.value);
};

eventSource.onerror = (error) => {
  console.error('SSE error:', error);
  eventSource.close();
};

// Server sends named events
res.write('event: update\n');
res.write('data: {"value": 123}\n\n');

// Client listens to specific event
eventSource.addEventListener('update', (event) => {
  const data = JSON.parse(event.data);
  console.log('Update:', data);
});

// Server
app.get('/notifications', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  
  // Send notifications
  notifications.on('new', (notification) => {
    res.write(`data: ${JSON.stringify(notification)}\n\n`);
  });
});

// Client
const notifications = new EventSource('/notifications');
notifications.onmessage = (event) => {
  showNotification(JSON.parse(event.data));
};

// Server
app.get('/analytics', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  
  analytics.on('metric', (metric) => {
    const data = JSON.stringify({
      type: metric.type,
      value: metric.value,
      timestamp: metric.timestamp
    });
    
    res.write(`data: ${data}\n\n`);
  });
});

// Server
app.post('/upload', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  
  uploadFile(req).on('progress', (percent) => {
    res.write(`data: {"progress": ${percent}}\n\n`);
  });
  
  uploadFile(req).on('complete', () => {
    res.write('event: complete\ndata: {}\n\n');
    res.end();
  });
});