Question

我正处于学习nodejs客户端/服务器编程的早期阶段，对于我的第一个应用程序，我只想制作一个简单的协作绘图应用程序，如paint。到目前为止，我有这个代码，唯一似乎有用的是我的click在我的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>

Answer 1

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

这里您只订阅活动。所以你说 - “当鼠标按下时，请为paint事件添加一个处理程序”（因此这段代码将被执行多次）。那么油漆事件在哪里产生？是谁送的？建立连接后，您只发送一次。所以你需要做的是：

模式将事件侦听器放在事件侦听器外部的前端。
从onConnection事件中删除emit（'paint'）。
将onMouseUp事件侦听器添加到nodejs。
然后从客户端的onMouseUp事件向nodejs发送此事件。
然后更新节点中的坐标并生成绘画事件。
在前端听油漆事件并绘制图像。

协同涂料应用程序

1 个答案: