如何优雅的实现浏览器多标签通讯

前言

开发过程中无法避免遇到需要进行多标签通讯的情况，例如：

• 管理员登陆后，其他打开标签的页面登陆状态要变更
• 课堂页面只能打开一个，另一个则通知失效等等。。。场景

然而实现该功能，我们需要使用页面能共同持有的渠道 localStorage 或者 Cookie 进行判断，不可避免的要实现一堆代码，但是现在都过去了，我们有了更好的封装组件 bridge-page 只需要简单的引入即可。

快速开始

为了解决这复杂的问题，我开发了 bridge-page 来帮助大家优雅的解决这类问题。

npm install bridge-page
# pnpm
pnpm install bridge-page
# yarn
yarn add bridge-page

桥接页面

• 页面A a.html

<h1>A</h1>

import { PageBridge } from 'bridge-page';// 创建桥接对象
const bridge = new PageBridge({ name: 'A' });

• 页面B b.html

<h1>B</h1>

import { PageBridge } from 'bridge-page';// 创建桥接对象
const bridge = new PageBridge({ name: 'B' });

页面信息

// 获取当前页面信息
bridge.getId(); // 当前页面ID
bridge.getName(); // 当前页面名称
bridge.getData(); // 当前页面数据
bridge.getPage(); // 当前页面对象
// 获取指定页面信息
bridge.getPage(); // 当前页面
bridge.getPage('LVXJ7I56-CAV9930MH3A'); // 指定ID页面
bridge.getPage('Name'); // 指定名称页面
bridge.getPage((vo) => vo.data.label === 'Good' && vo.name === 'A'); // 指定条件页面
// 获取指定页面列表
bridge.getPages(); // 所有页面列表
bridge.getPages('LVXJ7I56-CAV9930MH3A'); // 指定ID页面列表
bridge.getPages('Name'); // 指定名称页面列表
bridge.getPages((vo) => vo.data.label === 'Good' && vo.name === 'A'); // 指定条件页面列表
// 设置当前页面信息
bridge.setName('A'); // 设置当前页面名称
bridge.setData({ label: 'Good' }); // 设置当前页面数据

订阅/发布

• 窗口初始化

// 当前窗口初始化
bridge.ready(async () => {console.log('Ready');
});

• 订阅消息

// 订阅事件（广播）
bridge.on('visit', async (vo: PageMessage) => {// vo.getData(); # 获取请求数据
});// 订阅事件（请求）
bridge.on('say', async (vo: PageMessage) => {// vo.getData(); # 获取请求数据return '我是 Main';
});// 取消订阅事件
bridge.off('say');

• 发布广播

bridge.send({method: 'visit', // 方法名称data: { from: 'Main' }, // 请求数据page?: 'LVXJ7I56-CAV9930MH3A', // 指定窗口IDpage?: null, // 所有窗口page?: 'Name', // 指定窗口名称page?: (vo) => vo.data.label === 'Good' && vo.name === 'A', // 指定条件窗口
});

• 请求&响应

// 请求指定窗口
bridge.request({method: 'say', // 方法名称data: { from: 'Main' }, // 请求数据target?: 'LVXJ7I56-CAV9930MH3A', // 指定窗口IDtarget?: undefined, // 当前窗口
}).then((vo: any) => {console.log('say.then', vo);
}).catch((error: Error) => {console.log('say.catch', vo);
});