Widely available Supported across all major browsers. Safe to use in production.

Server-sent events

The EventSource interface is web content's interface to server-sent events.

An EventSource instance opens a persistent connection to an HTTP server, which sends events in text/event-stream format. The connection remains open until closed by calling EventSource.close().

EventTarget EventSource Once the connection is opened, incoming messages from the server are delivered to your code in the form of events. If there is an event field in the incoming message, the triggered event is the same as the event field value. If no event field is present, then a generic message event is fired.

Unlike WebSockets, server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web browser). That makes them an excellent choice when there's no need to send data from the client to the server in message form. For example, EventSource is a useful approach for handling things like social media status updates, news feeds, or delivering data into a client-side storage mechanism like IndexedDB or web storage.

Networking

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
EventSource
6
79
6
5
18
5
close

The close() method of the EventSource interface closes the connection, if one is made, and sets the EventSource.readyState attribute to 2 (closed).
6
79
6
5
18
5
error_event

The error event of the EventSource API is fired when a connection with an event source fails to be opened.
6
79
6
5
18
5
EventSource

The EventSource() constructor returns a newly-created EventSource, which represents a remote resource.
6
79
6
5
18
5
EventSource (options withCredentials parameter)

`options.withCredentials` parameter
26
79
11
7
26
7
message_event

The message event of the EventSource interface is fired when data is received through an event source.
6
79
6
5
18
5
open_event

The open event of the EventSource interface is fired when a connection with an event source is opened.
6
79
6
5
18
5
readyState

The readyState read-only property of the EventSource interface returns a number representing the state of the connection.
6
79
6
5
18
5
url

The url read-only property of the EventSource interface returns a string representing the URL of the source.
18
79
6
6
18
6
withCredentials

The withCredentials read-only property of the EventSource interface returns a boolean value indicating whether the EventSource object was instantiated with CORS credentials set.
26
79
6
7
26
7
worker_support

Available in workers
6
79
133
5
18
5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (133)
Implementation note
  • Not supported in service workers.

Syntax

JAVASCRIPT 
const evtSource = new EventSource("sse.php");
const eventList = document.querySelector("ul");

evtSource.onmessage = (e) => {
  const newElement = document.createElement("li");

  newElement.textContent = `message: ${e.data}`;
  eventList.appendChild(newElement);
};

Use cases

  • Using Server-sent events

    The EventSource interface is web content's interface to server-sent events.

Cautions

  • May not be supported in older browsers.

Implementation notes

  • Some APIs require a secure context (HTTPS) or user activation. Check the requirements before use.

Related links