如何阻止 socket.io 发出多次发射
How to stop socket.io emit from firing more then once
我目前正在使用 node.js 和 socket.io 制作在线角色扮演游戏。一切正常,直到我开始制作碰撞检测系统。我在网上寻找解决方案,发现有类似问题但无法理解如何解决我的问题的人。以下是我的代码。
客户端:
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 并且坐标位于固定点,我这样做是为了帮助调试。您可能还会发现现在没有使用的代码,我将来会使用它,但我想先修复这个错误。
我的实际问题是,当我第一次移动角色时,一切正常,但第二次移动再次执行第一个移动,然后是第二个移动,第三个移动执行第一个移动,第二个移动,然后第三个移动。当我移动 sprite 10 次时,它会重复第 10 步之前的第 1 个 9 个步骤,并且遍及整个屏幕。
我确实尝试通过更改代码并在各处添加 console.log 来自己找到解决方案。我发现如果我在服务器端发出 [true,x] 并适当地修复客户端,精灵将朝我想要的方向移动但是 n 次 n 是我尝试的移动次数(1 表示第一次移动,4 表示同方向的第 4 次移动)。刷新确实使一切恢复正常。我还尝试将 io.connect('/collision') 移到函数之外,但这也不起作用。问题似乎是服务器端的 emit 保留了过去已发送数据的历史记录,然后在每次调用时重新发送它。也可能是客户端的 collision.on 导致了错误。
此外,在服务器端,它所做的是检查数据库是否可以将有问题的图块移动到,如果是则为真,如果不是则为假。由于错误,它再次设置为 true。当错误消失后,我将完成服务器端代码。
您的问题是,每次调用 move_character(x)
时,都会创建一个新的 socket.io 连接及其关联的事件处理程序。因此,您第一次调用它时,它会连接并设置一个事件处理程序,执行 emit('detection', x)
,然后设置一个事件处理程序来侦听响应。
第二次调用 move_character(x)
时,您创建了另一个 socket.io 连接并执行相同操作。现在,当您的服务器收到消息时,它会做一些数据库工作,然后将响应广播到所有连接的套接字。因此,既然您在同一个浏览器 window 中有两个 socket.io 连接,每个连接都会收到响应并被处理多次。
第三次,你再设置一个……
要解决此问题,如果您创建一个 socket.io 连接,然后将其用于与该命名空间的所有通信,socket.io 效果最佳。因此,将 socket.io 连接的创建和事件处理程序的添加移到 move_character(x)
函数之外,这样它只发生一次。
在服务器上,我不太明白为什么在数据库工作后向所有连接的客户端广播响应。我认为您只想响应发送查询的连接。您可以通过更改来做到这一点:
collision.emit('col', true);
到
socket.emit('col', true);
我目前正在使用 node.js 和 socket.io 制作在线角色扮演游戏。一切正常,直到我开始制作碰撞检测系统。我在网上寻找解决方案,发现有类似问题但无法理解如何解决我的问题的人。以下是我的代码。
客户端:
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 并且坐标位于固定点,我这样做是为了帮助调试。您可能还会发现现在没有使用的代码,我将来会使用它,但我想先修复这个错误。
我的实际问题是,当我第一次移动角色时,一切正常,但第二次移动再次执行第一个移动,然后是第二个移动,第三个移动执行第一个移动,第二个移动,然后第三个移动。当我移动 sprite 10 次时,它会重复第 10 步之前的第 1 个 9 个步骤,并且遍及整个屏幕。
我确实尝试通过更改代码并在各处添加 console.log 来自己找到解决方案。我发现如果我在服务器端发出 [true,x] 并适当地修复客户端,精灵将朝我想要的方向移动但是 n 次 n 是我尝试的移动次数(1 表示第一次移动,4 表示同方向的第 4 次移动)。刷新确实使一切恢复正常。我还尝试将 io.connect('/collision') 移到函数之外,但这也不起作用。问题似乎是服务器端的 emit 保留了过去已发送数据的历史记录,然后在每次调用时重新发送它。也可能是客户端的 collision.on 导致了错误。
此外,在服务器端,它所做的是检查数据库是否可以将有问题的图块移动到,如果是则为真,如果不是则为假。由于错误,它再次设置为 true。当错误消失后,我将完成服务器端代码。
您的问题是,每次调用 move_character(x)
时,都会创建一个新的 socket.io 连接及其关联的事件处理程序。因此,您第一次调用它时,它会连接并设置一个事件处理程序,执行 emit('detection', x)
,然后设置一个事件处理程序来侦听响应。
第二次调用 move_character(x)
时,您创建了另一个 socket.io 连接并执行相同操作。现在,当您的服务器收到消息时,它会做一些数据库工作,然后将响应广播到所有连接的套接字。因此,既然您在同一个浏览器 window 中有两个 socket.io 连接,每个连接都会收到响应并被处理多次。
第三次,你再设置一个……
要解决此问题,如果您创建一个 socket.io 连接,然后将其用于与该命名空间的所有通信,socket.io 效果最佳。因此,将 socket.io 连接的创建和事件处理程序的添加移到 move_character(x)
函数之外,这样它只发生一次。
在服务器上,我不太明白为什么在数据库工作后向所有连接的客户端广播响应。我认为您只想响应发送查询的连接。您可以通过更改来做到这一点:
collision.emit('col', true);
到
socket.emit('col', true);