MessageEvent
The MessageEvent
interface represents a message received by a target object.
This is used to represent messages in:
- Server-sent events (see
EventSource.message_event
). - Web sockets (see the
onmessage
property of the WebSocket interface). - Cross-document messaging (see
Window.postMessage()
andWindow.message_event
). - Channel messaging (see
MessagePort.postMessage()
andMessagePort.message_event
). - Cross-worker/document messaging (see the above two entries, but also
Worker.postMessage()
,Worker.message_event
,ServiceWorkerGlobalScope.message_event
, etc.) - Broadcast channels (see
Broadcastchannel.postMessage()
) andBroadcastChannel.message_event
). - WebRTC data channels (see
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
Constructor
MessageEvent()
-
Creates a new
MessageEvent
.
Instance 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 string representing the origin of the message emitter.
MessageEvent.lastEventId
Read only-
A string representing a unique ID for the event.
MessageEvent.source
Read only-
A
MessageEventSource
(which can be a WindowProxy,MessagePort
, orServiceWorker
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).
Instance methods
This interface also inherits methods from its parent, Event
.
initMessageEvent()
Deprecated-
Initializes a message event. Do not use this anymore — use the
MessageEvent()
constructor instead.
Examples
In our Basic shared worker example (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:
js
const 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:
js
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:
js
first.onchange = () => {
myWorker.port.postMessage([first.value, second.value]);
console.log("Message posted to worker");
};
second.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 the 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.
js
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 Standard # the-messageevent-interface |
Browser compatibility
BCD tables only load in the browser
See also
ExtendableMessageEvent
— similar to this interface but used in interfaces that needs to give more flexibility to authors.