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

时间:2016-09-03 09:33:09

标签: javascript angularjs node.js sockets

NodeJS在每次页面刷新时在套接字上多次写入数据。当我刷新页面时,nodejs服务器写入socket的次数增加,多页刷新写入次数固定为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)

1 个答案:

答案 0 :(得分:2)

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

您必须保存间隔的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);
};

(这绝对可以做得更好,但你应该明白这一点)