浅析浏览器的通信

概述

在开发工作中，应用程序通常会运行在一个上下文环境中或者打开一个tab页标签足以，但是某些时候我们需要运行第三方sdk或者利用iframe嵌套其它的应用程序，这时候可能会涉及到两个线程或者两个tab页标签的数据通信，一般情况下，MessageChannel和BroadcastChannel可以满足这类需求

浅谈 MessageChannel

MessageChannel 简单介绍

MessageChannel 是一个用于在两个线程之间传递消息的接口。它允许两个线程之间进行通信，而不需要使用任何同步机制。换句话说，就是可以让两个不同的脚本运行在同一个文档的不同浏览器上下文中，（例如两个 iframe，文档主体和一个 iframe、使用 sharedWorker 的两个文档或两个 worker）来直接通讯，在每端使用一个端口 port 通过双向频道 channel 向彼此传递消息。

MessageChannel是以DOM Event的形式发送消息，因此它属于异步的宏任务。

MessageChannel 如果使用addEventListener方式监听message事件，那么message事件会在DOM Event之后触发,并且在此之前需要手动调用start()方法才能使消息流动，而onmessage方式监听则会在DOM Event之前触发，且自动调用start()方法。

MessageChannel 使用步骤

具体使用步骤如下

1. 创建MessageChannel实例（通讯通道），new MessageChannel()会返回两个端口 MessagePort 对象port1、port1
2. port1、port2分别用于postMessage发送消息和onmessage接收消息
3. MessageChannel实现消息传递是深拷贝，因此消息需要是可以进行反序列化的大多数原始对象，像Symbole、Function则不能用作消息
4. 调用close方法关闭端口，将不能向该端口发送消息

示例

var channel = new MessageChannel();
console.log("🚀 ~ channel:", channel);
var port1 = channel.port1;
console.log("🚀 ~ port1:", port1);
var port2 = channel.port2;
console.log("🚀 ~ port2:", port2);

port1.onmessage = function (event) {
  console.log("port1：" + event.data);
};

port2.onmessage = function (event) {
  console.log("port2：" + event.data);
};

port1.postMessage("我是port1，发送给port2");
port2.postMessage("我是port2，发送给port1");
port1.close();

BroadcastChannel 介绍

浏览器标签其实可以相互进行通信，需要用到BroadcastChannel,关于BroadcastChannel，MDN 上是这样介绍的：

• 接口代理了一个命名频道，可以让指定 origin 下的任意 browsing context 来订阅它。它允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。

和MessageChannel的不同

上面提到的MessageChannel适用于两个线程之间的通信，而BroadcastChannel可以用于两个不同进程之间的通信。

BroadcastChannel的语法

BroadcastChannel可以通过构造函数生成一个实例，然后通过实例监听消息、发送消息，如下：

const channel = new BroadcastChannel("myChannel"); //接收一个参数name，这个名称在同一域名下的不同页面之间必须是唯一的

channel.onmessage = (event) => {
  ...
};

const sendMessage = (message) => {
  channel.postMessage(message);
};

channel.onmessageerror=(error)=>{
  ...
}

示例

一个简单的示例可参考Box 在不同 tab 无缝移动