javascript – Socket.io事件在Angular.js视图更改时多次触发

2019年7月27日 182次阅读

警告：我对编码和Web开发很陌生.

我正在创建一个角度应用程序,它使用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;

最佳答案 不确定你是否想过这个.如果不是,您可以使用范围销毁套接字侦听器.

在你的控制器中：

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