Show HN：浏览器标签页之间离线的 JavaScript 发布/订阅

Show HN：浏览器标签页之间离线的 JavaScript 发布/订阅
Show HN: Offline JavaScript PubSub between browser tabs

TabSub是一个客户端JavaScript的发布-订阅库，利用本地存储实现浏览器标签页之间的通信，无需服务器。它提供`publish`、`subscribe`和`state`三个函数，分别用于发送消息、注册监听器和获取主题的当前状态。消息可以是任何数据类型。开发者测试了10个并发写入器，未发现问题，但并未保证其适用于高并发环境。由于浏览器安全限制，此功能仅限于同一域名下使用。示例演示了跨标签页同步音频播放。该库已在GitHub上发布，采用MIT许可证。截至2025年4月3日，开发者也承认存在BroadcastChannel API，它提供了类似的功能。

在 Hacker News 上，用户 “l1am0” 分享了 “Show HN: 浏览器标签页间的离线 JavaScript 发布订阅 (simon-frey.com)” 。这篇文章收到了积极的反馈。一位用户 “sisk” 指出 `BroadcastChannel` API 具有类似的功能，促使 “l1am0” 在 TabSub 的落地页添加了该 API 文档的链接。另一位用户 “edweis” 称赞了代码的简洁性。“EGreg” 分享了之前在他们的框架中为 iframe 之间缓存数据而实现类似方案的经验，强调了其方法背后的挑战和动机。帖子还包含了旧金山 AI 初创公司学校的提醒。

TabSub - Offline Javascript PubSub between browser tabs using local storage

Offline Javascript PubSub between browser tabs

TabSub offers you an easy to use Javascript PubSub via local storage. No server is required as all messages are shared via the browser built in local storage.

Give the example a try to see what you can build with TabSub.

Is this safe for a lot of concurrent writes? To be honest I have no clue. I tried to break it with 10 concurrent writers and everything worked as expected: No message got lost and the messages where in correct order. No warranty here, use at your own risk 😅

As TabSub uses local store this only works on the same domain, as the browser separates the local storage by domains as security measure.

TabSub is on Github and licensed MIT

Today (3.4.2025) I learned, that apparently BroadcastChannel API does the same thing (has a quite similar usage structure as well)

Example

Start one of the two songs and than open this site in a second tab. You will see that the playing song time syncs and if you start the other song that the first one stops.

Look into the source code of this site to see how I used TabSub to built this example.

Sad Circus

They say

Usage

Including the script

<script src="https://simon-frey.com/tabsub/tabsub.v1.min.js" 
    integrity="sha384-WhqYceisw/e1nVVrHA5CI/Lt/c3HrNIZLtPE+sWky3NjzRAF6kt9Ivjp8LwoIS/k" >
</script>

Initialization

<script>
    const ts = new TabSub();
</script>

Available functions

publish(topic,msg)

Publish new message. The message can be of any type. Your callback in subscribe has to handle it correctly. TabSub does not take care about that.

<script>
    ts.publish("hello","world");
</script>

subscribe(topic, callback)

Register new listener. Callback is called with the message content if new message arrives

<script>
    ts.subscribe("hello",(msg)=>{
        console.log("Got msg: ",msg);
    });
</script>

state(topic)

Get the current (static) state of a topic. Returns the current data in the local storage for this topic

<script>
    const state = ts.state("hello");
    console.log("Current state: ",msg);
</script>