MessageEvent
BaselineWidely 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 the
message
event ofEventSource
). - Web sockets (see the
message
event ofWebSocket
). - Cross-document messaging (see
Window.postMessage()
and themessage
event ofWindow
). - Channel messaging (see
MessagePort.postMessage()
and themessage
event ofMessagePort
). - Cross-worker/document messaging (see the above two entries, but also
Worker.postMessage()
, themessage
event ofWorker
, themessage
event ofServiceWorkerGlobalScope
, etc.) - Broadcast channels (see
BroadcastChannel.postMessage()
and themessage
event ofBroadcastChannel
). - WebRTC data channels (see the
message
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 new
MessageEvent
.
Instance properties
This interface also inherits properties from its parent,Event
.
MessageEvent.data
Read onlyThe data sent by the message emitter.
MessageEvent.origin
Read onlyA string representing the origin of the message emitter.
MessageEvent.lastEventId
Read onlyA string representing a unique ID for the event.
MessageEvent.source
Read onlyA
MessageEventSource
(which can be aWindowProxy,MessagePort
, orServiceWorker
object) representing the message emitter.MessageEvent.ports
Read onlyAn array of
MessagePort
objects containing allMessagePort
objects sent with the message, in order.
Instance methods
This interface also inherits methods from its parent,Event
.
initMessageEvent()
DeprecatedInitializes a message event.Do not use this anymore —use the
MessageEvent()
constructor instead.
Examples
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 useMessagePort
start()
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.};
Specifications
Specification |
---|
HTML # the-messageevent-interface |
Browser compatibility
See also
ExtendableMessageEvent
— similar to this interface but used in interfaces that needs to give more flexibility to authors.