跨多个选项卡共享单个 WebSocket 连接的最佳/正确方法

Question

如何在多个浏览器选项卡之间共享单个 WebSocket 连接？

我知道有多个建议 SharedWorker 的问题/帖子。然而，由于 SharedWorker 的采用率很低（根据撰写本文时我可以使用吗，全球只有 35％），这不是一个可行的解决方案，更不用说它已在 Safari 中被删除。

我已经使用 SerivceWorker 实现了一个工作版本，它具有一些 SharedWorker 的功能，可以跨选项卡共享单个连接。不幸的是，在测试过程中，我意识到 ServiceWorker 可以被浏览器杀死/停止，特别是当开发工具未打开时。我还知道一些解决方法可以防止这种行为，例如“定期 ping ServiceWorker”。我想问一下有没有合适的方法来处理这个问题

Answer 1

origin

，这是我多次遇到的问题。

共享 WebSocket

假设您被迫共享连接并且其他选项不可行，则有以下几种可能性：

SharedWorker
1. （33.17% 支持）。允许您共享您已经发现的连接。
BroadcastChannel
2. （91.23% 支持）。允许您在选项卡之间进行通信。
会话存储
3. （97.25%）。允许您在选项卡之间进行通信。这有点破解 see 但对我来说效果很好。
2 和 3 的技巧是，您将只有一个选项卡保持 WS 连接并通过通信通道与其他选项卡共享其使用情况。最棘手的部分是当“主”选项卡关闭时；您需要选择另一个选项卡才能打开连接。

请注意，2 和 3 在“主”选项卡更改期间都会受到缓冲延迟和额外延迟的影响。 SharedWorker 也有其缺陷。因此，这些解决方案都不适合高速实时应用程序（如游戏）。如果您需要一个实时解决方案或只是一个更容易实施的解决方案，请选择以下选项：

主动提出意见

如果您只需要解决连接限制，这是一个完美的作弊方法：创建一个像

*.wss.example.com

这样指向同一服务器的域，然后通过在每个选项卡上随机生成域来欺骗浏览器（类似于

） 3af893.wss.example.com

，

a6a589.wss.example.com

，...）。通过这种模式，您可以建立无限的连接。请记住设置可靠的

CORS

策略，否则这种模式会让您面临大量恶意流量。尽管实施了许多上述解决方案，但我最终在生产中使用了这个解决方案，因为事实证明它更加稳定和可靠。此解决方案也适用于

Server Side Events

(

SSE

)。编辑1

这里讨论了许多提到的选项

跨浏览器选项卡共享 websocket？

如Eskandar所述