Server-Sent Events (SSE)

SSE allow a web page to get updates from a server. Unlike WebSockets, SSEs are unidirectional (Server -> Client) and use standard HTTP.

When to Use

• Live Feeds: News tickers, Sport scores, Stock prices.
• Progress Updates: “Processing Import: 45%…”, Logging streams.
• Notifications: In-app alerts where the user doesn’t need to reply instantly via the same channel.
• Replacement for Polling: More efficient than asking “Are we there yet?” every second.

Quick Start

// Client
const evtSource = new EventSource("/api/events");

evtSource.onmessage = (event) => {
  const data = JSON.parse(event.data);
  console.log("Update:", data);
};

// Server (Express)
app.get("/api/events", (req, res) => {
  // Headers to keep connection open
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");

  setInterval(() => {
    // Format: "data: <payload>\n\n"
    res.write(`data: ${JSON.stringify({ time: new Date() })}\n\n`);
  }, 1000);
});

Core Concepts

Event Stream Format

Plain text. Fields: event, data, id, retry.

event: update
data: {"value": 42}

data: This is a default message

Auto-Reconnection

Browsers automatically try to reconnect if the connection drops. The server can send a retry: 5000 field to control the delay.

Common Patterns

Connection Limit

Browsers (HTTP/1.1) limit concurrent connections (usually 6) per domain. Using HTTP/2 solves this (Multi-plexing).

Best Practices

Do:

• Use HTTP/2 to avoid connection limits.
• Send Hearbeats (comments : ping) to prevent proxies from killing idle connections.
• Use the Last-Event-ID header to resume streams after incorrect.

Don’t:

• Don’t use for Gaming/Chat (Latency and bidirectionality needs WebSockets).
• Don’t send huge binary blobs (It’s text-based).

Troubleshooting

References

• MDN Server-Sent Events