什么是 JavaScript 中的 MessageChannel？它在 Web Workers 之间或不同 Window 之间通信的优势是什么？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！今天咱们来聊聊 JavaScript 里一个有点神秘，但又非常实用的家伙——MessageChannel。这玩意儿啊，就像 Web Workers 和不同窗口之间的秘密通道，专门用来传递小纸条。

什么是 MessageChannel？

简单来说，MessageChannel 是 HTML5 提供的一个 API，它允许你创建两个端口（MessagePort），这两个端口可以相互发送消息。就像两个对讲机，一个对着麦克风说，另一个就能从喇叭里听到。

想象一下，你是一个间谍头子，需要和潜伏在敌营的特工传递情报。直接打电话？风险太大！用信鸽？速度太慢！这时候，就需要一个秘密通道，确保信息安全又快速地传递。MessageChannel 就是这个秘密通道。

MessageChannel 的基本用法

要创建一个 MessageChannel，只需要 new MessageChannel() 就可以了。这会返回一个对象，包含两个属性：port1 和 port2，分别代表两个端口。

const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;

console.log(channel); // MessageChannel {port1: MessagePort, port2: MessagePort}
console.log(port1);  // MessagePort {}
console.log(port2);  // MessagePort {}

接下来，我们需要监听这两个端口，看看有没有人发来消息。这就要用到 port.onmessage 事件。

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

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

然后，就可以通过 port.postMessage() 方法来发送消息了。

port1.postMessage("你好，我是 Port 1！");
port2.postMessage("你好，我是 Port 2！");

这段代码执行后，你会在控制台看到：

Port 2 收到消息: 你好，我是 Port 1！
Port 1 收到消息: 你好，我是 Port 2！

是不是很简单？就像发微信一样，只不过微信是用服务器中转，而 MessageChannel 是点对点直连。

MessageChannel 在 Web Workers 中的应用

Web Workers 允许你在后台线程运行 JavaScript 代码，避免阻塞主线程。但是，主线程和 Worker 线程之间是隔离的，不能直接访问彼此的变量和函数。这时候，MessageChannel 就派上用场了。

主线程 (main.js)

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

// 监听 Port 1 的消息
channel.port1.onmessage = (event) => {
  console.log("主线程收到 Worker 的消息:", event.data);
};

// 将 Port 2 发送给 Worker
worker.postMessage({ port: channel.port2 }, [channel.port2]); // 注意：需要转移所有权

// 主线程发送消息给 Worker
channel.port1.postMessage("你好，Worker！");

Worker 线程 (worker.js)

let workerPort;

// 监听主线程的消息
self.onmessage = (event) => {
  if (event.data.port) {
    workerPort = event.data.port; // 保存 Port 2

    // 监听 Port 2 的消息
    workerPort.onmessage = (event) => {
      console.log("Worker 收到主线程的消息:", event.data);

      // Worker 回复消息给主线程
      workerPort.postMessage("你好，主线程！");
    };
  }
};

这段代码的关键在于 worker.postMessage({ port: channel.port2 }, [channel.port2]);。这里，我们将 channel.port2 发送给 Worker，并且用 [channel.port2] 指定了要转移所有权的对象。如果不转移所有权，Worker 就无法使用这个端口。

为什么要转移所有权？

因为 MessagePort 只能属于一个线程。如果你不转移所有权，那么 Worker 线程就无法拥有这个端口，也就无法发送和接收消息了。

代码解释：

主线程创建了一个 MessageChannel。
主线程监听 channel.port1 的消息。
主线程将 channel.port2 发送给 Worker，并转移了所有权。
Worker 接收到 channel.port2，并保存到 workerPort 变量中。
Worker 监听 workerPort 的消息。
主线程通过 channel.port1 发送消息给 Worker。
Worker 收到消息后，通过 workerPort 回复消息给主线程。

优点：

双向通信： 主线程和 Worker 线程可以互相发送消息。
高效： 消息直接在两个线程之间传递，不需要经过额外的中转。
安全： 可以只允许特定的 Worker 线程与主线程通信。

MessageChannel 在不同 Window 之间的应用

MessageChannel 也可以用于不同 Window 之间的通信，例如 iframe 和父窗口之间，或者弹出窗口和父窗口之间。

父窗口 (parent.html)

<!DOCTYPE html>
<html>
<head>
  <title>父窗口</title>
</head>
<body>
  <h1>父窗口</h1>
  <iframe id="myIframe" src="iframe.html"></iframe>
  <script>
    const iframe = document.getElementById("myIframe");

    // 监听 iframe 加载完成事件
    iframe.onload = () => {
      const channel = new MessageChannel();

      // 监听 Port 1 的消息
      channel.port1.onmessage = (event) => {
        console.log("父窗口收到 iframe 的消息:", event.data);
      };

      // 将 Port 2 发送给 iframe
      iframe.contentWindow.postMessage({ port: channel.port2 }, "*", [channel.port2]);

      // 父窗口发送消息给 iframe
      channel.port1.postMessage("你好，iframe！");
    };
  </script>
</body>
</html>

iframe (iframe.html)

<!DOCTYPE html>
<html>
<head>
  <title>iframe</title>
</head>
<body>
  <h1>iframe</h1>
  <script>
    // 监听父窗口的消息
    window.onmessage = (event) => {
      if (event.data.port) {
        const iframePort = event.data.port;

        // 监听 Port 的消息
        iframePort.onmessage = (event) => {
          console.log("iframe 收到父窗口的消息:", event.data);

          // iframe 回复消息给父窗口
          iframePort.postMessage("你好，父窗口！");
        };
      }
    };
  </script>
</body>
</html>

这段代码与 Web Worker 的例子非常相似，只是发送消息的方式略有不同。

代码解释：

父窗口创建了一个 MessageChannel。
父窗口监听 channel.port1 的消息。
父窗口将 channel.port2 发送给 iframe，并转移了所有权。
- 这里使用了 iframe.contentWindow.postMessage() 方法来发送消息。
- 第二个参数 "*" 表示允许任何源的窗口接收消息。这在实际项目中应该替换为具体的源，以提高安全性。
- 第三个参数 [channel.port2] 指定了要转移所有权的对象。
iframe 接收到 channel.port2，并保存到 iframePort 变量中。
iframe 监听 iframePort 的消息。
父窗口通过 channel.port1 发送消息给 iframe。
iframe 收到消息后，通过 iframePort 回复消息给父窗口。

优点：

跨域通信： 可以安全地在不同源的窗口之间通信。
高效： 消息直接在两个窗口之间传递，不需要经过服务器中转。
可控： 可以只允许特定的窗口与父窗口通信。

MessageChannel 的优势

相比于其他的通信方式，MessageChannel 有以下几个明显的优势：

特性	MessageChannel	`postMessage` (无通道)	SharedWorker	BroadcastChannel
双向通信	是	否 (需要手动回复)	是	否
点对点	是	否 (广播)	是	否 (广播)
跨域安全	是	是 (需要验证 `origin`)	是	是
所有权转移	是	否	否	否
适用场景	复杂通信，需要高性能	简单通信	多页面共享数据	简单广播

双向通信： MessageChannel 提供了双向通信的能力，两个端口都可以发送和接收消息。而 postMessage 通常需要手动回复消息，才能实现双向通信。
点对点： MessageChannel 是点对点的通信，消息只会发送给指定的端口。而 postMessage 如果不使用 MessageChannel，则类似于广播，所有监听 message 事件的窗口都会收到消息。
安全： MessageChannel 可以安全地在不同源的窗口之间通信。postMessage 虽然也可以跨域通信，但是需要验证 origin，以防止恶意网站窃取数据。
所有权转移： MessageChannel 允许转移端口的所有权，这使得可以在不同的线程或窗口之间传递端口，从而实现更复杂的通信场景。
性能： 因为是点对点，不需要经过额外的中转，性能更高，尤其是在传输大量数据时。

MessageChannel 的注意事项

端口只能使用一次： 一旦一个端口被发送给另一个线程或窗口，它就不能再被当前线程或窗口使用了。
需要转移所有权： 如果要将端口发送给另一个线程或窗口，需要使用 transfer 参数来转移所有权。
跨域安全： 在使用 postMessage 发送消息时，应该始终验证 origin，以防止恶意网站窃取数据。
序列化： 通过 postMessage 发送的消息需要进行序列化，这意味着有些对象可能无法直接发送，例如函数。

总结

MessageChannel 是 JavaScript 中一个非常强大的 API，它可以用于在 Web Workers 和不同窗口之间建立安全、高效的通信通道。掌握了 MessageChannel，你就可以构建更复杂、更强大的 Web 应用。

希望今天的讲解对大家有所帮助！下次有机会再和大家聊聊其他的技术话题。感谢各位的收听！