Node学习笔记(三):基于socket.io web版你画我猜(二)
上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步
首先先画一个流程图,讲下大概思路
<canvas id="container" width="300px" height="200px"></canvas>
<img id="aaa" width="300px" height="200px">
首先为了显示同步,做出img标签显示同步结果
服务器端:
var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs'); app.listen(8100); function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
} res.writeHead(200);
res.end(data);
});
} io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('startConnect', function (data) {
io.sockets.emit('news',data);
});
});
这边有很多坑,也是在自学的时候一个坑一个坑的踩过来的,首先websocket客户端,服务器require socket.io模块,这条路是走不通的,百度了下H5新的websocket api与node socket.io 协议不同(也是百度才知道的,是不是正确我也不清楚,反正没行得通),于是客户端只能采用引入socket.io.js,在做广播时也有点要注意 socket.emit('news',data)与io.sockets.emit('news',data)效果也是不一样的,后者可以实现广播,而前者只能对响应的客户端推送,当然安装express,socket.io时的各种报错,导致require失败,这些坑太多了,只能建议一句,把基础认真过一遍
var socket = io.connect('http://natureless.cn:8100');
socket.on('news', function (data) {
console.log("receive:"+data);
$("#aaa").attr('src',data);
});
这里初始化socket,并且将返回的data作为img 的src地址
下面就要做客户端与服务器端的通讯
var longPolling;
function polling(){
longPolling=setInterval(function(){canvas.returnData()},200);
}
做一个200ms的轮询,不停的执行canvas.returnData()这个function,即向服务器推送数据
var canvas={
.....省略一部分
returnData:function(){
console.log("---------------");
console.log("send:"+container.toDataURL());
socket.emit('startConnect', container.toDataURL());
console.log("---------------");
}
}
在处理交互的时候有很多问题,就是mouse事件会有很多冲突,迟滞,所以对mouse事件再进行一步优化
function mouseInit(){
$("#container").mousedown(function(e){
position.reset('mouseX','mouseY',e.pageX-this.offsetLeft,e.pageY-this.offsetTop);
polling();
//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){
canvas.returnData();
position.init();
clearInterval(longPolling);
}
})
$("#container").mouseleave(function(e){
if(paint){
canvas.returnData();
position.init();
clearInterval(longPolling);
}
})
}
在鼠标离开canvas或者mouseup时先做一步消息推送,在做一步clear轮询
ok,到这里,最简单画图共享就已经实现了,效果如下图:
做到这,可以说基本功能实现了,但是下面迎面而来又有很多问题,房间分配,词典,积分统计,哎,感觉这个游戏并不简单,慢慢加油吧
Node学习笔记(三):基于socket.io web版你画我猜(二)的更多相关文章
- Node学习笔记(三):基于socket.io web版你画我猜(一)
经过惨淡的面试,也是知道了自己的不足,刚好最近在学习node,心中便有了做一个web版的你画我猜的想法 首先说下思路,在做准备工作的时候,有两个大概的思路: 1.规定一块div,捕捉鼠标事件,动态生成 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- python网络编程学习笔记(三):socket网络服务器(转载)
1.TCP连接的建立方法 客户端在建立一个TCP连接时一般需要两步,而服务器的这个过程需要四步,具体见下面的比较. 步骤 TCP客户端 TCP服务器 第一步 建立socket对象 建立socket对 ...
- node学习笔记(三)
//事件驱动events //events是node最重要的模块没有之一,因为node.js本身的架构就是事件式的,而他提供了唯一的接口,所以堪称node.js事件编程的基石; //events几乎被 ...
- JAVA WEB学习笔记(三):简单的基于Tomcat的Web页面
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- Java IO学习笔记三
Java IO学习笔记三 在整个IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换类. OutputStreamWriter:是Writer的子类,将输出的 ...
- Java IO学习笔记四:Socket基础
作者:Grey 原文地址:Java IO学习笔记四:Socket基础 准备两个Linux实例(安装好jdk1.8),我准备的两个实例的ip地址分别为: io1实例:192.168.205.138 io ...
- Java IO学习笔记三:MMAP与RandomAccessFile
作者:Grey 原文地址:Java IO学习笔记三:MMAP与RandomAccessFile 关于RandomAccessFile 相较于前面提到的BufferedReader/Writer和Fil ...
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...
随机推荐
- DDD初学指南
去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...
- 【开源】.Net Api开放接口文档网站
开源地址:http://git.oschina.net/chejiangyi/ApiView 开源QQ群: .net 开源基础服务 238543768 ApiView .net api的接口文档查看 ...
- 《MySQL必知必会》学习笔记
数据库:数据库是一种以某种有组织的方式存储的数据集合.其本质就是一个容器,通常是一个或者一组文件. 表:表示一种结构化的文件,可用来存储某种特定类型的数据. 模式:描述数据库中特定的表以及整个数据库和 ...
- OpenSUSE下编译安装OpenFoam
在不是Ubuntu系统下安装OpenFoam,需要采用编译安装的方式.以下以OpenSuSE为例进行编译安装. 1 软件包准备 需要下载两个程序包: OpenFOAM-4.x-version-4.1. ...
- AutoIt实现Webdriver自动化测试文件上传
在运用WebDriver进行自动化测试时,由于WebDriver自身的限制,对于上传文件时Windows弹出的文件选择窗口无法控制,通过在网上查找资料锁定使用AutoIt来控制文件上传窗口. Auto ...
- Linux配置防火墙 开启80端口的方法
命令行输入: vi /etc/sysconfig/iptables 将 -A INPUT -m state --state NEW -m tcp -p tcp --dport 80 -j ACCEPT ...
- zerojs! 造出最好的 CMS 轮子
zerojs是一个基于nodejs.angularjs.git的CMS.在它之上可以继续开发出博客.论坛.wiki等类似的内容管理型系统. 拥抱开发者和社区 层次清晰,高度解耦.前后端即使分开也都是完 ...
- 快速Android开发系列网络篇之Android-Async-Http
先来看一下最基本的用法 AsyncHttpClient client = new AsyncHttpClient(); client.get("http://www.google.com&q ...
- esayui
- python code
执行动态语句 执行字符串中的代码 http://www.cnblogs.com/fanweibin/p/5418817.html #!usr/bin/env python #coding:utf-8 ...