Angular 单页应用程序和 socketio 多个套接字

Question

我尚未找到有关此主题的解决方案或任何信息。基本上我正在开发一个带有flask、socketio和angularjs的聊天应用程序。我使用 angularjs 创建了一个单页应用程序，因此当我单击例如注册按钮时，即使它实际上并未路由到新页面，该页面也会出现。问题是当我单击注册按钮或切换视图时，会创建另一个套接字连接。因此，当我返回聊天应用程序视图发送消息时，它会发送 3 条消息，因为创建了 3 个套接字。一个最初，一个当我去注册视图时，当我回到聊天应用程序视图时创建了第三个套接字连接。所以我对这种行为有几个问题：

在非 SPA 中，这种行为还会发生吗？

在非 SPA 中切换页面时，套接字是否会断开连接？

对于我的问题，我可以看到在 SPA 中更改视图会创建另一个套接字，但不会删除套接字。如何避免有多个套接字连接，这样我就不会为单个发送的消息事件发送多个消息/事件？

非常感谢各位。

Answer 1

在非 SPA 中，这种行为还会发生吗？ 在非 SPA 中切换页面时，套接字是否会断开连接？

在非 SPA 中，当您从一个页面移动到另一个页面时，浏览器会删除旧页面仍然打开的所有连接。每个页面都在完全独立的上下文中运行。

在 SPA 中，您应该将套接字创建代码移至顶级模块，该模块仅在应用初始化时运行，而不是在您从一个页面切换到另一个页面时运行。因此，您将在应用程序的整个生命周期中使用单个 socketio 实例。

Answer 2

对我而言，最佳实践是使用Shared Worker 作为套接字连接的线程。保证您的应用程序的所有选项卡只有一个 Shared Worker 实例，因此您肯定只有一个套接字连接。