什么是 MessageChannel？

MessageChannel 是浏览器提供的用于创建双向通信通道的 Web API。它创建一个包含两个相互连接的端口的通道，实现不同上下文之间的直接通信。

基本结构

// 创建消息通道
const channel = new MessageChannel();

// 两个相互关联的端口
const port1 = channel.port1; // 端口1
const port2 = channel.port2; // 端口2

// 使用方法
port1.onmessage = (event) => {
  console.log("收到消息:", event.data);
};
port2.postMessage("Hello!"); // port1 会收到此消息

主要使用场景

1. Web Worker 通信

主线程与 Worker 线程建立高效的直接通信：

// 主线程
const worker = new Worker("worker.js");
const channel = new MessageChannel();

// 将 port2 传递给 Worker
worker.postMessage({ type: "init" }, [channel.port2]);

// 通过 port1 与 Worker 通信
channel.port1.postMessage("数据消息");

2. iframe 间通信

父子窗口建立私有通信通道，避免消息冲突：

// 父窗口
const iframe = document.querySelector("iframe");
const channel = new MessageChannel();

// 将 port2 传递给 iframe
iframe.contentWindow.postMessage("init", "*", [channel.port2]);

// 直接通信
channel.port1.postMessage("私有消息");

3. Service Worker 通信

页面与 Service Worker 建立持久连接：

// 页面脚本
if (navigator.serviceWorker.controller) {
  const channel = new MessageChannel();
  navigator.serviceWorker.controller.postMessage("port", [channel.port2]);
  channel.port1.onmessage = (event) => {
    // 处理 Service Worker 消息
  };
}

4. 模块间解耦通信

复杂应用中隔离不同模块的通信流。

技术对比

特性	MessageChannel	postMessage	BroadcastChannel
通信模式	双向点对点	单向广播	一对多广播
性能	高	中	中
隐私性	私有通道	公开	公开
适用场景	深度交互	简单通知	多页面同步

核心优势

• ✅ 高性能：直接通信，无需中转
• ✅ 双向性：天然支持双向数据流
• ✅ 隔离性：私有通道，避免消息干扰
• ✅ 灵活性：端口可转移至不同上下文

总结

MessageChannel 是处理需要高性能、私有、双向通信场景的理想选择，特别适合 Worker、iframe、Service Worker 等跨上下文深度交互的需求。

更新日志

2025/9/27 17:16

查看所有更新日志

• 1eb9b-docs(Javascript): 更新Generator生成器函数文档内容于 2025/9/27