JS `MessageChannel`：在 `iframe` 或 `Worker` 间建立安全双向通信

各位观众老爷，晚上好！我是今晚的主讲人，很高兴能和大家一起聊聊 JavaScript 里一个相当实用但又容易被忽略的家伙：MessageChannel。别看它名字平平无奇，实际上它可是构建安全可靠的跨域、跨上下文通信的利器。今天咱们就深入浅出地把它扒个底朝天，保证让你听完之后，能像驾驭老司机一样驾驭它。

一、啥是 MessageChannel？它能干啥？

简单来说，MessageChannel 提供了一种在两个不同的 JavaScript 上下文之间建立双向通信通道的方法。这些上下文可以是：

主页面和 iframe
主页面和 Web Worker
两个 iframe
两个 Web Worker
甚至是同一个页面中两个不同的脚本区域（虽然这种情况用处不大，但理论上可行）

它的核心作用是：

安全通信： 避免直接访问其他上下文的全局对象，减少安全风险。
解耦： 将不同部分的逻辑隔离，提高代码的可维护性。
异步通信： 基于消息传递，避免阻塞主线程，提升用户体验。

二、MessageChannel 的基本用法：

MessageChannel 的用法非常简单，主要涉及以下几个步骤：

创建 MessageChannel 对象：
```
const channel = new MessageChannel();
```
这就像创建了一个管道，准备用来传输数据。
获取两个端口：
```
const port1 = channel.port1;
const port2 = channel.port2;
```
MessageChannel 对象有两个属性 port1 和 port2，它们都是 MessagePort 对象，代表管道的两端。你可以把 port1 给一个上下文，port2 给另一个上下文。

监听消息：

port1.onmessage = (event) => {
    console.log("port1 收到消息：", event.data);
};

port2.onmessage = (event) => {
    console.log("port2 收到消息：", event.data);
};

在每个端口上注册 onmessage 事件监听器，以便接收消息。event.data 包含发送过来的数据。

发送消息：
```
port1.postMessage("Hello from port1!");
port2.postMessage({ message: "Greetings from port2!", value: 42 });
```
使用 postMessage() 方法发送消息。可以发送字符串、对象、数组等各种类型的数据。注意，如果是对象或数组，它们会被自动序列化和反序列化。
启动端口：
```
port1.start();
port2.start();
```
必须显式调用 start() 方法才能开始接收消息。这是一个容易被忽略的点，如果没有调用start()方法，onmessage的回调是不会被执行的。

三、一个完整的 iframe 通信示例：

咱们来做一个实际的例子，演示如何在主页面和 iframe 之间使用 MessageChannel 进行通信。

1. 主页面 (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>MessageChannel Example</title>
</head>
<body>
    <h1>Main Page</h1>
    <iframe id="myIframe" src="iframe.html"></iframe>

    <script>
        const iframe = document.getElementById("myIframe");

        iframe.onload = () => {
            const channel = new MessageChannel();
            const port1 = channel.port1;
            const port2 = channel.port2;

            port1.onmessage = (event) => {
                console.log("Main page received:", event.data);
            };

            port1.start(); // 启动port1

            // 将 port2 传递给 iframe
            iframe.contentWindow.postMessage({ port: port2 }, "*", [port2]); //第三个参数 [port2] 是关键！

            // 发送初始消息给 iframe
            port1.postMessage("Hello from the main page!");
        };
    </script>
</body>
</html>

2. iframe 页面 (iframe.html):

<!DOCTYPE html>
<html>
<head>
    <title>Iframe Page</title>
</head>
<body>
    <h1>Iframe</h1>
    <script>
        window.addEventListener("message", (event) => {
            if (event.data.port) {
                const port = event.data.port;

                port.onmessage = (event) => {
                    console.log("Iframe received:", event.data);
                };

                port.start(); // 启动port

                // 发送消息给主页面
                port.postMessage("Greetings from the iframe!");
            }
        });
    </script>
</body>
</html>

代码解释：

主页面：
- 首先创建一个 iframe 元素。
- 在 iframe 加载完成后，创建一个 MessageChannel。
- 获取 port1 并设置 onmessage 监听器。
- 使用 iframe.contentWindow.postMessage() 将 port2 传递给 iframe。注意第三个参数 [port2]，这个参数是 transfer 数组，它将 port2 的所有权转移给 iframe。如果没有传递这个数组，iframe 只能接收到 port2 的一个副本，无法直接使用它进行通信。
- 发送一条初始消息给 iframe。
iframe 页面：
- 监听 window 上的 message 事件。
- 如果接收到的消息包含 port 属性，说明主页面传递了 MessagePort。
- 获取 port 并设置 onmessage 监听器。
- 发送一条消息给主页面。

运行结果：

打开 index.html，你会在控制台中看到主页面和 iframe 之间成功地进行了双向通信。

四、transfer 列表：更高效的数据传输

在 postMessage() 方法中，除了可以传递数据之外，还可以传递一个 transfer 列表。这个列表包含一些对象，这些对象的所有权会从发送方转移到接收方。这意味着：

零拷贝： 数据不会被复制，而是直接移动到接收方的内存空间，大大提高了传输效率。
发送方不再拥有这些对象： 发送方不能再访问或修改这些对象，否则会出错。

哪些对象可以被转移？

ArrayBuffer
MessagePort
ImageBitmap
OffscreenCanvas

示例：转移 ArrayBuffer

// 发送方
const buffer = new ArrayBuffer(1024 * 1024); // 1MB 的数据
const port = channel.port1;

port.postMessage(buffer, [buffer]); // 将 buffer 的所有权转移给接收方

// 接收方
port.onmessage = (event) => {
    const receivedBuffer = event.data;
    console.log("Received buffer:", receivedBuffer);

    // 接收方可以使用 receivedBuffer
};

在这个例子中，ArrayBuffer 对象 buffer 的所有权被转移到了接收方。发送方不能再访问 buffer，但接收方可以安全地使用它。这种方式在大数据传输时非常有用，可以避免不必要的内存拷贝，提高性能。

五、MessageChannel 在 Web Worker 中的应用：

MessageChannel 在 Web Worker 中也扮演着重要的角色，它可以用来：

将任务分发给 Worker： 主线程可以将需要长时间运行的任务发送给 Worker 处理，避免阻塞主线程。
接收 Worker 的计算结果： Worker 完成任务后，可以通过 MessageChannel 将结果返回给主线程。
进行复杂的 Worker 间通信： 多个 Worker 可以通过 MessageChannel 建立复杂的通信网络。

示例：主线程向 Worker 发送任务

1. 主线程 (main.js):

const worker = new Worker("worker.js");
const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;

port1.onmessage = (event) => {
    console.log("Main thread received:", event.data);
};

port1.start();

// 将 port2 传递给 Worker
worker.postMessage({ port: port2 }, [port2]);

// 发送任务给 Worker
port1.postMessage({ task: "calculateSum", numbers: [1, 2, 3, 4, 5] });

2. Worker 线程 (worker.js):

self.addEventListener("message", (event) => {
    if (event.data.port) {
        const port = event.data.port;

        port.onmessage = (event) => {
            const task = event.data.task;
            const numbers = event.data.numbers;

            if (task === "calculateSum") {
                const sum = numbers.reduce((a, b) => a + b, 0);
                port.postMessage({ result: sum });
            }
        };

        port.start();
    }
});

代码解释：

主线程：
- 创建一个 Worker 对象。
- 创建一个 MessageChannel。
- 将 port2 传递给 Worker。
- 发送一个包含任务信息的对象给 Worker。
Worker 线程：
- 监听 message 事件。
- 如果接收到的消息包含 port 属性，说明主线程传递了 MessagePort。
- 处理任务并使用 port.postMessage() 将结果返回给主线程。

六、MessageChannel 的高级用法：

除了基本的用法之外，MessageChannel 还有一些高级用法，可以让你更好地控制通信过程。

close() 方法：

可以调用 port.close() 方法来关闭一个端口。关闭端口后，将无法再发送或接收消息。
```
port1.close();
port2.close();
```
关闭端口可以释放资源，避免内存泄漏。
错误处理：

可以通过监听 port.onmessageerror 事件来处理消息传递过程中发生的错误。
```
port1.onmessageerror = (event) => {
    console.error("Message error:", event);
};
```
这个事件通常在以下情况下触发：
- 尝试发送无法序列化的对象。
- 接收到的消息的来源与预期不符。

利用 MessageChannel 实现 Promise 风格的通信：

虽然 MessageChannel 本身是基于事件的，但我们可以利用它来实现 Promise 风格的通信，让代码更简洁易懂。

function sendMessage(port, message) {
    return new Promise((resolve, reject) => {
        const messageChannel = new MessageChannel();
        port.postMessage(message, [messageChannel.port2]); // 将 port2 传递过去，用于接收响应

        messageChannel.port1.onmessage = (event) => {
            resolve(event.data); // 接收到响应，resolve Promise
        };

        messageChannel.port1.start();
    });
}

// 使用示例
sendMessage(port1, { action: "getData" })
    .then(data => {
        console.log("Received data:", data);
    })
    .catch(error => {
        console.error("Error:", error);
    });

这种方式的思路是，每次发送消息时，都创建一个新的 MessageChannel，并将 port2 传递给接收方。接收方在处理完消息后，使用 port2 发送响应。发送方通过 port1 接收响应，并 resolve Promise。

七、MessageChannel 的优势和局限性：

优势：

安全： 避免直接访问其他上下文的全局对象，降低安全风险。
解耦： 将不同部分的逻辑隔离，提高代码的可维护性。
高效： 可以通过 transfer 列表实现零拷贝数据传输，提高性能。
灵活： 适用于各种跨域、跨上下文通信场景。

局限性：

兼容性： 虽然现代浏览器都支持 MessageChannel，但在一些老旧浏览器中可能不支持。
复杂性： 相比于简单的函数调用，MessageChannel 的使用稍微复杂一些。
调试： 跨上下文通信的调试可能会比较困难。

八、MessageChannel 的应用场景：

iframe 沙箱： 使用 iframe 创建一个沙箱环境，运行不受信任的代码，并通过 MessageChannel 与主页面进行安全通信。
Web Worker 多线程： 将计算密集型任务分发给 Web Worker 处理，避免阻塞主线程，提高用户体验。
扩展程序开发： 在浏览器扩展程序的不同部分之间进行通信。
游戏开发： 在游戏的不同模块之间进行通信，例如渲染线程和逻辑线程。

九、总结：

MessageChannel 是一个强大而灵活的 JavaScript API，它可以帮助我们构建安全可靠的跨域、跨上下文通信机制。掌握 MessageChannel 的用法，可以让你在开发复杂的 Web 应用时更加得心应手。虽然它的学习曲线稍微陡峭一些，但是一旦掌握了它，你就会发现它的强大之处。记住，transfer 列表是提高性能的关键，而理解 MessagePort 的生命周期是避免错误的基础。

好了，今天的讲座就到这里。希望大家能通过今天的学习，对 MessageChannel 有更深入的了解。感谢大家的观看，我们下次再见！

发表回复 取消回复

发表回复取消回复