通信API MessageChannel

一、简介

MessageChannel 接口允许我们创建一个新的消息通道，并通过它的两个MessagePort 属性发送数据。

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

MessageChannel的使用场景：

• 2个 Web Worker 间通信

二、2个简单的使用例子

例子1：

   var ch = new MessageChannel();
   var p1 = ch.port1; // MessagePort
   var p2 = ch.port2; // MessagePort
   p1.onmessage = function(e){console.log("port1 receive " + e.data)}
   p2.onmessage = function(e){console.log("port2 receive " + e.data)}
   p1.postMessage("1111");
   p2.postMessage("2222");
   // port2 receive 1111
   // port1 receive 2222

例子2：主页面和 iframe 页面通信

index.html

  
    
Channel messaging demo
    
My body
    
  
  

page.html

  
    
iFrame body
  
  

三、兼容性

所有浏览器都兼容。

四、参考文章

• MDN：MessageChannel