javascript - (不正确的响应 NodeJS + Socket IO)NodeJS 在页面刷新时在套接字上多次写入数据

Question

每次页面刷新时，NodeJS 都会在套接字上多次写入数据。当我刷新页面时，nodejs 服务器写入套接字的计数增加，在多个页面刷新时，写入计数固定为 3。

请检查控制台输出是否有此奇怪的响应。请提出同样的建议。

下面是我的server.js代码:

var express = require('express'),
    app = express(),
    path = require('path'),
    http = require('http').Server(app),
    io = require('socket.io')(http);

var server  = require('http').createServer(app);

app.use(express.static(path.join(__dirname, 'public')));

var routes = require('./routes/index');
app.use('/', routes);

io.on('connection', function (socket) {
    console.log('User connected. Socket id %s', socket.id);

    // below if condition is as per @mdziekon suggestion which solves 
    // problem of multiple emits at the same time

    if(Object.keys(io.sockets.connected).length < 2) {
        var intervalID = setInterval(function () {
            console.log("written " + new Date());

            var temp = Math.floor(Math.random() * (50 - 0 + 1)) + 0;
            var pressure = Math.floor(Math.random() * (1000 - 0 + 1)) + 0;

            io.sockets.emit('temperature', temp);
            io.sockets.emit('pressure', pressure);
        }, 2000);
    }


    socket.on('disconnect', function () {
        console.log('User disconnected. %s. Socket id %s', socket.id);
    });

});

http.listen(8082, function() {
    console.log('Server is listening at 8082');
});

module.exports = app;

下面是我使用 Angular js 的客户端代码:

app.factory('socket', ['$rootScope', function($rootScope) {
    var socket = io.connect();

    return {
    on: function(eventName, callback){
        socket.on(eventName, callback);
    },
    emit: function(eventName, data) {
        socket.emit(eventName, data);
    },
    removeAllListeners: function (eventName, callback) {
        socket.removeAllListeners(eventName, function() {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        }
    };
}]);

app.controller('socket-controller', ['$scope', 'socket', function($scope, socket){

    socket.on('temperature', function(temperature) {
        console.log('temperature ' + temperature);
        $scope.$apply(function(){
            $scope.temperature = temperature;
        });
    });

    socket.on('pressure', function(pressure) {
        console.log('pressure ' + pressure);
        $scope.$apply(function(){
            $scope.pressure = pressure;
        });
        $scope.pressure = pressure;
    });

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

}]);

下面是控制台输出:

// before page refresh i.e. initial page loading, [everything works fine]

Server is listening at 8082
User connected. Socket id /#GQMJ3Qa3ozyTYlIPAAAA
written Sat Sep 03 2016 14:51:04 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:51:06 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:51:08 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:51:20 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:51:22 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:51:24 GMT+0530 (India Standard Time)
.
.
.// after page refresh
.// page refreshed once [please note timing [seconds] in below console, its writing twice]
.
User disconnected. /#GQMJ3Qa3ozyTYlIPAAAA. Socket id %s
User connected. Socket id /#fEGCbvwqIZDeAxmoAAAB
written Sat Sep 03 2016 14:52:46 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:52:48 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:52:48 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:52:50 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:52:50 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:52:52 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:52:52 GMT+0530 (India Standard Time)
.
. 
. // again page refreshed [please note now its writing three times]
. // and after this refresh its constantly writing three times only
.
User disconnected. /#fEGCbvwqIZDeAxmoAAAB. Socket id %s
written Sat Sep 03 2016 14:54:49 GMT+0530 (India Standard Time)
User connected. Socket id /#Wi7oHtdXpVg08Fo6AAAC
written Sat Sep 03 2016 14:54:49 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:51 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:51 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:51 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:53 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:53 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:53 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:55 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:55 GMT+0530 (India Standard Time)
written Sat Sep 03 2016 14:54:55 GMT+0530 (India Standard Time)

Answer 1

那是因为您没有在断开连接时删除间隔处理程序。

您必须保存间隔的 ID，然后在客户端断开连接时将其清除，如下所示:

// onConnect
var intervalID = setInterval(function () { ... }

// onDisconnect
socket.on('disconnect', function () {
    clearInterval(intervalID);
    ... rest of the code ...
}

您应该知道，添加到 JS 引擎事件循环的每个间隔都将永远旋转(或者至少直到您关闭应用程序为止)。如果您不想跟踪添加到循环中的每个间隔，您可以使用 setTimeout()，并在处理程序末尾“重置”它:

var setupTimeout = function () {
    setTimeout(function () {
        // Your handling code / function
        myHandler();

        // Setup next timeout
        setupTimeout();
    }, 1000);
};

(这肯定可以做得更好，但你应该明白这一点)