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

Question

我目前正在使用node.js 和socket.io 制作在线 Angular 色扮演游戏。一切都工作正常，直到我开始制作碰撞检测系统。我在网上寻找解决方案，发现有人有类似的问题，但不明白如何解决我的问题。以下是我的代码。

客户端:

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 并且坐标位于固定点，我这样做是为了帮助调试。您可能还会发现现在没有使用的代码，我将来会使用它，但我想首先修复这个错误。

我的实际问题是，当我第一次移动 Angular 色时，一切正常，但第二次移动再次执行第一次移动，然后是第二次移动，第三次移动执行第一次、第二次然后第三次移动。当我移动 Sprite 10 次时，它正在重复第 10 步之前的第 9 个步骤，并且它遍布整个屏幕。

我确实尝试通过更改代码并在各处添加 console.log 来自己找到解决方案。我发现，如果我在服务器端发出 [true,x] 并适本地修复客户端， Sprite 将按照我想要的方向移动，但 n 次，其中 n 是我尝试的移动次数(1 表示第 1 次移动，4 表示第 4 次在同一方向移动)。刷新确实会让一切恢复正常。我还尝试将 io.connect('/collision') 移到函数之外，但这也不起作用。问题似乎是服务器端的发送保留了已发送的过去数据的历史记录，然后在每次调用时重新发送它。也可能是客户端的碰撞导致了该错误。

此外，在服务器端，它的作用是检查数据库是否能够移动有问题的图 block ，如果是，则为 true，如果不是，则为 false。由于 bug，它被再次设置为 true。当错误消失后，我将完成服务器端代码。

Answer 1

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

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

第三次，你又设置了另一个，依此类推......

<小时/>

为了解决这一问题，如果您创建一个 socket.io 连接，然后将其用于与该 namespace 的所有通信，则 socket.io 的效果最佳。因此，请将 socket.io 连接的创建和事件处理程序的添加移至 move_character(x) 函数之外，这样它只发生一次。

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

collision.emit('col', true);

至

socket.emit('col', true);