MessageChannel 通过一对可跨上下文传递的 MessagePort 实现同源环境下的点对点双向通信，天然支持组件解耦；需显式调用 start() 启用消息接收，消息受结构化克隆限制，适用于 iframe 和 Worker 场景。
MessageChannel 可以在同源的两个执行上下文（比如 iframe、Worker、主线程与 Web Worker）之间建立独立的双向通信通道，天然适合解耦组件——尤其是当它们无法直接引用彼此、又需要低耦合交互时。
理解 MessageChannel 的核心机制
MessageChannel 创建一对相连的 MessagePort 对象：port1 和 port2。二者互为对方的“远端”，发送到一个 port 的消息会立即被另一个 port 接收，不经过 window 或全局事件循环中转。这种点对点、无中间代理的设计，让通信双方完全匿名、无依赖。
关键点：
- 两个 port 必须显式调用
port.start()才能开始接收消息（使用onmessage时可省略，但推荐显式启动） - port 可跨上下文传递（如通过
postMessage(port, [port])），这是实现解耦的基础能力 - 消息内容受结构化克隆算法限制，不能传函数、DOM 节点或循环引用对象
在 iframe 场景中实现父子组件解耦
假设主页面嵌入一个第三方 iframe（无法修改其代码），但需安全地与其交换配置与状态，又不想依赖 postMessage 的字符串 type 判断和全局监听。
立即学习“前端免费学习笔记（深入）”；
做法是：父页创建 MessageChannel，将其中一个 port 发送给 iframe，自己保留另一个；iframe 收到后保存 port 并主动建立响应能力。
父页示例：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
const channel = new MessageChannel();
const iframe = document.querySelector('iframe');
// 把 port2 发给 iframe
iframe.contentWindow.postMessage({ type: 'INIT_PORT', payload: {} }, '*', [channel.port2]);
// 父页监听自己的 port1
channel.port1.onmessage = (e) => {
if (e.data.type === 'READY') {
channel.port1.postMessage({ type: 'SET_CONFIG', config: { theme: 'dark' } });
}
if (e.data.type === 'USER_ACTION') {
console.log('收到子组件动作:', e.data.payload);
}
};
channel.port1.start();
iframe 内脚本（无需知道父页结构）：
window.onmessage = (e) => {
if (e.data.type === 'INIT_PORT' && e.ports?.[0]) {
const remotePort = e.ports[0];
remotePort.onmessage = (e) => {
if (e.data.type === 'SET_CONFIG') {
applyTheme(e.data.config);
}
};
remotePort.start();
// 主动告知已就绪
remotePort.postMessage({ type: 'READY' });
}
};
在 Web Worker 中隔离业务逻辑与 UI
将数据处理、轮询、状态机等逻辑放入 Worker，UI 组件只负责渲染和触发事件。MessageChannel 比直接用 Worker 的 postMessage 更清晰——避免所有消息挤在同一个通道里混杂 type 字段。
主线程：
const channel = new MessageChannel();
const worker = new Worker('logic.js');
// 把 port2 给 Worker
worker.postMessage({ type: 'BIND_CHANNEL' }, [channel.port2]);
// 用 port1 与 Worker 专用通信
channel.port1.onmessage = (e) => {
if (e.data.type === 'DATA_UPDATE') render(e.data.payload);
};
channel.port1.start();
logic.js（Worker 内）：
let uiPort;
self.onmessage = (e) => {
if (e.data.type === 'BIND_CHANNEL' && e.ports?.[0]) {
uiPort = e.ports[0];
uiPort.onmessage = handleUiMessage;
uiPort.start();
}
};
function handleUiMessage(e) {
if (e.data.type === 'START_FETCH') {
fetch('/api').then(r => r.json()).then(data => {
uiPort.postMessage({ type: 'DATA_UPDATE', payload: data });
});
}
}
封装成可复用的通信桥接器
为避免重复写 port 启动、错误监听、消息包装，可封装一个轻量 Bridge 类：
class MessageBridge {
constructor(localPort, remotePort) {
this.local = localPort;
this.remote = remotePort;
this.local.start();
this.handlers = new Map();
}
on(type, cb) {
this.handlers.set(type, cb);
this.local.onmessage = (e) => {
const { type, payload } = e.data;
if (this.handlers.has(type)) this.handlers.get(type)(payload);
};
}
emit(type, payload) {
this.remote.postMessage({ type, payload });
}
close() {
this.local.close();
this.remote.close();
}
}
使用时只需：
// 主线程
const channel = new MessageChannel();
someIframe.postMessage({ init: true }, '*', [channel.port2]);
const bridge = new MessageBridge(channel.port1, channel.port2);
bridge.on('click', (data) => console.log(data));
bridge.emit('ready', { version: '1.0' });
不复杂但容易忽略：port 关闭后不可重用，且未 start 的 port 不会触发 onmessage；跨域 iframe 无法接收 transferred port，此时需回退到传统 postMessage + origin 校验。
