《双屏互动原理及事例.docx》由会员分享，可在线阅读，更多相关《双屏互动原理及事例.docx（4页珍藏版）》请在三一办公上搜索。
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服务器端。 前期我们可以在自己电脑搭建与服务器一致的环境来测试，本地搭建的方法: 1. 下载官方Node.js，安装可以一直下一步，我个人习惯都会自定义安装软件 2. 安装Nodejs 的模块管理器npm 3. 命令窗口模式安装 socket.io 4. 最后查看安装的模块及版本：npm list 说到npm管理器，这里列一下几个常用的npm命令： npm -v 查看当前npm的版本 np
4、m list 查看安装的模块及版本 npm install name安装需要nodejs依赖的模块 npm root 查看当前包安装路径 npm update name 更新某个模块 npm help 帮助 也有很多案例结合nodejs的web框架express来构建http服务器，本次案例中没有使用这种方案，所以这里也不做详细阐述。到此本地环境就已经搭建好，是不是很简单= Tips：可以在电脑-附件-把cmd命令提示符发送到桌面，右键“属性-快捷方式-起始位置”设置成自己的nodejs安装目录，这样在后面本地调试demo的时候，每次启动命令窗口就不用cd定位nodejs目录。还可以给电脑设置
5、环境变量到安装目录，这样也可以达到不用每次都定位文件夹。 项目逻辑设计 其实本次活动需求逻辑不是很复杂，我的大致流程是： 1. 从PC端页面入口，与服务器app链接，获取一个身份标识，该身份每次刷新页面都随机生成 2. 移动端页面通过获取到PC端的随机身份生成的随机二维码，就同样可以获取PC端的那个标识 3. 扫描二维码的过程就是与服务器进行连接，判断它获取的身份标识与PC生成的标识是否一致，ok的话链接成功，继续下一步发送和接收数据 Socket发送与接收数据简单demo如下： PC端和移动端都引入：/socket/socket.io.js，大家在使用这个文件的时候，会发现这个路径在本地没这
6、个文件，但是能够正常工作，查看网上有人说是在请求这个文件时会重定向，在实际工作当中使用静态地址也是可行的。 PC客户端刷新页面之后触发socket.io当中的内置事件“connection”，连接之后调用带socketc参数的回调函数。当中比较关键的函数emit和on，其中的事件名是可以自定义，只要不和内置事件相冲突。 以上是一个非常简单的接收和发送数据的demo，从上面可以看出，我们在移动端发送了“MobileToPC”事件，在服务器接收了该事件中的数据“Data From mobile!”，并且打印输出，之后发送给PC端，所以PC端接收后打印出该data数据，PC端发送也一样。运行很简单，
7、在命令窗口下定位到nodejs安装目录运行：node app.js，打开客户端页面就可以看见效果。 我们的项目就是在就在此用法上增加逻辑判断，包括用户身份的标识，一对一的发送和接收数据。 首次做该类跨屏需求，我们遇到如下一些问题： 本文前面提到使用的随机标识，该标识我使用PC端生成的socket.id，每次生成的这个身份都存在服务端的一个数组中，在移动端和发送数据时候去比较两者之间是不是一一对应，每次客户端在退出或者断开连接时利用“disconnect”来清除socket.id释放更多资源，可是如果项目同时在线人数巨大的时候，服务器压力会比较大。该方法在虽然不影响项目使用，但是还是有可改进的地
8、方 可优化的方法：经过网上许多文章提到socket.io可以利用socket.join(“your room name”)进入一个房间，相当于一个命名空间，可以对一个特定的房间广播，而不影响在其他房间或不在房间的成员 问题：控制台出现socket.io is not allowed by Access-Control-Allow-Origin 跨域问题 通过网上搜索和咨询其他同学得知，增加 headersAccess-Control-Allow-Origin = *;google上也提到还有可能是版本冲突，该问题目前还没很好的解决方法。 问题：app进程管理 对于socket，需要一直运行进程
9、App，假如进程有问题出现断开的时候，我们都要人工重启App。所以可以考虑使用forever来管理App应用，它可以通过monitor来监控node进程的运行情况，一旦出现问题可以自动重启，保证我们线上项目正常运行。 项目结语：本次项目组首次运用跨屏互动的创新形式来进行线下落地活动，多少会担心项目的使用，包括如果玩家没有连接成功时候，在移动端是可以继续参加活动体验的，在这种创新型活动当时，前期做好充分的时间来应对我们没有遇到过的问题很有必要，也应该像本次项目一样，为自己的项目预留一些备选方案使得活动继续进行。在活动落地之后，移动端页面还在需要继续优化，通过不同类型的移动设备给予不同的体验效果。
