What Are Server-Sent Events?

Imagine watching a live sports score, tracking an order, or receiving notifications without refreshing the webpage. New information appears as soon as the server sends it.

Server-Sent Events (SSE) allow a server to continuously send updates to a browser over an HTTP connection.

Unlike repeatedly requesting updates, a browser can keep an SSE connection open and listen for new messages.

Connect to a Live Event Stream

JavaScript provides the EventSource interface for receiving SSE messages.

const stream = new EventSource("/events");

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

The browser connects to the /events endpoint and listens for incoming messages. The endpoint must exist on a server and respond with an SSE stream.

The event.data property contains the message content sent by the server.

What Does an SSE Message Look Like?

The server sends text using the text/event-stream content type. Each event is separated by a blank line.

data: Welcome to the live stream!

data: A new notification has arrived!

event: status
data: {"online":true}

id: 42
data: Message with an event ID

The data: field contains the message, event: can name a custom event type, and id: identifies an event to support reconnection.

Listen for Different Kinds of Updates

Not every update has to be a generic message. The server can name events, and your JavaScript can respond differently.

const stream = new EventSource("/events");

stream.addEventListener("status", function(event) {
  const update = JSON.parse(event.data);
  console.log("Online:", update.online);
});

Named events are useful when your application receives several types of information, such as notifications, progress reports, and system status updates.

Open, Error, and Close

Real connections can fail. SSE provides events and methods to help you manage the connection.

const stream = new EventSource("/events");

stream.onopen = function() {
  console.log("Connected!");
};

stream.onerror = function() {
  console.log("Connection interrupted.");
};

// When you no longer need updates:
stream.close();

The browser normally attempts to reconnect automatically after an interrupted SSE connection. Calling close() stops that behavior for the current EventSource instance.

The readyState property indicates whether a connection is connecting, open, or closed.

Try a Live Notification Stream

Click Start Stream to simulate new server updates arriving every few seconds. Pause the stream or clear the activity feed whenever you like.

Build Reliable Live Experiences

• Use SSE when the server needs to push updates to the browser.
• Use HTTPS and properly authenticate protected endpoints.
• Handle connection interruptions and reconnection states.
• Close streams when they’re no longer needed.
• Use event IDs when clients may need to resume missed updates.
• Validate and safely display received data; avoid inserting untrusted content as HTML.
• Remember that browser and server connection limits can affect your design.
• Use WebSockets when full-duplex communication is required.

SSE is particularly useful for live dashboards, progress tracking, notifications, and activity feeds.