HTML Server-Sent Events

Definition and Usage

Server-Sent Events (SSE) let a server push new data to an HTML page at any time. Traditionally the page must request updates; with SSE the server streams messages and your page script treats them as events—then updates the DOM (lists, clocks, alerts) without reloading.

What does the HTML page do?

A script creates an EventSource pointed at a stream URL. Incoming messages become message events (or named events). Handlers read event.data and change HTML elements—the connection stays open so updates keep arriving.

What does the server send?

A UTF-8 text stream with MIME type text/event-stream. Each event is one or more field lines (data:, optional event:, id:, retry:) ended by a blank line.

When should you use SSE on an HTML site?

Live scores, notification feeds, dashboards, and progress updates—anywhere the server talks and the browser mostly listens. For two-way chat or games, prefer WebSockets instead.

HTML / Client Syntax

Open a stream from a script in your HTML document:

var evtSource = new EventSource("/sse");

evtSource.onmessage = function (event) {
  // event.data is a string — update the HTML page
  document.getElementById("out").textContent = event.data;
};

evtSource.onerror = function () {
  console.error("EventSource failed");
};

// Stop listening (optional)
// evtSource.close();

: keep-alive comment

data: some text

event: ping
data: {"time":"2026-11-05T07:40:00Z"}

Cross-origin streams can pass options: new EventSource(url, { withCredentials: true }).

Core HTML Concepts

Pieces that connect a live stream to your webpage:

Event stream fields

How to Use SSE in an HTML Page

Client first (what every HTML tutorial needs), then a minimal server shape.

1. Add HTML placeholders for live content (<ul id="list">, <div id="clock">).
2. In a script, new EventSource("/your-stream").
3. Handle onmessage to update the DOM from event.data.
4. For named server events, use addEventListener("ping", …).
5. Handle onerror; call close() when leaving the page or stopping the feed.
6. On the server: respond with text/event-stream and write data: …\n\n blocks.

Live Preview

Simulate an SSE feed updating an HTML list (same handler pattern as real EventSource.onmessage).

evtSource.onmessage = (e) => append(e.data)

HTML Examples

Five patterns: server stream shape, client EventSource, errors, custom events, and a full HTML clock page. Try It demos simulate the stream so you can practice handlers without Node.

const http = require("http");

http.createServer(function (req, res) {
  res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    "Connection": "keep-alive"
  });

  setInterval(function () {
    res.write("data: " + new Date().toLocaleTimeString() + "\n\n");
  }, 1000);
}).listen(8080);

SSE server on http://localhost:8080
(data: 3:45:12 PM sent every second)

var eventSource = new EventSource("http://localhost:8080");

eventSource.onmessage = function (event) {
  console.log("New message:", event.data);
};

New message: 3:45:12 PM
New message: 3:45:13 PM

eventSource.onerror = function () {
  console.error("Connection error. Retrying...");
};

Connection error. Retrying...

// Server sends:
// event: news
// data: Breaking story
// (blank line)

eventSource.addEventListener("news", function (event) {
  console.log("News:", event.data);
});

News: Breaking story

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Server-Sent Events Example</title>
</head>
<body>
  <h1>Real-Time Clock</h1>
  <div id="clock"></div>

  <script>
    var eventSource = new EventSource("http://localhost:8080");

    eventSource.onmessage = function (event) {
      document.getElementById("clock").textContent = event.data;
    };

    eventSource.onerror = function () {
      console.error("Connection error. Retrying...");
    };
  </script>
</body>
</html>

Real-Time Clock
3:45:18 PM

Key Takeaways