Question

我有一个带按钮的页面。单击该按钮时，它将通过socket.io获取数据。但是，每次重新加载页面时，socket.io都会从先前的数据集中发回一个额外的数据副本。所以我的数据在第一次加载页面时看起来很好（例如：abcd）。然后重新加载页面将获取2n数据（abcdabcd），重新加载页面我得到3n数据（abcdabcdabcd）等。

如何在页面重新加载时避免重复数据发送回客户端？这是我的代码。

服务器端：

app.get('/test', function(req, res){

        // some code...

    io.sockets.on("connection", function(socket){

        var socketFn = function(data){
            socket.emit("trends", {
                trends: JSON.parse(redisData)
            });
        };

        socket.on("action", socketFn);

        socket.on("disconnect", function(){
            socket.removeListener("action", socketFn); // this doesn't work
        });

    });
    res.render('test');

});

客户端：

    var socketOpts = {
    "sync disconnect on unload" : true
};
var socket = io.connect("", socketOpts);

socket.on("trends", function(data){
    // data received from the node server, so do something with it
});


function action(){
    socket.emit("action", {phrase: "some dummy data"});
    return false;
}

// already checked client side doesn't fire multiple click event
$("button#click").off("click").on("click", action);

Answer 1

这是因为您在客户端点击页面时多次收听连接。

app.get('/test', function(req, res){
//when client opens the page 

    io.sockets.on("connection", function(socket){
    //start listening to new connection
    ...

从路由中初始化连接事件侦听器被认为是一个坏主意。它应该只在全球范围内完成一次。每次客户端访问页面时，它都会在访问页面时多次监听事件。

浏览器刷新后，Socket.io会发出重复数据

1 个答案: