Show HN: 实现浏览器标签页间离线 JavaScript PubSub
TabSub是一个基于浏览器本地存储的离线 JavaScript PubSub实现，用于在同一域名下的浏览器标签页间共享消息，无需服务器。它提供publish、subscribe和state等函数。作者测试了高并发写入，结果符合预期，但未保证绝对安全。TabSub在GitHub上开源，采用MIT许可。文章还提到了[BroadcastChannel API]也可以实现类似功能。示例展示了如何使用TabSub同步音乐播放。
TabSub
基于本地存储的离线 JavaScript PubSub
TabSub 提供了一种易于使用的 JavaScript PubSub 实现，它基于浏览器的本地存储，无需服务器。所有消息都通过浏览器内置的本地存储进行共享。
不妨试用一下示例，看看你能用 TabSub 构建什么应用。
在高并发写入的情况下，它是否安全？ 说实话，我也不知道。 我尝试用 10 个并发写入器来测试它，一切都如预期般工作：没有消息丢失，并且消息顺序正确。 但不保证绝对安全，请自行承担风险 😅
由于 TabSub 使用本地存储，因此它仅在同一域名下有效，因为浏览器出于安全考虑会按域名隔离本地存储。
TabSub 在 Github 上开源，并采用 MIT 许可。
今天 (3.4.2025) 我了解到，BroadcastChannel API 也可以实现相同的功能（并且具有非常相似的用法结构）。
示例
先播放两首歌曲中的一首，然后在另一个标签页中打开此页面。 你将看到正在播放的歌曲时间同步，如果启动另一首歌曲，则第一首歌曲将停止。
查看此站点的源代码，了解我是如何使用 TabSub 构建此示例的。
Sad Circus
Your browser does not support the audio element.
They say
Your browser does not support the audio element.
用法
引入脚本
<script src="https://simon-frey.com/tabsub/tabsub.v1.min.js"
integrity="sha384-WhqYceisw/e1nVVrHA5CI/Lt/c3HrNIZLtPE+sWky3NjzRAF6kt9Ivjp8LwoIS/k" >
</script>
初始化
<script>
const ts = new TabSub();
</script>
可用函数
publish(topic,msg)
发布新消息。 消息可以是任何类型。 你在 subscribe 中的回调必须正确处理它。 TabSub 不负责处理消息类型。
<script>
ts.publish("hello","world");
</script>
subscribe(topic, callback)
注册新监听器。 如果有新消息到达，则使用消息内容调用回调。
<script>
ts.subscribe("hello",(msg)=>{
console.log("Got msg: ",msg);
});
</script>
state(topic)
获取主题的当前（静态）状态。 返回此主题在本地存储中的当前数据。
<script>
const state = ts.state("hello");
console.log("Current state: ",msg);
</script>