我实际上正在开发一个小型的虚拟游戏，用户可以聊天并尝试猜测画布上的绘画。 我设法使绘制的图形实时显示在所有连接的插座上，但是我觉得线条画比较滞后，因为当我在一个简单的html-js页面上进行绘制（没有插座或实时）时，它工作正常。绘图不平滑。我在下面发布了所有代码。 （客户端HTML和JS，服务器JS均已发布）
**Client side HTML**
<html>
<head>
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3mobile.css">
<title>Socket.IO chat</title>
<style>
body {
background-color: #42485d;
}
#Greet {
display: none;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages li {
padding: 5px 10px;
}
#messages li:nth-child(odd) {
background: #eee;
}
#chatbox {
height: 350px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div class="w3-row-padding" style="padding:5%">
<div class="w3-col s12 m4 l4 w3-center" style="background-color:#74b5b1">
<div class="w3-row w3-section w3-container" id="unameInput">
<input type="text" id="uname" placeholder="Username" class="w3-input w3-border" />
<button class="w3-btn" id="btname">OK</button>
</div>
<div class="w3-row w3-section w3-container w3-center" id="Greet">
<p id="name"></p>
</div>
</div>
<div class="w3-col s12 m4 l4 w3-center">
<canvas id="myCanvas" width="400px" height="300" style="border:1px solid #000000;background-color:white">
</canvas>
</div>
<div class="w3-col s12 m4 l4 w3-center" style="background-color:#93e0a8">
<div class="w3-row w3-section w3-container">
<div class="w3-container">
<div class="w3-container" style="background-color:#74b5b1;padding:0.1px;">
<h3>Chat</h3>
</div>
<div class=" w3-border" id="chatbox" style="background-color:white">
</div>
<form action="">
<div class="w3-cell-row" style="width:100%">
<div class="w3-cell">
<input id="m" autocomplete="off" class="w3-input w3-border w3-block" style="width:100%" />
</div>
<div class="w3-cell">
<button class="w3-btn" style="background-color:#74b5b1;width:100%">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
**Client-side JS**
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw() {
context.clearRect(0, 0, context.canvas.width,
context.canvas.height); // Clears the canvas
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for (var i = 0; i < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
function processMsg(word, M) {
if (word == M) {
return true;
} else {
return false;
}
}
$(function() {
var socket = io();
$('form').submit(function() {
socket.emit('chat message', $('#m').val());
console.log($('#m').val());
$('#m').val('');
return false;
});
$('#myCanvas').mousedown(function(e) {
socket.emit('paint', true);
socket.emit('mousedown', {
X: e.pageX - this.offsetLeft,
Y: e.pageY - this.offsetTop
});
});
socket.on('paint', function(p) {
paint = p;
console.log(p);
});
socket.on('mousedown', function(positiondown) {
addClick(positiondown.X, positiondown.Y);
redraw();
});
$('#myCanvas').mousemove(function(e) {
if (paint) {
socket.emit('mousemove', {
X: e.pageX - this.offsetLeft,
Y: e.pageY - this.offsetTop
});
}
});
socket.on('mousemove', function(positionmove) {
addClick(positionmove.X, positionmove.Y, true);
redraw();
});
$('#myCanvas').mouseup(function(e) {
socket.emit('paint', false);
});
$('#myCanvas').mouseleave(function(e) {
socket.emit('paint', false);
});
socket.on('chat message', function(msg) {
var treated = msg.message.toUpperCase();
if (processMsg("UMBRELLA", treated) == true) {
$('#chatbox').append($('<div class="w3-small w3-green"
style="width:100%;text-align:left;">').text(msg.nkname +
" found the answer"));
} else {
$('#chatbox').append($('<div class="w3-small"
style="width:100%;text-align:left;">').text(msg.nkname +
": " + msg.message));
}
});
$("#btname").click(function() {
socket.emit('send-nickname', $('#uname').val());
$('#unameInput').hide();
$('#name').text($('#uname').val());
$('#Greet').show();
$('#uname').val('')
});
});
**Server side JS**
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var user;
var users = [];
io.on('connection', function(socket) {
socket.on('send-nickname', function(nickname) {
socket.nickname = nickname;
});
// socket.on('disconnect', function(){
// console.log('user disconnected');
// });
// socket.on('chat message', function(msg){
// console.log(socket.nickname+':'+ msg);
// });
socket.on('chat message', function(msg) {
io.emit('chat message', {
nkname: socket.nickname,
message: msg
});
});
socket.on('mousedown', function(positiondown) {
io.emit('mousedown', positiondown);
});
socket.on('paint', function(paint) {
io.emit('paint', paint);
});
socket.on('mousemove', function(positionmove) {
io.emit('mousedown', positionmove);
});
});
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
http.listen(3000, function() {
console.log('listening on *:3000');
});