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

Question

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

我知道有多个建议 SharedWorker 的问题/帖子。然而，由于 SharedWorker 的采用率很低（根据Can I use在撰写本文时的数据，全球范围内只有 35%），这并不是一个可行的解决方案，更不用说它已经在 Safari 中被删除了。

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

Answer 1

不幸的是，这并不是一项简单的任务。但由于许多浏览器将连接数量限制为相同数量，origin这是我多次遇到的问题。

共享 WebSocket

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

1. SharedWorker（33.17% 支持）。允许您共享您已经发现的连接。
2. BroadcastChannel（91.23% 支持）。允许您在选项卡之间进行通信。
3. 会话存储（97.25%）。允许您在选项卡之间进行通信。这有点麻烦，但对我来说效果很好。

2 和 3 的技巧是，您将只有一个选项卡保持 WS 连接并通过通信通道与其他选项卡共享其使用情况。最棘手的部分是当“主”选项卡关闭时；您将需要选择另一个选项卡来打开连接。

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

未经请求的选项

如果您只需要解决连接限制，那么这是一个完美的作弊方法：创建一个指向*.wss.example.com同一服务器的域，然后通过在每个选项卡上随机生成域来欺骗浏览器（例如3af893.wss.example.com，，，a6a589.wss.example.com... ）。通过这种模式，您可以建立无限的连接。请记住设置可靠的CORS策略，否则这种模式会让您面临大量恶意流量。

尽管实施了许多上述解决方案，但我最终在生产中使用了这个解决方案，因为事实证明它更加稳定和可靠。该解也适用于Server Side Events( SSE)。

编辑1

这里讨论了许多提到的选项跨浏览器选项卡共享 websocket？正如艾斯坎达尔所说