Server Sent Events

What is SSE?

1. One way. Data flows server to browser only; the client cannot send on this channel.
2. One connection. One normal HTTP request, kept open. The server writes many messages down it.
3. Built in. The browser's EventSource opens the stream and parses messages for you.

Step through it

Click through the steps to watch one HTTP connection open, stay open, and stream live prices. Push your own updates or drop the connection to see SSE reconnect on its own.

How the connection works

Ordinary HTTP, used in a clever way:

1. The browser calls new EventSource('/prices'), a normal HTTP GET.
2. The server replies with Content-Type: text/event-stream and does not close the response.
3. It holds the connection open.
4. On any update it writes a small text message; the browser receives it right away.

The shape of an event

Each message is plain text lines (field: value), ended by a blank line:

Copy
id: 42
event: price
data: {"symbol":"AAPL","price":189.51}
retry: 3000
↵ (blank line ends the event)

• data: the payload, the only required field (often JSON).
• event: an optional name; without it the type is "message".
• id: a cursor the browser remembers and replays on reconnect.
• retry: reconnect delay in milliseconds.

Client

Copy
const source = new EventSource('/prices');
// Plain messages (no event name)
source.onmessage = (event) =>
  updateUI(JSON.parse(event.data));
// A named event
source.addEventListener('price', (event) =>
  updateUI(JSON.parse(event.data))
);
// The browser retries on its own
source.onerror = () => console.log('Lost. Retrying...');
source.close(); // stop when done

Server

Copy
app.get('/prices', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  let id = 0;
  const timer = setInterval(() => {
    id++;
    res.write(`id: ${id}\n`);
    res.write(`event: price\n`);
    res.write(`data: ${JSON.stringify(getPrice())}\n\n`); // blank line ends it
  }, 1000);
  req.on('close', () => clearInterval(timer)); // clean up on disconnect
});

Reconnecting

Connections drop (wifi, server restarts). SSE handles it for you:

• The browser reconnects on its own after a short wait.
• It sends a Last-Event-ID header, the id of the last message it received.
• The server resumes from there, so nothing is lost. You write no retry code.

When to use it

Quick quiz

Four questions. Tap an answer to check it.