socket.io - 多次加载视图时，socket.on 方法也会运行多次

Posted 2023-04-18

【中文标题】socket.io - 多次加载视图时，socket.on 方法也会运行多次

【英文标题】：socket.io - when loading a view multiple times, socket.on method also runs multiple times

【发布时间】：2018-06-17 09:21:31

【问题描述】：

我正在使用 Framework7 和 AngularJS。 假设有一个页面名为：“something.js”。在这个页面中有一个 socket.io 方法。

加载一次页面时，socket.io方法中的动作只会触发一次（这是正确的）。

当导航到不同的页面并返回到运行 something.js 文件的页面时，socket 方法将被触发两次，以此类推。

something.js 代码：

socket.on("notification", function(notification) 
  // some code here
);

现在上面的代码只加载了两次，所以第一次加载something.js文件时，会弹出一次通知。 下一次，通知将加载两次，然后是 3 次。

如何告诉socket.io一次性加载socket.on，或者离开页面时删除什么的？

它与 AngularJS 视图引擎或 Framework7 有关吗？ 如何避免这种情况？

【问题讨论】：

能否分享一下相关代码？

是的，我会编辑它。

【参考方案1】：

发生这种情况是因为订阅没有在组件被销毁时被销毁。实际上，您由此引入了内存泄漏，因为在事件存在之前，垃圾收集器无法收集您的组件。

您有两种选择来解决这个问题：

在服务而不是组件中订阅事件，并在组件端注入服务并使用结果 每次组件被销毁时手动取消订阅事件，请参阅How to unsubscribe from a socket.io subscription?

我个人更喜欢第一种方式，因为只要你需要一个订阅，你就需要使用一个单例（服务）来持有它。

【讨论】：

第一种方式，您的意思是在主 app.js 文件中创建一个服务，然后将其作为依赖项注入控制器中？但是控制器如何知道一个套接字被触发了呢？你能提供一些关于这方面的信息吗？

我找到了解决此问题的方法，但将 socket.on 方法放在主 app.js 文件中（仅加载一次）。然后触发位于 something.js 文件中的 rootScope 函数。它现在正在工作。这是个好举动吗？谢谢。

不是真的，因为没有使用依赖注入，因此不能真正测试等。顺便说一句，您也可以在服务中注入 rootScope 并从那里发出事件。但是，rootScope 事件性能不佳，您可以考虑使用 pubsub 代替 ***.com/questions/21638563/…