在 Angular.js 视图更改上多次触发的 Socket.io 事件答案

【问题标题】：Socket.io events triggering multiple times on Angular.js view change在 Angular.js 视图更改上多次触发的 Socket.io 事件
【发布时间】：2015-10-15 18:36:35
【问题描述】：

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

我正在制作一个角度应用程序，它使用 socket.io 将节点（快速）服务器上的实时事件传递给其他客户端。我遇到的问题是，当我在应用程序中并将路由从“/pb”切换到“/”然后再返回时，“init”套接字事件在客户端被触发了两次。据我所知，客户端只发出一次“requestInit”事件，而服务器只发出一次“init”事件来响应。但是，当我切换视图时，客户端会多次运行 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

每次切换视图时，initCount 都会变高，所以如果我来回切换 5 次，initCount 将记录 5 次，从 5 开始，以 1 结束。

因此，当我进入视图时，客户端的 socketio.on('init') 函数会被多次触发，并且按倒序排列。我最初的猜测是，这与我切换视图时套接字没有关闭有关，所以当我回来时，它会为每个打开的套接字接收一个“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;

【问题讨论】：

标签： javascript angularjs sockets

【解决方案1】：

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

在您的控制器中：

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

【讨论】：

【解决方案2】：

如果有人还在为这个问题苦苦挣扎。我有同样的问题，我通过简单地在工厂外初始化套接字变量并在所有其他控制器上使用该变量来解决它。

app = angular.module('movex', ['ui.router'])
socket = io.connect('http://localhost:3000');

我不知道这是否正确，但它解决了问题。

【讨论】：