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 Standard
# event-message

浏览器兼容性

BCD tables only load in the browser

参见