EventSource: Reconnection, Last-Event-ID, and Named Events

SSE connections that drop don't resume from where they left off — the client reconnects and starts receiving events from the beginning, or misses events that occurred during disconnection.

Use the SSE id field and Last-Event-ID header for resume-on-reconnect. Use named events for multiplexing different message types on one connection.

// Server: send id with each event
function sendEvent(res, id, event, data) {
  res.write(`id: ${id}\n`);
  res.write(`event: ${event}\n`);
  res.write(`data: ${JSON.stringify(data)}\n\n`);
}

// Server: handle reconnection
app.get('/events', (req, res) => {
  const lastId = req.headers['last-event-id'];
  res.setHeader('Content-Type', 'text/event-stream');
  // Replay missed events since lastId
  if (lastId) replayFrom(lastId, res);
  // Then stream new events
});

// Client: listen to named events
const es = new EventSource('/events');
es.addEventListener('order-update', (e) => handleOrder(JSON.parse(e.data)));
es.addEventListener('notification', (e) => handleNotif(JSON.parse(e.data)));
// es.lastEventId gives the last received id

The browser sends Last-Event-ID automatically on reconnect if the server set id on previous events. This enables the server to resume the stream from the correct point, preventing data loss.