Node学习笔记:基于socket.io web版你画我猜

Posted Natureless Code

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Node学习笔记:基于socket.io web版你画我猜相关的知识,希望对你有一定的参考价值。

经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法

首先说下思路,在做准备工作的时候,有两个大概的思路:

1.规定一块div,捕捉鼠标事件,动态生成position absolute,长宽1px的红色小div,这样可以模拟出划线的轨迹,做一个long polling,不断获取DOM结构,推送到socket端口,然后再广播给所有客户端

2.利用canvas作图,将canvas的数据推送到socket端口,广播所有客户端

其实之所以有两种想法,无非就是作图这块出现了分歧,方法一,大量DOM树的重绘,无疑会给浏览器造成巨大的负担,但是canvas作图,也苦于数据无法导出,但是功夫不负有心人,canvas的数据流是可以通过toDataURL()导出数据的,于是开动!

var paint=false;//判断是否是需要绘画
var container=document.getElementById(\'container\')
var context=container.getContext("2d")
var mouseX=0,mouseY=0,nowX=0,nowY=0;//存储坐标记录

做一个对象对事件进行汇总,包含对position的替换重置,canvas的绘制及重绘,导出数据

var position={
		reset:function(actionX,actionY,goalX,goalY){  //坐标替换
			paint=true;
			var order=" "+actionX+"="+goalX+","+actionY+"="+goalY;
			eval(order);
			console.log(mouseX);
		},
		init:function(){        //坐标清零
			console.log("init");
			paint=false;
			mouseX=0;
			mouseY=0;
			nowX=0;
			noxY=0;
		}
	}
	var canvas={
		init:function(){     //canvas初始化
			context.strokeStyle = "blue";    
	                context.strokeRect(0,0,300,200);
	                context.stroke();
		},
		draw:function(lastX,lastY,nowX,nowY){    //canvas划线
				context.lineWidth = 1; 
				context.beginPath(); 
				context.moveTo(lastX, lastY); 
				context.lineTo(nowX,nowY); 
				context.stroke(); 
				position.reset(\'mouseX\',\'mouseY\',nowX,nowY);
		},
		redraw:function(){    //canvas重绘
			position.init();
		},
		returnData:function(){        //canvas导出数据流
			socket.emit(\'startConnect\', container.toDataURL())
		}
	}

绘图最重要的就是对坐标的处理,我们在鼠标点击的时候记录点击时的坐标,存储起来付给mouseXY,在mousemove的时候记录坐标付给NowXY,用lineto进行绘线,鼠标点击弹起时,paint置为false 停止绘画

$("#container").mousedown(function(e){
		position.reset(\'mouseX\',\'mouseY\',e.pageX-this.offsetLeft,e.pageY-this.offsetTop);
		console.log(mouseX+":"+mouseY);
	})
	$("#container").mousemove(function(e){
		if(paint){
			console.log(mouseX+":"+mouseY);
			position.reset(\'nowX\',\'nowY\',e.pageX-this.offsetLeft,e.pageY-this.offsetTop);
			canvas.draw(mouseX,mouseY,nowX,nowY);
		}
	})
	$("#container").mouseup(function(e){
		if(paint){
			position.init();
			canvas.returnData();
		}
	})
	$("#container").mouseleave(function(e){
		if(paint){
			position.init();
		}

	})

效果如图 

ok,绘图就算解决了,下面要解决的就是客户端的管理与同步了

以上是关于Node学习笔记:基于socket.io web版你画我猜的主要内容,如果未能解决你的问题,请参考以下文章

用于WEB端的即时通讯的框架Socket.IO

Part 17:Cocos2d-x开发实战-基于Node.js的Socket.IO网络通信-关东升-专题视频课程

Socket.IO介绍:支持WebSocket用于WEB端的即时通讯的框架

Node.js笔记-使用socket.io构建websocket聊天室

设计实时 Web 应用程序(Node.js 和 socket.io)

web socket