admin管理员组

文章数量:1568304

2024年7月24日发(作者：)

《XXXX》基于WebSocket双屏互动体验

项目背景：

移动互联网时代的悄然来袭已经不断改变着我们的生活方式和体验模式，移动端的页

面交互形式也日新月异，这次为了配合《xxxx》的品牌宣传，我们在需求交互形式上采用

了全新的双屏互动体验模式。该需求主要以“xxxx“为主题，用户通过扫描二维码将手机

与PC屏幕进行连接，跟随游戏提示，通过小游戏中三角色扮演打破锁链营救主角，让玩

家深度体验《xxxxx》这种创新剧情。

双屏互动原理描述：

现在多数双屏互动的实现方式主要是依靠浏览器的WebSocket即时通信技术，包括

国外许多案例，在以前传统的网站为了实现这种技术基本都是轮询，在一个特定的时间内，

由客户端向服务端发出请求，之后服务器返回到浏览器，这种传统的实现方法需要客户端

不停的向服务端请求数据，而且其传输的数据可能是一个很小的值。

在 WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后浏览器和

服务器之间就形成了一条快速通道，两者之间就可以直接实时的互相传送数据。

采用websocket技术的页面不同于普通页面，而是需要特殊的服务器环境支持。

服务器环境的搭建：

目前支持WebSocket环境有很多方式，比如PHP、Java、.Net、Tomcat、Nodejs

等，还有html5 的websocket方案，但是目前在我国浏览器使用情况上，IE用户还占有

50%左右的市场份额，html5 的websocket只能支持IE10+和其他高端浏览器，在兼容

性方面做的很好，所以对于前端工程师，我们优先选Nodejs和来搭

建WebSocket服务器端。

前期我们可以在自己电脑搭建与服务器一致的环境来测试，本地搭建的方法:

•

1. 下载官方，安装可以一直下一步，我个人习惯都会自定义安装软件

•

2. 安装Nodejs 的模块管理器npm（官网最新版Nodejs已集成，无需单独安装）

•

3. 命令窗口模式安装 （npm install ）

（这里如果遇到安装不成功情况，注意考虑设置一下代理，设置方法：npm config set

proxy=地址:端口号，运气实在不好的话从其他电脑复制同版本文件夹也一样）

•

4. 最后查看安装的模块及版本：npm list

本文标签： 安装浏览器实现双屏

版权声明：本文标题：双屏互动原理及事例 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1721828469a899654.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。