协作绘画应用程序

我正处于学习nodejs客户机/服务器编程的初期阶段,对于我的第一个应用程序,我只想制作一个简单的绘图应用程序。 到目前为止,我有这个代码,似乎工作的唯一的事情是,我的点击正确调用我的console.log,但没有矩形绘制在点击位置。 任何帮助? 我对此很新。

var io = require('socket.io')(serv,{}); io.sockets.on('connection', function(socket){ SOCKET_LIST[socket.id] = socket; var self = { x:0, y:0, cx:0, cy:0, } socket.on('mousePos', function(data){ self.x = data.x; self.y = data.y; //console.log('x:' + self.x + ' y:' + self.y); }); socket.on('mouseClick', function(data){ self.cx = data.x; self.cy = data.y; console.log('x:' + self.cx + ' y:' + self.cy); }); socket.emit('paint', {x:self.cx, y:self.cy}); /*for (var i in SOCKET_LIST){ var socket = SOCKET_LIST[i]; socket.emit('paint', {x:self.cx, y:self.cy}); }*/ }); 
 <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <div id="gameCanvasDiv"> <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas> </div> <script> var socket = io(); var ctx = document.getElementById("ctx").getContext("2d"); ctx.fillStyle = "#FF0000"; setInterval(function(){ },40); document.onmousedown = function(event){ socket.emit('mouseClick', {x:event.clientX, y:event.clientY}); } document.onmouseup = function(event){ socket.on('paint', function(data){ ctx.fillRect(data.x,data.y,10,10); }); } document.onmousemove = function(event){ socket.emit('mousePos', {x:event.clientX, y:event.clientY}); } </script> 

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

在这里你只订阅活动。 所以你说 – “当鼠标hover,请添加一个处理程序的绘画事件”(所以这个代码将被执行多次)。 那么在哪里绘制事件? 谁发的? 连接build立后,只发送一次。 所以你必须做的是:

  1. 前端上的模式绘制事件监听器到事件监听器之外。

  2. 从onConnection事件中移除('paint')。

  3. 将onMouseUp事件侦听器添加到nodejs。

  4. 然后将这个事件从客户端的onMouseUp事件发送到nodejs。

  5. 然后更新节点中的坐标并生成绘画事件。

  6. 在前端听绘画事件和绘制图像。