MessageEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Note: This feature is available inWeb Workers.

TheMessageEvent interface represents a message received by a target object.

This is used to represent messages in:

Server-sent events (see themessage event ofEventSource).
Web sockets (see themessage event ofWebSocket).
Cross-document messaging (seeWindow.postMessage() and themessage event ofWindow).
Channel messaging (seeMessagePort.postMessage() and themessage event ofMessagePort).
Cross-worker/document messaging (see the above two entries, but alsoWorker.postMessage(), themessage event ofWorker, themessage event ofServiceWorkerGlobalScope, etc.)
Broadcast channels (seeBroadcastChannel.postMessage() and themessage event ofBroadcastChannel).
WebRTC data channels (see themessage event ofRTCDataChannel).

The action triggered by this event is defined in a function set as the event handler for the relevantmessage event.

Constructor

MessageEvent(): Creates a newMessageEvent.

Instance 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 containing allMessagePort objects sent with the message, in order.

Instance methods

This interface also inherits methods from its parent,Event.

initMessageEvent()Deprecated: Initializes a message event.Do not use this anymore —use theMessageEvent() constructor instead.

In ourBasic shared worker example (run shared worker), we have two HTML pages, each of which uses some JavaScript to perform a 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 aSharedWorker object using theSharedWorker() constructor. Both scripts contain this:

const myWorker = new SharedWorker("worker.js");

Both scripts then access the worker through aMessagePort object created using theSharedWorker.port property. If the onmessage event is attached using addEventListener, the port is manually started using itsstart() method:

myWorker.port.start();

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

[first, second].forEach((input) => {  input.onchange = () => {    myWorker.port.postMessage([first.value, second.value]);    console.log("Message posted to worker");  };});myWorker.port.onmessage = (e) => {  result1.textContent = e.data;  console.log("Message received from worker");};

Inside the worker we use theonconnect handler to connect to the same port discussed above. The ports associated with that worker are accessible in theconnect event'sports property — we then useMessagePortstart() method to start the port, and theonmessage handler to deal with messages sent from the main threads.

onconnect = (e) => {  const port = e.ports[0];  port.addEventListener("message", (e) => {    const workerResult = `Result: ${e.data[0] * e.data[1]}`;    port.postMessage(workerResult);  });  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.};