有一个服务器向所有客户端发送有关坐标的数据。客户端接收此数据。
问题是,工作 20 秒后,页面在客户端开始严重滞后,并且选项卡挂起。
服务器:
io.on('connection', function(socket) { // обрабатываются события коннект, дисконнект
socket.on("moveobject", function(data){ // передвижение
let user = users[socket.id] || {};
if (data.left) {
user.x -= 5;
}
if (data.up) {
user.y -= 5;
}
if (data.right) {
user.x += 5;
}
if (data.down) {
user.y += 5;
}
})
}
setInterval(function() { // рассылка данных сервером
io.sockets.emit('state', users);
}, 1000 / 60);
客户:
<script>
let moveobject = {
up: false,
down: false,
left: false,
right: false
};
let socket = io();
socket.on('state', function(data) {
var canvas = document.getElementById('canvas');
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext('2d');
socket.on('state', function(users) {
context.clearRect(0, 0, 800, 600);
for (var id in users) {
let user = users[id];
context.fillStyle = user.color;
context.beginPath();
context.arc(user.x, user.y, 10, 0, 2 * Math.PI);
context.fill();
}
});
});
$(document).on('keydown', function(e){
switch (e.keyCode) {
case 65: // A
moveobject.left = true;
break;
case 87: // W
moveobject.up = true;
break;
case 68: // D
moveobject.right = true;
break;
case 83: // S
moveobject.down = true;
break;
}
})
$(document).on('keyup', function(e){
switch (event.keyCode) {
case 65: // A
moveobject.left = false;
break;
case 87: // W
moveobject.up = false;
break;
case 68: // D
moveobject.right = false;
break;
case 83: // S
moveobject.down = false;
break;
}
})
socket.emit('new user');
setInterval(function() {
socket.emit('moveobject', moveobject);
}, 1000 / 60);
</script>
您的客户端处理程序每秒 60 次
state
创建一个新处理程序state
(由于关闭,该处理程序具有上一次调用的画布可用)所有这些混乱的上下文和处理程序都是辗转反侧,绘制路径,填充,活在你的记忆中,以每秒 60 个问题的速度增长。