MessageEvent - 表示由目标对象接收到的消息

MessageEvent 接口表示由目标对象接收到的消息。

它用于表示消息：

• 服务器发送的事件 (参见 EventSource.onmessage)。
• Web sockets（参见 WebSocket 接口的 onmessage 属性）。
• 跨文档消息传递（参见 Window.postMessage() 和 Window.onmessage）。
• 通道消息传递（参见 MessagePort.postMessage() 和 MessagePort.onmessage）。
• 跨worker/文档消息传递（参见上面两个入口，同时还有 Worker.postMessage()，Worker.onmessage，ServiceWorkerGlobalScope.onmessage 等等。）
• 广播通道（参见 Broadcastchannel.postMessage()) 和 BroadcastChannel.onmessage）。
• WebRTC 数据通道（参见 RTCDataChannel.onmessage）。

由该事件触发的操作在函数集中定义为相关 message 事件的事件处理程序（例如，使用上面列出的 onmessage 处理程序）。

构造函数

MessageEvent()

创建一个新的 MessageEvent。

属性

该接口还继承其父接口 event 的属性。

MessageEvent.data 只读

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

MessageEvent.origin 只读

一个 USVString，表示消息发送器的源。

MessageEvent.lastEventId 只读

一个 DOMString，表示事件的唯一 ID。

MessageEvent.source 只读

一个 MessageEventSource （其可以是 WindowProxy，MessagePort 或 ServiceWorker 对象）表示消息发送器。

MessageEvent.ports 只读

一个包含 MessagePort 对象的数组，表示与正在发送消息（在适当情况下，例如在通道消息传递中或向共享 worker 发送消息时）的通道相关联的端口。

方法

该接口还继承其父接口 event 的方法。

initMessageEvent()

初始化一个消息事件。不要再使用这个方法 - 使用 MessageEvent() 构造函数替代。

更多实例

在我们的基础共享 worker 实例（运行共享 worker）中，我们有两个 HTML 页面，每个页面都使用一些 JavaScript 进行简单的计算。 不同的脚本使用相同的工作文件来执行计算 - 即使它们的页面在不同的窗口中运行，它们也可以访问该文件。

下面的代码片段显示了使用 SharedWorker() 构造函数创建 SharedWorker 对象的过程。这两个脚本都包含以下内容：

var myWorker = new SharedWorker('worker.js');

然后，这两个脚本都通过使用 SharedWorker.port 属性创建的 MessagePort 对象访问 worker。如果使用 addEventListener 绑定 onmessage 事件，则使用端口的 start() 方法手动启动该端口：

myWorker.port.start();

启动端口后，这两个脚本都将消息发布到 worker，并分别使用 port.postMessage() 和 port.onmessage 处理从其发送的消息：

first.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('消息发送到 worker');
}

second.onchange = function() {
  myWorker.port.postMessage([first.value,second.value]);
  console.log('消息发送到 worker');
}

myWorker.port.onmessage = function(e) {
  result1.textContent = e.data;
  console.log('从 worker 接受消息');
}

在 worker 内部，我们使用 SharedWorkerGlobalScope.onconnect 处理程序连接到上述相同的端口。可在 connect 事件的 ports 属性中访问与该 worker 关联的端口 - 然后，我们使用 MessagePort start() 方法启动端口，并使用 onmessage 处理程序处理从主线程发送的消息。

onconnect = function(e) {
  var port = e.ports[0];

  port.addEventListener('message', function(e) {
    var workerResult = '结果：' + (e.data[0] * e.data[1]);
    port.postMessage(workerResult);
  });

  port.start(); // 使用 addEventListener 时必需。否则由 onmessage setter 隐式调用。
}

规范

规范	状态	备注
HTML Living Standard MessageEvent 的定义	现行的标准	-

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• ExtendableMessageEvent - 类似这个的接口，但用于需要更多灵活的情况。