Worker:message 事件

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.

当 worker 的父级接收到来自其 worker 的消息时(也就是说,当 worker 通过 DedicatedWorkerGlobalScope.postMessage() 发送消息时),会在 Worker 对象上触发 message 事件。

此事件不能取消,也不会冒泡。

语法

在如 addEventListener() 等方法中使用事件名称,或者使用事件处理器属性。

js
addEventListener("message", (event) => {});

onmessage = (event) => {};

事件类型

事件属性

此接口也从其父接口 Event 继承属性。

MessageEvent.data 只读

消息发送者发送的数据。

MessageEvent.origin 只读

一个字符串,代表消息发送者的来源。

MessageEvent.lastEventId 只读

一个字符串,代表事件的唯一 ID。

MessageEvent.source 只读

一个 MessageEventSource(可以是一个 WindowProxyMessagePortServiceWorker 对象),代表消息发送者。

MessageEvent.ports 只读

一个 MessagePort 对象的数组,代表与消息被发送的通道相关的端口(在适当的情况下,例如在通道消息传递或向 shared worker 发送消息时)。

示例

下面的代码创建了一个 worker 并使用 addEventListener() 监听从 worker 发来的消息:

js
const worker = new Worker("static/scripts/worker.js");

worker.addEventListener("message", (event) => {
  console.log(`Received message from worker: ${event.data}`);
});

另外,也可以使用 onmessage 事件处理器属性进行监听:

js
const worker = new Worker("static/scripts/worker.js");

worker.onmessage = (event) => {
  console.log(`Received message from worker: ${event.data}`);
};

worker 使用 self.postMessage() 发出消息:

js
// static/scripts/worker.js

self.postMessage("I'm alive!");

规范

Specification
HTML
# event-message

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
message event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

参见