《双屏互动原理及事例》由会员分享，可在线阅读，更多相关《双屏互动原理及事例（10页珍藏版）》请在金锄头文库上搜索。
1、XXXX基于 WebSocket 双屏互动体验项目背景：移动互联网时代的悄然来袭已经不断改变着我们的生活方式和体验模式，移动端的页面交互形式也日新月异，这次为了配合 xxxx的品牌宣传，我们在需求交互形式上采用了全新的 双屏互动体验模式。该需求主要以“xxxx “为主题，用户通过扫描二维码将手机与PC屏幕进行连接，跟随游戏提示，通过小游戏中三角色扮演打破锁链营救主角，让玩家深度体验xxxxx这种创新剧情。双屏互动原理描述：现在多数双屏互动的实现方式主要是依靠浏览器的WebSocket即时通信技术，包括国外许多案例，在以前传统的网站为了实现这种技术基本都是轮询，在一个特定的时间内，由客户端向服务
2、端发出请求，之后服务器返回到浏览器，这种传统的实现方法需要客户端不停的向服务端请求数据，而且其传输的数据可能是一个很小的值。在 WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就可以直接实时的互相传送数据。采用websocket技术的页面不同于普通页面，而是需要特殊的服务器环境支持。服务器环境的搭建：目前支持 WebSocket 环境有很多方式，比如 PHP、Java、.Net、Tomcat、Nodejs 等， 还有html5 的websocket方案，但是目前在我国浏览器使用情况上，IE用户还占有50%左右的市场份额，
3、html5 的websocket只能支持IE10+和其他高端浏览器，在兼容性方面 socket.io 做的很好，所以对于前端工程师，我们优先选Nodejs和socket.io 来搭建WebSocket 服务器端。Chromei *It10-Opisra1Q+Satori3 T湖戍器订HIMLb ebsocket cn蓋持储:沁前期我们可以在自己电脑搭建与服务器一致的环境来测试，本地搭建的方法：1.下载官方Node.js，安装可以一直下一步，我个人习惯都会自定义安装软件2.安装Nodejs的模块管理器npm （官网最新版Nodejs已集成，无需单独安装）3.命令窗口模式安装 socket.io
4、（npm install socket.io ）（这里如果遇到安装不成功情况，注意考虑设置一下代理，设置方法：npm config setproxy=地址:端口号，运气实在不好的话从其他电脑复制同版本文件夹也一样）4.最后查看安装的模块及版本：npm list说到npm 管理器，这里列一下几个常用的npm 命令：* npm -v 查看当前npm 的版本* npm list查看安装的模块及版本* npm install name安装需要 nodejs 依赖的模块* npm root 查看当前包安装路径* npm update name更新某个模块* npm help 帮助也有很多案例结合 nod
5、ejs的web框架express来构建http服务器，本次案例中没有使用这种方案，所以这里也不做详细阐述。到此本地环境就已经搭建好，是不是很简单Tips :可以在电脑-附件-把cmd命令提示符发送到桌面， 右键“属性-快捷方式-起始位置”设置成自己的nodejs安装目录，这样在后面本地调试 demo的时候，每次启动命令窗口就不用cd定位nodejs目录。还可以给电脑设置环境变量到安装目录，这样也可以达到不用每次都定位文件夹。项目逻辑设计其实本次活动需求逻辑不是很复杂，我的大致流程是：1.从PC端页面入口，与服务器 app链接，获取一个身份标识，该身份每次刷新页面都随机生成 2.移动端页面通过获
6、取到 PC端的随机身份生成的随机二维码，就同样可以获取PC端的那个标识3.扫描二维码的过程就是与服务器进行连接，判断它获取的身份标识与 PC生成的标识是否一致，ok的话链接成功，继续下一步发送和接收数据建立连接建立连裁服务器验证发送数据接收数据断开连接清除身份針开连怨Socket发送与接收数据简单 demo如下:PC端和移动端都引入：/socket/socket.io.js，大家在使用这个文件的时候，会发现这个路径在本地没这个文件，但是能够正常工作，查看网上有人说是在请求这个文件时会重定向， 在实际工作当中使用静态地址也是可行的。PC客户端刷新页面之后触发socket.io当中的内置事件con
7、n ection，连接之后调用带socketc参数的回调函数。当中比较关键的函数emit和on，其中的事件名是可以自定义，只要不和内置事件相冲突。Ivur 5Orckit - i .tp . / /127. 0. 1 60&0 * :sgdkft- t (11*1)il，TJ a.i. 4 Tiori iwubiluv flckst 臼“】二 fvxel: i. an (41 h * J ?cons Die. leg I data)j cdektt an t* Il fiMiet*,. Eyuiets it ) 亠吃t钳捋aii开请駁阖f页五)ver http- reqizirehttpJ#
8、1 s= tt jt.lr Csocket, i. JI vor 首 pP =CKftttSfrrcr 0 i p - i. eapp. 11 al史ax (9080).i- acclfie 13r unc t naec iwi.e t E dtl(5n-zket) S-kJhtl. 4II讥 al7mFC* fuACll PJi(dLl equals. Ide- /./IBS出丰TEJ5*0 cJf41-. tir4 lie n t.i (VS ea3I anprr. push (vj;r打lanpAriri宇Qulwt m f di yhqt爭鸟共： fimction Q f當Li. ar
9、ils - rfiffievaFrtfftArir (diatE Etdxci. id:本文前面提到使用的随机标识，该标识我使用PC端生成的socket.id，每次生成的这个身份都存在服务端的一个数组中，在移动端和发送数据时候去比较两者之间是不是一一对应,每次客户端在退出或者断开连接时利用disconnect ”来清除socket.id 释放更多资源，可是如果项目同时在线人数巨大的时候,服务器压力会比较大。该方法在虽然不影响项目使用,但是还是有可改进的地方可优化的方法：经过网上许多文章提到socket.io 可以利用 socket.join( “ your room name ”进入一个房间，
10、相当于一个命名空间,可以对一个特定的房间（同一个分组传输消息） 广播,而不影响在其他房间或不在房间的成员S,*clt-et.，日hA* fXi亡1tidti I liLtJ t. j 1 & . tc tffjh J : Jeoctdt cn(wiriQn3uxcti onfd-at a.,1 taQket:nl.rftoriEA：“韭吧L 3CE沁)-eait ( 1 even.t_n.4n J： dSaJ：l *EcirctE in rofflnAJ，). mit vat-Jilt a I问题：控制台出现 socket.io is not allowed by Access-Control
11、-Allow-Origin跨域问题通过网上搜索和咨询其他同学得知，增加headersAccess-C on trol-Allow-Origi n=*;google上也提到还有可能是版本冲突，该问题目前还没很好的解决方法。问题：app进程管理对于socket，需要一直运行进程 App，假如进程有问题出现断开的时候，我们都要人工重启App。所以可以考虑使用forever来管理App应用，它可以通过 monitor 来监控node进程的运行情况，一旦出现问题可以自动重启，保证我们线上项目正常运行。项目结语：本次项目组首次运用跨屏互动的创新形式来进行线下落地活动，多少会担心项目的使用，包括如果玩家没有连接成功时候，在移动端是可以继续参加活动体验的，在这种创新型活动当时，前期做好充分的时间来应对我们没有遇到过的问题很有必要，也应该像本次项目一样，为自己的项目预留一些备选方案使得活动继续进行。在活动落地之后，移动端页面还在需要继续优化，通过不同类型的移动设备给予不同的体验效果。
