BroadcastChannel 实现跨页面实时通讯

需求：A页面上点击编辑，是跳转到一个新的B页面，这个B页面编辑之后，A页面要自动刷新，在不使用仓库的情况如何实现的呢？

实现思路：使用BroadcastChannel来实现浏览器跨页面通信，B页面编辑保存发起通信，A页面监听通信来调用刷新的方法

实现方法：

1、新建一个文件夹crossMsg.js

const channel = new BroadcastChannel('channel') //使用构造函数创建一个实例

export function sendMsg(type) {   // 发起通信
  channel.postMessage(type)
}

export function listenMsg(callback) {  // 监听通信
  channel.addEventListener('message', (e) => { 
    callback && callback(e.data)
  })
}

2、A页面调用监听通讯的方法

import { listenMsg } from './crossMsg'

listenMsg((type) => {
  console.log(type) // 'update'
})

3、B页面调用发送通讯的方法

import { sendMsg } from "./crossMsg";

sendMsg('update')

补充：

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

构造函数：BroadcastChannel  创建一个链接到命名频道的对象。

属性：该接口会从它的父级 browsing context 继承属性。

BroadcastChannel.name  频道名称

方法：

BroadcastChannel.postMessage()

向所有监听了相同频道的 BroadcastChannel 对象发送一条消息，消息内容可以是任意类型的数据。

BroadcastChannel.close()

关闭频道对象，告诉它不要再接收新的消息，并允许它最终被垃圾回收。

事件：

message 

当频道收到一条消息时触发。 也可以使用 onmessage 属性访问。

messageerror

当频道收到一条无法反序列化的消息时触发。 也可以使用 onmessageerror 属性访问。

事件处理程序

BroadcastChannel.onmessage 

事件处理器，用于定义当该对象上触发了 message 事件时要执行的函数。

BroadcastChannel. onmessageerror 

事件处理器，用于定义当该对象上触发了类型为 MessageError 的 MessageEvent 事件时要执行的函数。当接收到一条无法反序列化的消息时会触发此事件。