SSE and HTTP/2 — Complete Guide to Modern Streaming

In this tutorial, you will learn about SSE and HTTP/2. We cover key concepts, practical examples, and best practices to help you master this topic.

SSE over HTTP/2 eliminates the browser connection limit per origin, enables multiplexed streams over a single TCP connection, and improves performance for real-time data delivery by leveraging HTTP/2 advanced features.

What You'll Learn

• How HTTP/2 improves SSE performance
• Multiplexing multiple SSE streams over HTTP/2
• Server configuration for SSE over HTTP/2

Why It Matters

HTTP/1.1 limits browsers to 6-8 concurrent connections per origin. SSE over HTTP/2 removes this limit, allowing dozens of SSE streams over a single connection with better performance and lower latency.

Real-World Use

Durga Antivirus Pro's security dashboard opens 10+ SSE streams for different data panels (threat feed, system metrics, user activity, alerts). With HTTP/2, all streams share one TCP connection instead of consuming 10 connection slots.

flowchart LR
    A["Client"] --> B["HTTP/2 Connection"]
    B --> C["Stream 1: Threats"]
    B --> D["Stream 2: Metrics"]
    B --> E["Stream 3: Alerts"]
    B --> F["Stream 4: Activity"]
    style B fill:#dbeafe,stroke:#2563eb

Code Examples

// Opening multiple SSE streams over HTTP/2
// Browsers automatically use HTTP/2 if the server supports it
const streams = [
  { name: 'threats', url: '/events/threats' },
  { name: 'metrics', url: '/events/metrics' },
  { name: 'alerts', url: '/events/alerts' },
];

const connections = streams.forEach(({ name, url }) => {
  const source = new EventSource(url);
  source.addEventListener(name, (event) => {
    console.log(`[${name}]`, event.data);
  });
});
// With HTTP/2, these share one TCP connection

Expected output: Multiple EventSource objects use separate streams over a single HTTP/2 connection.

# nginx HTTP/2 configuration for SSE
server {
    listen 443 ssl http2;
    serverName api.example.com;

    ssl_certificate /etc/certs/cert.pem;
    ssl_certificate_key /etc/certs/key.pem;

    location /events/ {
        proxy_pass http://sse-backend:3000;
        proxy_http_version 1.1;
        proxy_set_header Connection '';
        proxy_buffering off;
        proxy_cache off;
        chunked_transfer_encoding on;
    }
}

Expected output: nginx serves SSE endpoints over HTTP/2 with buffering disabled for streaming.

// HTTP/2 server push vs SSE comparison
const http2 = require('http2');
const fs = require('fs');

const server = http2.createSecureServer({
  key: fs.readFileSync('key.pem'),
  cert: fs.readFileSync('cert.pem'),
});

server.on('stream', (stream, headers) => {
  if (headers[':path'] === '/events') {
    stream.respond({
      'content-type': 'text/event-stream',
      'cache-control': 'no-cache',
    });
    const interval = setInterval(() => {
      stream.write(`data: ${JSON.stringify({ time: Date.now() })}\n\n`);
    }, 1000);
    stream.on('close', () => clearInterval(interval));
  }
});

server.listen(3000);

Expected output: HTTP/2 SSE server pushes real-time events to all connected streams.

Common Mistakes

1. Not Enabling HTTP/2 on the Server

Without HTTP/2 support, multiple EventSource connections consume the browser Connection Pool. Enable HTTP/2 in your reverse proxy.

2. Disabling Response Buffering Incorrectly

SSE requires no buffering. Set proxy_buffering off, proxy_cache off, and chunked_transfer_encoding on for streaming endpoints.

3. Mixing HTTP/1.1 and HTTP/2 Clients

Some clients may connect via HTTP/1.1. Ensure your streaming backend works for both protocols.

4. Ignoring TLS Termination

HTTP/2 requires TLS in most browsers. Use a proper SSL/TLS certificate for SSE over HTTP/2.

5. Not Testing With HTTP/2 Connection Coalescing

Browsers may coalesce connections to the same IP. Verify that your DNS and certificate setup supports this.

Practice Questions

1. What is the main benefit of SSE over HTTP/2 versus HTTP/1.1?
2. How does HTTP/2 multiplexing improve SSE performance?
3. What server configuration is needed for SSE over HTTP/2?
4. Why does HTTP/2 require TLS in browsers?
5. How does connection coalescing work with HTTP/2 SSE?

Answers:

1. HTTP/2 removes the 6-8 connection per origin limit, allowing many SSE streams over one TCP connection.
2. Multiple SSE streams share one TCP connection, reducing connection overhead and improving latency.
3. Enable HTTP/2, disable response buffering, and configure TLS for the server.
4. Most browsers only support HTTP/2 over TLS (HTTPS) for security reasons.
5. Browsers coalesce connections to the same IP and certificate, reusing one HTTP/2 connection for multiple origins.

Challenge: Set up an nginx server that serves SSE over HTTP/2. Create three SSE endpoints and verify in browser DevTools that all share one HTTP/2 connection.

FAQ

Mini Project

Configure a local HTTP/2 SSE server (using Node.js http2 or nginx) and create a client that opens three EventSource streams. Verify in DevTools that all three share one connection and display connection coalescing info.

What's Next

Explore SSE with nginx for production deployment details, or learn about SSE load balancing for scaling event streams.