angularjs - 在 AngularJS 应用程序中切换状态时，套接字事件会多次触发

Question

我正在将具有多个状态(路由)的 Angular JS 应用程序与在后端运行的 Node 服务器(Socket)连接。当我访问其他状态并返回到编写套接字代码的状态时，它会再次注册，并且当事件触发时，会多次调用该函数，这会影响性能。

 var socket = io.connect('127.0.0.1:3000');

        socket.on("connect",function(){
          console.log("connected");
        });


          socket.on("test-channel:App\\Events\\NewMessage", function(message) {
              if (vm.questions.length < 3) {

                  console.log("question fetching started");
                  vm.fetch_q();

              }
          });

我尝试将 io.connect('localhost') 也放入服务中，并仅将事件放入 Controller 中，但随后它也被多次触发。

Answer 1

问题是，每次您访问该 Controller 时，您的 Controller 都会设置“on”事件，并且仅在刷新时才会将其删除。

如果你使用 AngularJS，你可以简单地声明 $rootScope.socket = io.connect('127.0.0.1:3000'); 然后在你的 Controller 中使用它，就像这样 $rootScope.socket.emit('event', {}); ，当你想监听事件但使用 on 而不是 emit 时，方法相同。

无论如何，这是一种提高性能和开发程序方式的方法，但您的问题仍然存在，因为将事件监听器保留在 Controller 中并不是很好 - 仅当您发出某些内容时。

您可以使用 AngularJS Run 服务中的事件监听器来解决该问题。

app.run(function($rootScope){
  $rootScope.socket.on('event', function(){
    // Do something..
  });
}

如果您有更多事件要监听，您可以在模块中声明该事件，然后在 run 服务中请求该模块。希望能为您提供一个好的解决方案。