双屏互动原理及事例

1、XXXX基于WebSocket双屏互动体验项目背景：移动互联网时代的悄然来袭已经不断改变着我们的生活方式和体验模式移动端的页面交互形式也日新月异，这次为了配合XXXX的品牌宣传，我们在需求交互形式上采用了全新的双屏互动体验模式。该需求主要以Xxxx为主题，用户通过扫描二维码将手机与PC屏幕进行连接，跟随游戏提示，通过小游戏中三角色扮演打破锁链营救主角，让玩家深度体验XXXXX这种创新剧情。双屏互动原理描述：现在多数双屏互动的实现方式主要是依靠浏览器的WebSocket即时通信技术，包括国外许多案例，在以前传统的网站为了实现这种技术基本都是轮询，在一个特定的时间内，由客户端向服务端发出请求，之后

2、服务器返回到浏览器，这种传统的实现方法需要客户端不停的向服务端请求数据，而且其传输的数据可能是一个很小的值。在WebSocketAPI中，浏览器和服务器只需要要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就可以直接实时的互相传送数据。采用websocket技术的页面不同于普通页面，而是需要特殊的服务器环境支持。服务器环境的搭建：目前支持WebSocket环境有很多方式，比如PHP、Java、.Net、Tomcat、Nodejs等，还有html5的websocket方案，但是目前在我国浏览器使用情况上E用户还占有50%左右的市场份额,html5的websocket只能支

3、持IE10+和其他高端浏览器，在兼容性方面socket.io做的很好，所以对于前端工程师，我们优先选Nodejs和socket.io来搭建WebSocket服务器端。浏売關对HTIVIL5WebSocket的支持情况遢題夫持蒂况Chrome斗十Frefox4十IE10-kOp苗nSafari5十前期我们可以在自己电脑搭建与服务器一致的环境来测试，本地搭建的方法:下载官方Node.js，安装可以一直下一步，我个人习惯都会自定义安装软件安装Nodejs的模块管理器npm（官网最新版Nodejs已集成，无需单独安装）命令窗口模式安装socket.io（npminstallsocket.io）（这里如

4、果遇到安装不成功情况，注意考虑设置一下代理，设置方法：npmconfigsetproxy二地址:端口号，运气实在不好的话从其他电脑复制同版本文件夹也一样）叵14.最后查看安装的模块及版本：npmlistcl：nodcj&npnlista：nodejsr丽j.営坯员；Command)Promptnudej5-wt?brocketP0.14FnrimOl.4.3abbreu(?l.0.4ansB0_2_lansicolorsPa.J.2：blUisist#le&30.1=3aicliy?0.0.2blockstreanPS7child-process-clDseya.1.1chnodi*0.1.0

5、chownrl?0.0.1riicrosoftWindows6.1.76B11扳权所宥a2009MicrosoftCorporationc保鱼所有权刑说到npm管理器，这里列一下几个常用的npm命令:npm-v查看当前npm的版本npmlist查看安装的模块及版本npminstallname安装需要nodejs依赖的模块npmroot查看当前包安装路径npmupdatename更新某个模块npmhelp帮助也有很多案例结合nodejs的web框架express来构建http服务器，本次案例中没有使用这种方案，所以这里也不做详细阐述。到此本地环境就已经搭建好，是不是很简单二二Tips:可以在电脑

6、-附件-把cmd命令提示符发送到桌面，右键属性-快捷方式-起始位置”设置成自己的nodejs安装目录，这样在后面本地调试demo的时候，每次启动命令窗口就不用cd定位nodejs目录。还可以给电脑设置环境变量到安装目录，这样也可以达到不用每次都定位文件夹。项目逻辑设计其实本次活动需求逻辑不是很复杂，我的大致流程是：1.从PC端页面入口，与服务器app链接，获取一个身份标识，该身份每次刷新页面都随机生成2.移动端页面通过获取到PC端的随机身份生成的随机二维码，就同样可以获取PC端的那个标识3.扫描二维码的过程就是与服务器进行连接，判断它获取的身份标识与PC生成的标识是否一致，ok的话链接成功，继

7、续下一步发送和接收数据Socket发送与接收数据简单demo如下：PC端和移动端都引入：/socket/socket.io.js，大家在使用这个文件的时候，会发现这个路径在本地没这个文件，但是能够正常工作，查看网上有人说是在请求这个文件时会重定向，在实际工作当中使用静态地址也是可行的。PC客户端刷新页面之后触发socket.io当中的内置事件connection”，连接之后调用带socketc参数的回调函数。当中比较关键的函数emit和on,其中的事件名是可以自定义，只要不和内置事件相冲突。岡端varsocket=io.camectCtitlp/1ZT.0.0.U5060fl);=adiet,

8、sit.CPIoliile：ToPCPrtimobile!;oncaiTraDfltfiTo&lobl1afunction.i.)1cojLg&le.los(data)Edcket.onCdLEcoimectfunclion亠=八：错捋断开清別義庞直!“);版35顷viiht.,tp=requinI,kiip2d=taulre(socket,iJ;varapp=ereateSerYer(J,ip=ilisLentapp.);app.lisiexl(6060);io.sedne3.anl.，Jcqhjicinoil,EtlueIloill.ssckeL.)socket.,on(rtNaliiel

9、oPC.fimciion(lata)consale.loE(illal;丿/朋虽湍输出打印soeket.Iroaleast.eraitSeudDataToPCv,iata);】)；eticket,on(rtrC7oNcLile-.func11on(lataJconsale.lo(datal;sachet,troaicast.enitCRecelveBatarolflobiLedata):H:PGSvar3Diiet=ats.cPimecIClittp:/127.0.0.L：BD90J;socket.onrSeiLnialarLFPCfuiictioiL(data)console,loj(dat

10、a)funtigSaudiA.ta.0=ccl：4i.LtCPCroMobilfl,nuta.Iron比IJ;4“I：無訥断F!)I).以上是一个非常简单的接收和发送数据的demo，从上面可以看出，我们在移动端发送了“MobileToPC”事件，在服务器接收了该事件中的数据DataFrommobile!，并且打印输出，之后发送给PC端，所以PC端接收后打印出该data数据(DataFrommobile!),PC端发送也一样。运行很简单，在命令窗口下定位到nodejs安装目录运行:nodeapp.js,打开客户端页面就可以看见效果。我们的项目就是在就在此用法上增加逻辑判断，包括用户身份的标识，一

11、对一的发送和接收数据。首次做该类跨屏需求，我们遇到如下一些问题:zliGrits,psjshtaods:uEerid,sooket：tliis)varrsnovQFroricirr二functicn(rr,id)zartsmpArr=;arir.rEach.QEurwtion/1.Jia血1=iJHsoaket.CriCiiscZrLriectiunction0cli=ramoveFranAnr(.clicritEcoaket.ldl打；本文前面提到使用的随机标识，该标识我使用PC端生成的socket.id，每次生成的这个身份都存在服务端的一个数组中，在移动端和发送数据时候去比较两者之间是不是

12、一一对应，每次客户端在退出或者断开连接时利用disconnect”来清除socket.id释放更多资源，可是如果项目同时在线人数巨大的时候J服务器压力会比较大。该方法在虽然不影响项目使用，但是还是有可改进的地方可优化的方法经过网上许多文章提到socket.io可以利用socket.join(yourroomname“)进入一个房间，相当于一个命名空间，可以对一个特定的房间(同一个分组传输消息)广播，而不影响在其他房间或不在房间的成员soeket.C*roonk,fimction.socket.,join斗jchtAJ;eockdi.onwfoonE二fimctigfdatb.leaeket.j

13、oinrodnB；二zlo.Edckct.E.inCroorhArt).omit/6vojit_nfirrieA,d-a.tb.):问题：控制台出现socket.ioisnotallowedbyAccess-Control-Allow-Origin跨域问题通过网上搜索和咨询其他同学得知，增加headersAccess-Control-Allow-Origin二丹;google上也提到还有可能是版本冲突，该问题目前还没很好的解决方法。问题：app进程管理对于socket，需要一直运行进程App，假如进程有问题出现断开的时候，我们都要人工重启App。所以可以考虑使用forever来管理App应用，它可以通过monitor来监控node进程的运行情况，一旦出现问题可以自动