Themessage event of theEventSource interface is fired when data is received through an event source.

This event is not cancelable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("message", (event) => { })onmessage = (event) => { }

Event type

AMessageEvent. Inherits fromEvent.

Event properties

This interface also inherits properties from its parent,Event.

MessageEvent.dataRead only

The data sent by the message emitter.

MessageEvent.originRead only

A string representing the origin of the message emitter.

MessageEvent.lastEventIdRead only

A string representing a unique ID for the event.

MessageEvent.sourceRead only

AMessageEventSource (which can be aWindowProxy,MessagePort, orServiceWorker object) representing the message emitter.

MessageEvent.portsRead only

An array ofMessagePort objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g., in channel messaging or when sending a message to a shared worker).

Examples

In this basic example, anEventSource is created to receive events from the server; a page with the namesse.php is responsible for generating the events.

const evtSource = new EventSource("sse.php");const eventList = document.querySelector("ul");evtSource.addEventListener("message", (e) => {  const newElement = document.createElement("li");  newElement.textContent = `message: ${e.data}`;  eventList.appendChild(newElement);});

onmessage equivalent

evtSource.onmessage = (e) => {  const newElement = document.createElement("li");  newElement.textContent = `message: ${e.data}`;  eventList.appendChild(newElement);};

Specifications

Browser compatibility

See also

• Using server-sent events
• open
• error