【发布时间】：2020-08-23 18:04:55
【问题描述】：
我一直在尝试使用 nodejs、socketio、js 制作一个程序，我可以在其中移动 Canvas 中的一个圆圈，并且所有其他客户端共享该圆圈及其位置。
因此，在任何客户端中移动一个，移动其余的，反之亦然。服务器处理位置，并将其发送回所有客户端
每个客户端都有自己的渲染。
问题是，每次我移动时，移动都会变得迟钝。就好像服务端从客户端得到了位置，但是有点偏，然后发出来，循环往复。
同样值得一提的是，连接的客户端越多，速度就越慢。但即使除了我使用的客户之外没有其他客户，它仍然有点滞后。和服务器实时更新有关。
视频：https://i.imgur.com/I6pGWo2.gif（总共有 2 个客户端，移动同步但滞后）
视频 2：https://i.imgur.com/DnfDHme.gif
视频 3：https://i.imgur.com/Sr7Mbxw.gif
服务器代码：
const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
const path = require('path');
app.use('/static', express.static(__dirname + '/static'));
app.get('/', function(request, response) {
response.sendFile(path.join(__dirname, 'index.html'));
});
let playerLoc = {
X: 50,
Y: 50,
}
function sendNewPos()
{
io.sockets.emit("newPos", playerLoc); //Send current server location to all clients
}
io.on('connection', socket => {
console.log("User Connected");
socket.on("clientPos", newPosData => { //get current Pos from all clients to then sync them together
playerLoc = newPosData;
})
});
setInterval(() => {
console.log("here:" + playerLoc.Y + " and X: " + playerLoc.X);
}, 22 );
setInterval(() => {
sendNewPos();
}, 100);
http.listen(3000, () => {
console.log('listening on *:3000');
});客户端代码：
//socket.on('num', (counter) => {
//$lst.appendChild(newItem(`hello - ${counter}`));
let player = {
moveW: false,
moveD: false,
moveS: false,
moveA: false,
}
let playerLoc = {};
var socket = io.connect();
socket.on("newPos", newLoc =>{ // get pos from client at the start so playerLoc isn't undefined
playerLoc = newLoc;
});
function render()
{
let c = document.getElementById("screen");
let ctx = c.getContext("2d");
ctx.clearRect(0, 0, screen.width, screen.height)
ctx.beginPath();
ctx.arc(playerLoc.X, playerLoc.Y, 50, 0, 2 * Math.PI); // 100 ix X, 75 is Y (first ix X, second is Y)
ctx.fillStyle = "black";
ctx.fill();
ctx.stroke();
}
document.addEventListener("keydown", event => {
if (event.keyCode == 87) // w
{
player.moveW = true;
}
if (event.keyCode == 68) // d
{
player.moveD = true;
}
if (event.keyCode == 83) // s
{
player.moveS = true;
}
if (event.keyCode == 65) // a
{
player.moveA = true;
}
})
document.addEventListener("keyup", event => {
if (event.keyCode == 87) // w
{
player.moveW = false;
}
if (event.keyCode == 68) // d
{
player.moveD = false;
}
if (event.keyCode == 83) // s
{
player.moveS = false;
}
if (event.keyCode == 65) // a
{
player.moveA = false;
}
})
function move()
{
if (player.moveW)
{
playerLoc.Y -= 5;
}
if (player.moveD)
{
playerLoc.X += 5;
}
if (player.moveS)
{
playerLoc.Y += 5;
}
if (player.moveA)
{
playerLoc.X -= 5;
}
}
setInterval(() => {
move();
}, 15);
setInterval(() => {
render();
}, 15);
socket.on("newPos", newLoc =>{ //get newPos from Server
playerLoc = newLoc;
console.log("Y: " + playerLoc.Y + "X: " + playerLoc.X);
console.log("boom");
});
setInterval(() => { //send current Position to server, which the server then uses to send to all clients so positions update correctly
socket.emit("clientPos", playerLoc)
}, 50);【问题讨论】：
标签： javascript node.js express socket.io