双屏互动原理及事例.docx

《双屏互动原理及事例.docx》由会员分享，可在线阅读，更多相关《双屏互动原理及事例.docx（7页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

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

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

3、websocket只能支持IE10+和其他高端扫瞄器，在 兼容性方面socketio做的很好，所以对于前端工程师，我们优先选Nodejs和socket.io 来搭建WebSocket服务器端。前期我们可以在自己电脑搭建与服务器全都的环境来测试，本地搭建的方法： 1.下载官方Node.js ,安装可以始终下一步，我个人习惯都会自定义安装软件 2.安装Nodejs的模块管理器npm （官网最新版Nodejs已集成，无需单独安装） 3.命令窗口模式安装 socket.io （ npm install socket.io ）（这里假如遇到安装不胜利状况，留意考虑设置一下代理，设置方法：npm conf

4、ig set proxy二地址:端口号,运气实在不好的话从其他电脑复制同版本文件夹也一样） 4.最终查看安装的模块及版本：npm list苣理员:Command Prompticrosoft Windows 版本 6.1.7601 J权所有 2009 Microsoft Corporat ion o保留所有权利 d：Xnodejsnpn list：nodejs1- nprn(?l .4.3说到npm管理器，这里列一下几个常用的npm命令: npm -v查看当前npm的版本 npm list查看安装的模块及版本 npm install name安装需要nodejs依靠的模块 npm root查看

5、当前包安装路径 npm update name更新某个模块 npm help 关心也有很多案例结合nodejs的web框架express来构建http服务器,本次案例中没 有使用这种方案，所以这里也不做具体阐述。到此本地环境就已经搭建好，是不是很简洁Tips :可以在电脑-附件-把cmd命令提示符发送到桌面，右键属性-快捷方式-起始 位置设置成自己的nodejs安装名目，这样在后面本地调试demo的时候，每次启动命 令窗口就不用cd定位nodejs名目。还可以给电脑设置环境变量到安装名目，这样也可以 达到不用每次都定位文件夹。项目规律设计其实本次活动需求规律不是很简单，我的大致流程是： 1.从

6、PC端页面入口，与服务器app链接，猎取一个身份标识,该身份每次刷新页 面都随机生成 2.移动端页面通过猎取到PC端的随机身份生成的随机二维码，就同样可以猎取PC 端的那个标识 3.扫描二维码的过程就是与服务器进行连接，推断它猎取的身份标识与PC生成的标识是否全都，ok的话链接胜利，连续下一步发送和接收数据ClientlServerClient2建立连接发送数据服务器验证建立连接接收数据断开连接清除身份断开连接Socket发送与接收数据简洁demo如下：PC端和移动端都引入：/socket/socket.io.js ,大家在使用这个文件的时候，会发觉这 个路径在本地没这个文件，但是能够正常工作

7、，查看网上有人说是在恳求这个文件时会重 定向，在实际工作当中使用静态地址也是可行的。PC客户端刷新页面之后触发socketj。当中的内置大事connection,连接之后调 用带socketc参数的回调函数。当中比较关键的函数emit和on ,其中的大事名是可以自 定义，只要不和内置大事相冲突。以上是一个特别简洁的接收和发送数据的demo ,从上面可以看出，我们在移动端发 送了 MobileToPC大事，在服务器接收了该大事中的数据Data From mobile!,并且打印输出，之后发送给PC端，所以PC端接收后打印出该data数据(Data From mobile!), PC端发送也一样。

8、运行很简洁，在命令窗口下定位到nodejs安装名目运行: node app.js ,打开客户端页面就可以观察效果。我们的项目就是在就在此用法上增加规律推断，包括用户身份的标识，一对一的发送 和接收数据。首次做该类跨屏需求，我们遇到如下一些问题:问题：身份判断问题var cli ents=： clients, push (code ： user i d, socket： this);var removeFromArr = function(arr? id) var tempArr -;arr. or Each (function, i ) if (v. code != id) tempArr.

9、push (v)：)return tempArr;)socket, on (di sconnect”, function0 clients = removeFromArr (clients, socket, id);)；本文前面提到使用的随机标识，该标识我使用PC端生成的socketid ,每次生成的这 个身份都存在服务端的一个数组中，在移动端和发送数据时候去比较两者之间是不是一 对应，每次客户端在退出或者断开连接时采用disconnect来清除socket.id释放更多 资源，可是假如项目同时在线人数巨大的时候，服务器压力会比较大。该方法在虽然不影 响项目使用，但是还是有可改进的地方可优化的

10、方法：经过网上很多文章提到socket.io可以采用socket.join( your room name)进入一个房间，相当于一个命名空间，可以对一个特定的房间(同一个分组传输 消息)广播,而不影响在其他房间或不在房间的成员socket, on (roomA”, function (data) socket. join(roomA); )：socket. on(roomB”, function (data) socket. joinCroomB) ; );socket. to(roomA). emi t (euent_name”, data);io. sockets. in(roomA).

11、emi t (event_name”, data);问题：掌握台消失 socket.io is not allowed by Access-Control-Allow-Origin 跨域 问题通过网上搜寻和询问其他同学得知，增加headerstAccess-Control-Allow-Origin =*;google上也提到还有可能是版本冲突，该问题目前还没很好的解决方法。问题：叩p进程管理对于socket,需要始终运行进程App，假如进程有问题消失断开的时候,我们都要人 工重启App0所以可以考虑使用forever来管理App应用，它可以通过monitor来监控 node进程的运行状况，一旦消失问题可以自动重启，保证我们线上项目正常运行。结语：本次项目组首次运用跨屏互动的创新形式来进行线下落地活动，多少会担忧项目的使用，包括假如玩家没有连接胜利时候，在移动端是可以连续参与活动体验的， 在这种创新型活动当时，前期做好充分的时间来应对我们没有遇到过的问题很有必要，也 应当像本次项目一样，为自己的项目预留一些备选方案使得活动连续进行。在活动落地之 后，移动端页面还在需要连续优化，通过不同类型的移动设施赐予不同的体验效果。