DedicatedWorkerGlobalScope: message 事件

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

注意:此功能仅在 专用 Web Worker 中可用。

当 Worker 从其父级接收到消息时(即,当父级使用 Worker.postMessage() 发送消息时),会在 DedicatedWorkerGlobalScope 对象上触发 message 事件。

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

语法

在诸如 addEventListener() 之类的方法中使用事件名称,或设置事件处理程序属性。

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

onmessage = (event) => { }

事件类型

一个 MessageEvent。继承自 Event

Event MessageEvent

事件属性

此接口还继承了其父级 Event 的属性。

MessageEvent.data 只读

由消息发送者发送的数据。

MessageEvent.origin 只读

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

MessageEvent.lastEventId 只读

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

MessageEvent.source 只读

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

MessageEvent.ports 只读

一个 MessagePort 对象数组,表示消息发送通道(如果适用,例如在通道消息传递或向共享工作者发送消息时)关联的端口。

示例

下面的代码片段展示了如何使用 Worker() 构造函数创建一个 Worker 对象。当表单输入 first 中的值发生变化时,会将消息传递给 Worker。还存在一个 onmessage 处理程序,用于处理从 Worker 传递回来的消息。

js
// main.js

const myWorker = new Worker("worker.js");

first.onchange = () => {
  myWorker.postMessage([first.value, second.value]);
  console.log("Message posted to worker");
};

// worker.js

self.onmessage = (e) => {
  console.log("Message received from main script");
  const workerResult = `Result: ${e.data[0] * e.data[1]}`;
  console.log("Posting message back to main script");
  postMessage(workerResult);
};

main.js 脚本中,使用 onmessage 处理程序来处理来自 Worker 脚本的消息。

js
// main.js

myWorker.onmessage = (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
};

或者,脚本可以使用 addEventListener() 来监听消息。

js
// worker.js

self.addEventListener("message", (e) => {
  result.textContent = e.data;
  console.log("Message received from worker");
});

请注意,在主脚本中,onmessage 必须在 myWorker 上调用,而在 Worker 脚本中,你只需要 onmessage,因为 Worker 实际上就是全局作用域(DedicatedWorkerGlobalScope)。

如需完整示例,请参阅我们的 基本专用 Worker 示例运行专用 Worker)。

规范

规范
HTML
# event-message
HTML
# handler-messageeventtarget-onmessage

浏览器兼容性

另见