各位靓仔靓女，晚上好！我是今晚的讲师，接下来咱们聊聊JavaScript里一个有点意思，但平时不怎么被“宠幸”的家伙——MessageChannel。
这玩意儿，就好比你和隔壁老王（假设你们住在不同的Web Worker里）之间架设了一条专用“秘密通道”，你们可以直接点对点地“窃窃私语”，而不用通过中间人（例如主线程）来传话。
一、MessageChannel 是个啥？
简单来说，MessageChannel 是一个接口，它允许创建两个端口 (MessagePort 对象)，这两个端口可以互相发送消息。你可以把一个端口给一个 Web Worker，把另一个端口留在主线程里，或者干脆都扔给不同的 Worker，让它们直接沟通。
想象一下，你和老王都有一部对讲机，你们可以直接用对讲机交流，而不用每次都跑到楼下喊话，省时省力，还避免了被楼里其他人偷听（理论上）。
二、MessageChannel 的基本用法
-
创建
MessageChannel对象：const channel = new MessageChannel();这就像你买了一对对讲机。
-
获取两个端口：
const port1 = channel.port1; const port2 = channel.port2;这就是两部对讲机，你可以把一部给老王，自己留一部。
-
监听端口上的消息：
port1.onmessage = (event) => { console.log("Port 1 收到消息:", event.data); }; port2.onmessage = (event) => { console.log("Port 2 收到消息:", event.data); };这相当于你打开了对讲机的监听功能，准备接收老王的消息。
-
发送消息：
port1.postMessage("你好，老王！我是小明。"); port2.postMessage("小明你好！我是老王。");这就是你拿起对讲机，对着麦克风说话。
-
启动端口（重要！）：
port1.start(); port2.start();这相当于你打开对讲机的电源，让它开始工作。 如果不
start()，消息是不会被传递的。
三、Web Worker 之间点对点通信的原理
现在，我们来把 MessageChannel 应用到 Web Worker 上。假设我们有两个 Worker：worker1.js 和 worker2.js。
-
主线程代码：
const worker1 = new Worker("worker1.js"); const worker2 = new Worker("worker2.js"); const channel = new MessageChannel(); const port1 = channel.port1; const port2 = channel.port2; // 将 port1 发送给 worker1 worker1.postMessage({ port: port1 }, [port1]); // 注意：需要传递 port1 的所有权 // 将 port2 发送给 worker2 worker2.postMessage({ port: port2 }, [port2]); // 注意：需要传递 port2 的所有权 // 监听 worker1 发来的消息 (可选，如果主线程也需要参与通信) port1.onmessage = (event) => { console.log("主线程收到来自 worker1 的消息:", event.data); }; // 监听 worker2 发来的消息 (可选，如果主线程也需要参与通信) port2.onmessage = (event) => { console.log("主线程收到来自 worker2 的消息:", event.data); }; port1.start(); port2.start();这里，主线程创建了两个 Worker 和一个
MessageChannel。关键在于，我们使用postMessage将port1和port2分别发送给了worker1和worker2。注意postMessage的第二个参数[port1]和[port2]，这表示我们将port1和port2的所有权转移给了 Worker。 如果不传递所有权，Worker 将无法使用这些端口。 -
worker1.js代码：let port; self.onmessage = (event) => { if (event.data.port) { port = event.data.port; port.onmessage = (event) => { console.log("Worker 1 收到来自 Worker 2 的消息:", event.data); }; port.start(); // 向 Worker 2 发送消息 port.postMessage("你好，Worker 2！我是 Worker 1。"); } };Worker 1 接收到主线程发来的消息，从中提取出
port对象，并设置消息监听器。然后，它向 Worker 2 发送了一条消息。 -
worker2.js代码：let port; self.onmessage = (event) => { if (event.data.port) { port = event.data.port; port.onmessage = (event) => { console.log("Worker 2 收到来自 Worker 1 的消息:", event.data); }; port.start(); // 向 Worker 1 发送消息 port.postMessage("你好，Worker 1！我是 Worker 2。"); } };Worker 2 的代码与 Worker 1 类似，接收
port对象，设置消息监听器，然后向 Worker 1 发送一条消息。
核心原理：
- 所有权转移：
postMessage的第二个参数[port1]和[port2]至关重要。它将port对象的所有权从主线程转移到了 Worker。如果没有这个步骤，Worker 将无法直接使用port对象发送消息。你可以把这个想象成，你把对讲机送给了老王，他才能用对讲机跟你说话。 - 点对点通信： 一旦 Worker 获得了
port对象的所有权，它们就可以直接通过这个port对象进行通信，而不需要经过主线程的“中转”。 start()方法： 必须调用port.start()方法才能启动端口，否则消息不会被传递。
四、MessageChannel 的应用场景
-
Web Worker 之间的通信： 这是
MessageChannel最常见的用途。例如，你可以让一个 Worker 负责处理图像，另一个 Worker 负责处理音频，然后用MessageChannel让它们协同工作。 -
主线程与 Web Worker 之间的复杂通信： 虽然主线程也可以直接与 Worker 通信，但如果通信逻辑比较复杂，使用
MessageChannel可以简化代码，提高可维护性。 -
模拟事件循环： 有些库会使用
MessageChannel来模拟事件循环，实现更高级的并发控制。 -
组件间的通信： 在某些复杂的应用中，不同的组件可能运行在不同的上下文中。
MessageChannel可以用于这些组件之间的通信。
五、MessageChannel 的优缺点
优点：
- 高效： Worker 之间可以直接通信，避免了主线程的中转，提高了性能。
- 解耦： Worker 之间的通信逻辑与主线程解耦，使代码更清晰、更易于维护。
- 灵活性： 可以灵活地控制 Worker 之间的通信方式，实现各种复杂的协作模式。
缺点：
- 复杂性： 相对于简单的
postMessage，使用MessageChannel需要更多的代码和更深入的理解。 - 调试难度： Worker 之间的通信可能会增加调试的难度。
六、一个更复杂的例子：图像处理
假设我们有一个 Web 应用，需要对图像进行处理。我们可以将图像处理的任务交给一个 Web Worker，然后使用 MessageChannel 将处理结果返回给主线程。
-
主线程代码：
const worker = new Worker("image-processor.js"); const imageInput = document.getElementById("image-input"); const processedImage = document.getElementById("processed-image"); imageInput.addEventListener("change", (event) => { const file = event.target.files[0]; const reader = new FileReader(); reader.onload = (e) => { const imageData = e.target.result; const channel = new MessageChannel(); const port1 = channel.port1; const port2 = channel.port2; worker.postMessage({ image: imageData, port: port2 }, [port2]); port1.onmessage = (event) => { processedImage.src = event.data.processedImage; }; port1.start(); }; reader.readAsDataURL(file); });主线程监听文件上传事件，读取图像数据，创建
MessageChannel，将图像数据和port2发送给 Worker。然后，监听port1上的消息，接收处理后的图像数据，并将其显示在页面上。 -
image-processor.js代码：self.onmessage = (event) => { const imageData = event.data.image; const port = event.data.port; // 模拟图像处理 setTimeout(() => { const processedImage = processImage(imageData); port.postMessage({ processedImage }); port.close(); // 处理完成后关闭端口 }, 1000); }; function processImage(imageData) { // 这里可以编写实际的图像处理代码 // 例如，使用 Canvas API 对图像进行滤镜、裁剪、缩放等操作 // 这里为了演示，简单地将图像数据返回 return imageData; }Worker 接收到图像数据和
port对象，然后模拟图像处理，并将处理后的图像数据通过port发送给主线程。 处理完成后，调用port.close()关闭端口，释放资源。
七、MessageChannel 与 BroadcastChannel 的区别
MessageChannel 和 BroadcastChannel 都是用于通信的 API，但它们的应用场景不同。
| 特性 | MessageChannel |
BroadcastChannel |
|---|---|---|
| 通信方式 | 点对点 | 一对多（广播） |
| 端口数量 | 两个（port1 和 port2） |
一个 |
| 应用场景 | 需要两个特定实体之间进行私密通信的场景 | 需要向多个监听者广播消息的场景 |
| 目标 | 特定目标 | 所有监听者 |
| 是否需要启动 | 需要调用 start() 启动端口 |
不需要 |
你可以把 MessageChannel 想象成两部对讲机，只能两个人通话；而 BroadcastChannel 就像一个广播电台，所有收音机都能收到它的信号。
八、注意事项
- 所有权转移： 在使用
postMessage传递MessagePort对象时，一定要注意传递所有权，否则接收方无法使用该端口。 start()方法： 必须调用port.start()方法才能启动端口，否则消息不会被传递。close()方法： 处理完成后，应该调用port.close()方法关闭端口，释放资源。- 序列化： 传递的消息必须是可序列化的，例如字符串、数字、对象等。不能传递函数或 DOM 节点。
- 安全： 注意防范跨站脚本攻击（XSS），不要信任来自不可信来源的消息。
九、总结
MessageChannel 是一个强大的 API，可以实现 Web Worker 之间的高效、解耦的通信。虽然它的使用稍微复杂一些，但掌握它可以让你在 Web 开发中更加游刃有余。
希望今天的讲解对大家有所帮助！ 如果你们以后遇到隔壁老王需要秘密交流的场景，记得想起 MessageChannel 这个好伙伴！
大家晚安！