前端是什么鬼系列 -- MessageChannel 是什么鬼

主题：介绍MessageChannel API及其用法

预计阅读时间：2min

看某个JS库源码的时候发现了MessageChannel，这是什么鬼？

MessageChannel接口是信道通信API的一个接口，它允许我们创建一个新的信道并通过信道的两个MessagePort属性来传递数据

简单来说，MessageChannel创建了一个通信的管道，这个管道有两个口子，每个口子都可以通过postMessage发送数据，而一个口子只要绑定了onmessage回调方法，就可以接收从另一个口子传过来的数据。

一个简单的例子：

   var ch = new MessageChannel();
   var p1 = ch.port1;
   var p2 = ch.port2;
   p1.onmessage = function(e){console.log("port1 receive " + e.data)}
   p2.onmessage = function(e){console.log("port2 receive " + e.data)}
   p1.postMessage("你好世界");
   p2.postMessage("世界你好")；

MessageChannel用法很简单，但是功能却不可小觑。例如当我们使用多个web worker并想要在两个web worker之间实现通信的时候，MessageChannel就可以派上用场：

main.html