浅析浏览器的通信

概述

在开发工作中，应用程序通常会运行在一个上下文环境中或者打开一个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方法关闭端口，将不能向该端口发送消息

示例