javascript - 在 Angular.js View 更改时多次触发 Socket.io 事件

Question

警告:我对编码和网络开发还很陌生。

我正在制作一个 Angular 应用程序，它使用 socket.io 将节点(快速)服务器上的实时事件传达给其他客户端。我遇到的问题是，当我在应用程序中并将路由从“/pb”切换到“/”然后再返回时，“init”套接字事件在客户端被触发了两次。据我所知，客户端仅发出一次“requestInit”事件，服务器通过仅发出一次“init”事件进行响应。但是，当我切换 View 时，客户端多次运行 socketio.on('init') 函数中的代码。

例如:我将打开应用程序并导航到/pb，控制台将记录

connected to socket
recieved socket event from server: Init
initCount: 1 

现在当我导航到“/”然后返回到“/pb”时，控制台将记录

recieved socket event from server: Init
initCount: 2
recieved socket event from server: Init
initCount: 1

每次我切换 View 时，initCount 都会增加，所以如果我来回切换 5 次，initCount 将记录 5 次，从 5 开始到 1 结束。

所以当我进入 View 时，客户端的 socketio.on('init') 函数被多次触发，并且是倒序的。我最初的猜测是，这与我切换 View 时套接字没有关闭有关，所以当我回来时，它会为每个打开的套接字接收一个“init”事件。但是，socketio.on('connect') 函数仅在初始导航到“/pb”时触发。我已经用谷歌搜索了几个小时，但我仍然无法找出发生了什么。任何帮助，将不胜感激。这是给我带来麻烦的鳕鱼。

客户:

var app = angular.module('MainApp', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){

    $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'HomeController',
            activeTab: 'home'
        })
        .when('/pb', {
            templateUrl: 'views/pb.html',
            controller: 'PbController',
            activeTab: 'pb'
        })
        .otherwise({
            redirectTo: '/'
        });

    $locationProvider.html5Mode(true);
}]);

// SocketIO factory
app.factory('socketio', ['$rootScope', function($rootScope){
    var socket = io.connect('http://localhost:3000');
    return {
        on: function(eventName, callback){
            socket.on(eventName, function() {
                var args = arguments;
                $rootScope.$apply(function(){
                    callback.apply(socket, args);
                });
            });
        },
        emit: function(eventName, data, callback){
            socket.emit(eventName, data, function() {
                var args = arguments;
                $rootScope.$apply(function(){
                    if(callback){
                        callback.apply(socket, args);
                    }
                });
            });
        }
    };
}]);

app.controller('PbController', ['$scope', 'socketio', function ($scope, socketio){

     $scope.initCount = 0;
/*
    ~~~~~~~~~~ Socket events ~~~~~~~~~~~~~~~~
*/
    socketio.emit('requestInit');

    socketio.on('connect', function(){
        console.log('connected to socket');
    });

    socketio.on('init', function (){
        console.log("recieved socket event from server: Init");
        $scope.initCount += 1;
        console.log("init count: " + $scope.initCount);
    });
}]);

服务器:

var pbServerController = function (io){

io.on('connection', function (socket){
    console.log("Client connected, new socket issued: "+socket.id);

    socket.on('requestInit', function(){
        console.log("sending Init socketio event");
        socket.emit('init');
    });
};

module.exports = pbServerController;

Answer 1

不知道你是否想过这个。如果不是，您可以使用范围销毁套接字监听器。

在你的 Controller 中:

$scope.$on('$destroy', function() {
  socket.removeListener();
});