MessageChannel

MessageChannel 是一个 JavaScript API，用于在两个独立的执行环境（如 Web Workers 或者不同的 browsing contexts）之间建立双向通信的通道。MessageChannel 提供了两个通信端点（port1 和 port2），可以在两个不同的执行环境之间传递消息，并通过事件监听的方式来处理这些消息。

使用场景包括但不限于：

• Web Workers 通信：在 Web 开发中，MessageChannel 通常用于在主线程和 Web Worker 之间建立通信通道，以便主线程与 Worker 之间传递消息和数据。
• 不同浏览上下文（browsing context）之间的通信：在现代浏览器中，多个标签页、iframe 或者其他类型的 browsing context 可以通过 MessageChannel 实现通信。
• SharedWorker 通信：MessageChannel 可以用于在主线程和 Shared Worker 之间建立通信通道。
• 服务端和客户端之间的通信：MessageChannel 可以用于客户端（如浏览器）与服务端（如 WebSocket 服务器）之间的通信，特别是在与 WebSocket 或其他类似技术结合使用时。
• 异步任务处理：在某些场景中，使用 MessageChannel 可以更方便地处理异步任务，因为它提供了独立于主线程的通信通道。

使用示例

下面是一个简单的示例，展示如何使用 MessageChannel 在主线程和 Web Worker 之间建立通信通道：

// 创建 MessageChannel
const channel = new MessageChannel()
const port1 = channel.port1
const port2 = channel.port2

// 在主线程中
const worker = new Worker('worker.js')
worker.postMessage({ port: port2 }, [port2])

port1.onmessage = function (event) {
  console.log('Received message from worker:', event.data)
}

// 发送消息给 worker
port1.postMessage('Hello, Worker!')

在上面的示例中，我们创建了一个 MessageChannel，并通过 port1 和 port2 进行通信。我们将 port2 发送给 Web Worker，port1 留在主线程。然后，主线程可以通过监听 port1 的 onmessage 事件来接收来自 Web Worker 的消息，并通过 port1.postMessage() 向 Web Worker 发送消息。