跨选项卡使用Web套接字的实时通知栏

所以我有一个react web应用程序,它有一个由pusher js驱动的实时通知栏。 加载通知栏组件栏时,它将订阅pusher,然后调用后端服务器以获取通知的初始状态(例如X个新订单和Y个新注释)。

它正在工作,但问题是我的大多数用户在浏览器中打开了多个选项卡。平均每个用户打开10-15个标签,因此这就是10-15个web套接字连接和10-15个对后端服务器的初始调用。

如何优化这一点? 我遇到了service worker、与本地存储共享状态、web worker、redux同步状态等,但我仍然不知道哪个是最好的使用方式,为什么。

仅供参考,我的pusher js是一个非常旧的版本,pusher js/worker不可用。