MessageEvent
注意：此功能在 Web Workers 中可用。
MessageEvent 接口代表一个目标对象接收到的消息。
这用于表示以下情况中的消息：
- 服务器发送事件（请参阅
EventSource的message事件）。 - WebSockets（请参阅
WebSocket的message事件）。 - 跨文档消息（请参阅
Window.postMessage()和Window的message事件）。 - 通道消息（请参阅
MessagePort.postMessage()和MessagePort的message事件）。 - 跨工作线程/文档消息（请参阅上面的两个条目，以及
Worker.postMessage()，Worker的message事件，ServiceWorkerGlobalScope的message事件等）。 - 广播通道（请参阅
BroadcastChannel.postMessage()和BroadcastChannel的message事件）。 - WebRTC 数据通道（请参阅
RTCDataChannel的message事件）。
由此事件触发的操作是在设置为相关 message 事件的处理程序的函数中定义的。
构造函数
MessageEvent()-
创建一个新的
MessageEvent。
实例属性
此接口还继承了其父级 Event 的属性。
MessageEvent.data只读-
由消息发送者发送的数据。
MessageEvent.origin只读-
一个字符串，表示消息发送者的源。
MessageEvent.lastEventId只读-
一个字符串，表示事件的唯一 ID。
MessageEvent.source只读-
一个
MessageEventSource（可以是 WindowProxy、MessagePort或ServiceWorker对象），表示消息发送者。 MessageEvent.ports只读-
一个
MessagePort对象数组，其中包含随消息发送的所有MessagePort对象，按顺序排列。
实例方法
此接口还继承了其父接口 Event 的方法。
initMessageEvent()已弃用-
初始化一个消息事件。不要再使用此方法 — 请改用
MessageEvent()构造函数。
示例
在我们的 基本共享工作线程示例（运行共享工作线程）中，我们有两个 HTML 页面，每个页面都使用一些 JavaScript 来执行计算。不同的脚本使用同一个工作线程文件来执行计算 — 它们都可以访问它，即使它们的页面运行在不同的窗口中。
以下代码片段展示了使用 SharedWorker() 构造函数创建 SharedWorker 对象。两个脚本都包含此内容。
const myWorker = new SharedWorker("worker.js");
然后，两个脚本通过使用 SharedWorker.port 属性创建的 MessagePort 对象访问工作线程。如果使用 addEventListener 附加 onmessage 事件，则端口会通过其 start() 方法手动启动。
myWorker.port.start();
当端口启动时，两个脚本分别使用 port.postMessage() 和 port.onmessage 向工作线程发送消息并处理从工作线程发送过来的消息。
[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");
};
在工作线程内部，我们使用 onconnect 处理程序连接到上面讨论的同一个端口。与该工作线程关联的端口可以在 connect 事件的 ports 属性中访问 — 然后我们使用 MessagePort 的 start() 方法来启动端口，并使用 onmessage 处理程序来处理从主线程发送过来的消息。
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.
};
规范
| 规范 |
|---|
| HTML # the-messageevent-interface |
浏览器兼容性
加载中…
另见
ExtendableMessageEvent— 类似于此接口，但用于需要为作者提供更大灵活性的接口。