---
title: 'EventSource: message event'
slug: Web/API/EventSource/message_event
tags:
  - API
  - Event
  - EventSource
  - Reference
  - message
browser-compat: api.EventSource.message_event
---
{{APIRef}}

The `message` event of the {{domxref("EventSource")}} API 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 like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.

```js
addEventListener('message', event => { });

onmessage = event => { };
```

## Event type

An {{domxref("MessageEvent")}}. Inherits from {{domxref("Event")}}.

{{InheritanceDiagram("MessageEvent")}}

## Event properties

_This interface also inherits properties from its parent, {{domxref("Event")}}._

- {{domxref("MessageEvent.data")}} {{readonlyInline}}
  - : The data sent by the message emitter.
- {{domxref("MessageEvent.origin")}} {{readonlyInline}}
  - : A {{domxref("USVString")}} representing the origin of the message emitter.
- {{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
  - : A {{domxref("DOMString")}} representing a unique ID for the event.
- {{domxref("MessageEvent.source")}} {{readonlyInline}}
  - : A `MessageEventSource` (which can be a {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) representing the message emitter.
- {{domxref("MessageEvent.ports")}} {{readonlyInline}}
  - : An array of {{domxref("MessagePort")}} 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, an `EventSource` is created to receive events from the server; a page with the name `sse.php` is responsible for generating the events.

```js
var evtSource = new EventSource('sse.php');
var eventList = document.querySelector('ul');

evtSource.addEventListener('message', (e) => {
  var newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
});
```

### onmessage equivalent

```js
evtSource.onmessage = (e) => {
  var newElement = document.createElement("li");

  newElement.textContent = "message: " + e.data;
  eventList.appendChild(newElement);
};
```

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

- [Using server-sent events](/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events)
- [`open`](/en-US/docs/Web/API/EventSource/open_event)
- [`error`](/en-US/docs/Web/API/EventSource/error_event)
