Javascript 协作绘画应用程序

我正处于学习nodejs客户机/服务器编程的早期阶段，对于我的第一个应用程序，我只想制作一个简单的协作绘图应用程序，如paint。到目前为止，我已经有了这段代码，唯一似乎有效的是我的click正确地调用了我的console.log，但在click位置没有绘制矩形。有什么帮助吗？我对这个很陌生

var io=require（'socket.io'）（serv，{}）；
io.sockets.on（'connection'，函数（socket）{
SOCKET\u LIST[SOCKET.id]=SOCKET；
var self={
x:0,，
y:0，
cx:0，
cy:0，
}
socket.on（'mousePos'，函数（数据）{
self.x=data.x；
self.y=data.y；
//console.log（'x:'+self.x+'y:'+self.y）；
});
socket.on（'mouseClick'，函数（数据）{
self.cx=data.x；
self.cy=data.y；
console.log（'x:'+self.cx+'y:'+self.cy）；
});
emit（'paint'，{x:self.cx，y:self.cy}）；
/*用于（插座列表中的var i）{
var socket=插座列表[i]；
emit（'paint'，{x:self.cx，y:self.cy}）；
}*/
});

var socket=io（）；
var ctx=document.getElementById（“ctx”）.getContext（“2d”）；
ctx.fillStyle=“#FF0000”；
setInterval（函数（）{
},40);
document.onmousedown=函数（事件）{
emit（'mouseClick'，{x:event.clientX，y:event.clientY}）；
}
document.onmouseup=函数（事件）{
socket.on（'paint'，函数（数据）{
ctx.fillRect（data.x，data.y，10,10）；
});
}
document.onmousemove=函数（事件）{
emit（'mousePos'，{x:event.clientX，y:event.clientY}）；
}

在这里，您只订阅活动。所以你说“当鼠标向上移动时，请为绘制事件添加一个处理程序”（这样这个代码将被执行多次）。那么绘制事件是在哪里生成的呢？谁寄的？当建立连接时，您只发送一次。因此，您必须做的是：

模式将前端的事件侦听器绘制到事件侦听器的外部

从onConnection事件中删除发射（“绘制”）

将onMouseUp事件侦听器添加到nodejs

然后从客户端的onMouseUp事件将此事件发送到nodejs

然后更新节点中的坐标并生成绘制事件

在前端，聆听绘画事件并绘制图像

document.onmouseup = function(event){
    socket.on('paint', function(data){
        ctx.fillRect(data.x,data.y,10,10);
    });
}