Web/API/MessageEvent

The MessageEvent interface represents a message received by a target object.

This is used to represent messages in:

Server-sent events (see EventSource.onmessage).
Web sockets (see the onmessage property of the WebSocket interface).
Cross-document messaging (see Window.postMessage() and Window.onmessage).
Channel messaging (see MessagePort.postMessage() and MessagePort.onmessage).
Cross-worker/document messaging (see the above two entries, but also Worker.postMessage(), Worker.onmessage, ServiceWorkerGlobalScope.onmessage, etc.)
Broadcast channels (see Broadcastchannel.postMessage()) and BroadcastChannel.onmessage).
WebRTC data channels (see RTCDataChannel.onmessage).

The action triggered by this event is defined in a function set as the event handler for the relevant message event (e.g. using an onmessage handler as listed above).

Note: This feature is available in Web Workers.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveAspectRatio="xMinYMin meet"><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/Event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="38.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Event</text></a><polyline points="76,25  86,20  86,30  76,25" stroke="#D4DDE4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#D4DDE4"/><a xlink:href="https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="176" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">MessageEvent</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Constructor

MessageEvent(): Creates a new MessageEvent.

Properties

This interface also inherits properties from its parent, Event.

MessageEvent.data Read only: The data sent by the message emitter.
MessageEvent.origin Read only: A USVString representing the origin of the message emitter.
MessageEvent.lastEventId Read only: A DOMString representing a unique ID for the event.
MessageEvent.source Read only: A MessageEventSource (which can be a WindowProxy, MessagePort, or ServiceWorker object) representing the message emitter.
MessageEvent.ports Read only: An array of 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).

Methods

This interface also inherits methods from its parent, Event.

initMessageEvent() ': Initializes a message event. Do not use this anymore — use the MessageEvent() constructor instead.

Examples

In our Basic shared worker example ([[../../../../../../mdn.github.io/simple-shared-worker/index|run shared worker]]), we have two HTML pages, each of which uses some JavaScript to perform a simple calculation. The different scripts are using the same worker file to perform the calculation — they can both access it, even if their pages are running inside different windows.

The following code snippet shows creation of a SharedWorker object using the SharedWorker() constructor. Both scripts contain this:

var myWorker = new SharedWorker('worker.js');

Both scripts then access the worker through a MessagePort object created using the SharedWorker.port property. If the onmessage event is attached using addEventListener, the port is manually started using its start() method:

myWorker.port.start();

When the port is started, both scripts post messages to the worker and handle messages sent from it using port.postMessage() and port.onmessage, respectively:

first.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

myWorker.port.onmessage = function(e) {
  result1.textContent = e.data;
  console.log('Message received from worker');
}

Inside the worker we use the SharedWorkerGlobalScope.onconnect handler to connect to the same port discussed above. The ports associated with that worker are accessible in the connect event's ports property — we then use MessagePort start() method to start the port, and the onmessage handler to deal with messages sent from the main threads.

onconnect = function(e) {
  var port = e.ports[0];

  port.addEventListener('message', function(e) {
    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  });

  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
}

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'MessageEvent' in that specification.	Living Standard

Browser compatibility

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`MessageEvent`	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera Full support 10.6	Safari Full support 4	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 11	Safari iOS Full support 3	Samsung Internet Android Full support 1.0
`MessageEvent()` constructor	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera ?	Safari Full support 4	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android ?	Opera Android ?	Safari iOS Full support 3	Samsung Internet Android Full support 1.0
`data`	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera Full support Yes	Safari Full support 4	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 3	Samsung Internet Android Full support Yes
`initMessageEvent` Deprecated'	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera Full support Yes	Safari Full support 4	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 3	Samsung Internet Android Full support Yes
`lastEventId`	Chrome Full support 1	Edge Full support 17	Firefox Full support 4	IE Full support 9	Opera Full support Yes	Safari Full support 4	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 3	Samsung Internet Android Full support Yes
`origin`	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera Full support Yes	Safari Full support 4	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support 3	Samsung Internet Android Full support Yes
`ports`	Chrome Full support 1	Edge Full support 12	Firefox Full support 4	IE Full support 9	Opera Full support Yes	Safari Full support 4	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support 3	Samsung Internet Android Full support Yes
`source`	Chrome Full support Yes	Edge Full support 12	Firefox Full support 55	IE No support No	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 55	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes

Legend

Full support: Full support
No support: No support
Compatibility unknown: Compatibility unknown
Deprecated. Not for use in new websites.': Deprecated. Not for use in new websites.