如何阻止socket.io发射多次发射

时间:2015-07-25 22:05:36

标签: javascript node.js socket.io

我目前正在使用node.js和socket.io在线制作RPG。一切都工作正常,直到我开始制作碰撞检测系统。我在网上寻找解决方案,发现有类似问题的人但无法理解如何解决我的问题。以下是我的代码。

客户方:

function move_character(x){
        //socket.io start
        var collision = io.connect('/collision');
        collision.emit('detection', x);
        collision.on('col', function (msg) {
            if(msg == true) {
                if (x == 'up') {
                    $('#sprite').animate({'top': '-=50px'},150);
                } else if (x == 'down') {
                    $('#sprite').animate({'top': '+=50px'},150);
                } else if (x == 'left') {
                    $('#sprite').animate({'left': '-=50px'},150);
                } else if (x == 'right') {
                    $('#sprite').animate({'left': '+=50px'},150);
                }
            }
        });
        //socket.io end
    }

服务器端:

var collision = io.of('/collision');
collision.on('connection', function (socket) {
    socket.on('detection', function (x) {
        pool.getConnection(function (err, con) {
            con.query('SELECT class_state FROM gmaps LIMIT 1',
                function (err, result) {
                    if (err) throw err;
                    else {
                        var mapState = result[0].class_state.split(",");
                        var x_coord = 6;
                        var y_coord = 5;

                        var id = ((y_cord -1)*10)+(x_cord -1);
                        var index;
                        if(x == 'up'){
                            index = id-10;
                        }else if(x == 'down'){
                            index = id+10;
                        }else if(x == 'left'){
                            index = id-1;
                        }else if(x == 'right'){
                            index = id+1;
                        }
                        collision.emit('col', true);
                    }
                    });
                con.release();
            });
    });
});

在服务器端,emit始终发送为true且坐标位于固定点,我这样做是为了帮助调试。您可能还会找到目前尚未使用的代码,我将来会使用它,但我想先修复此错误。

我的实际问题是,当我第一次移动角色时,一切正常,但是第二次移动再次进行第一次,第二次进行第二次,第三次进行第一次,第二次进行第三次移动。当我将精灵移动了10次时,它正在重复步骤10之前的前9个步骤,并且它将遍布整个屏幕。

我确实尝试通过更改代码并在任何地方添加console.log来找到解决方案。我发现如果我在服务器端发出[true,x]并正确修复客户端,精灵将按照我想要的方向移动,但 n 时间 n 是我试过的动作次数(第1次移动1次,第4次移动4次同向)。刷新确实将所有内容恢复正常。我也尝试在函数之外移动io.connect(' / collision'),但这也不起作用。似乎问题是服务器端的发射是保留已发送的过去数据的历史,然后在每次呼叫时重新发送它。它也可能是导致错误的客户端上的collision.on。

此外,在服务器端,它所做的是检查数据库是否能够移动相关的磁贴,如果是,则为true,如果不是则为false。由于该错误,它再次设置为true。当bug消失后,我将完成服务器端代码。

1 个答案:

答案 0 :(得分:1)

您的问题是每次调用move_character(x)时,都会创建一个与其关联的事件处理程序的新socket.io连接。因此,第一次调用它时,它会连接并设置一个事件处理程序,执行emit('detection', x),然后设置一个事件处理程序来监听响应。

第二次调用move_character(x)时,您创建另一个socket.io连接并执行相同操作。现在,当您的服务器获取消息时,它会执行一些数据库工作,然后将响应广播到所有连接的套接字。因此,现在您在同一浏览器窗口中有两个socket.io连接,每个连接都会获得响应,并且会多次处理它。

第三次,你又建立了另一个等等......

要修复,socket.io最适合创建一个socket.io连接,然后将其用于与该命名空间的所有通信。因此,移动socket.io连接的创建以及在move_character(x)函数之外添加事件处理程序,以便它只发生一次。

在服务器上,我不太明白为什么在数据库工作到所有连接的客户端之后广播响应。我认为你只想回复发送查询的连接。您可以通过更改:

来实现
collision.emit('col', true);

socket.emit('col', true);
相关问题