What are Server-Sent Events in HTML5?

What are Server-Sent Events?

Server-Sent Events are an HTML5 standard for one-way, real-time communication from the server to the browser. The client opens a connection once and the server keeps it open, streaming text messages whenever it has new data - live scores, stock tickers, notifications, or a progress feed. The browser side is handled by the EventSource interface.

Unlike normal request/response, where the client must ask for data, SSE lets the server push data as it becomes available. It runs over ordinary HTTP, so it works through most firewalls and proxies without special setup.

Listening with EventSource

On the client you create an EventSource pointing at a server URL. Its onmessage handler fires for each incoming message, onopen when the connection is established, and onerror on failure. A powerful feature: if the connection drops, the browser automatically reconnects.

const source = new EventSource("/events"); // must respond with text/event-stream

source.onopen = () => console.log("Connection opened");

// Fires for unnamed ("message") events
source.onmessage = (event) => {
  console.log("New data:", event.data);
  document.getElementById("feed").textContent = event.data;
};

// Fires for custom named events (event: price)
source.addEventListener("price", (event) => {
  console.log("Price update:", event.data);
});

source.onerror = (err) => {
  console.warn("SSE error - the browser will retry automatically", err);
};

// Close the stream when you no longer need it
// source.close();

The server side

The endpoint must respond with the Content-Type text/event-stream and keep the connection open. Each message is plain text: lines beginning with data:, optionally event: for a named event, id: for a message ID, and retry: to set the reconnect delay. A message ends with a blank line.

// Express-style handler
app.get("/events", (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");

  let count = 0;
  const timer = setInterval(() => {
    // Each event: fields, then a blank line to flush it
    res.write(`id: ${count}\n`);
    res.write(`data: Server time is ${new Date().toISOString()}\n\n`);
    count++;
  }, 1000);

  req.on("close", () => clearInterval(timer)); // client disconnected
});

SSE vs WebSockets

SSE is one-way (server to client) and text-only, whereas WebSockets are full-duplex (both directions) and support binary data. If you only need to push updates downstream, SSE is simpler; if the client must also stream data back, use WebSockets.