近期，公司基于自家产品设计了一款投屏H5应用，用户可以通过我们的产品平台设计并启用投屏功能的H5页面，并实现消息交互等功能。整体实现和用户体验都是基于前端实现的，所以再次整理一下自己的设计和实现思路，分享给大家。使用场景投射应用程序很容易操作。用户只需填写简单信息，即可实现服务上墙，在活动现场进行创意互动，点燃现场情绪。尤其是在几乎人手一部智能手机的今天，投屏应用在峰会、活动、婚宴等场所更是大放异彩——只需“扫描”屏幕上的二维码，通过投影，把自己的意见和建议提出来上墙，参与讨论，分享意见，大大提高了会场的互动效果和亮点。主要问题及解决方案1、如何让普通用户作为用户获取自己的挂墙页面，无需复杂的设计和编码能力，只需要几步即可搭建自己的投屏应用，从而吸引用户。使用该系统降低了用户的使用成本和学习成本。我们主要的实现方式是让用户通过我们的产品平台可以选择性的设置用于投屏的页面或者模块。只需要简单的背景和动画选择几步就可以得到投屏页面地址，从而可以进行投屏。2、如何及时展示互动信息每个参与投影应用的人都希望自己的信息能够及时展示在投影屏幕上，带动现场活动的积极性和大家的互动氛围。常规的实现方案如下：1、定时轮询客户端通过设置一定的轮询时间，定期向服务器请求新消息，从而更新投影屏幕上的新内容。这会带来一个问题：轮询时间的设置？如果轮询时间长，会导致一定时间内的消息堆积，影响交互的及时性；如果轮询时间短，会增加请求数，影响性能，所以这个方案缺点比较多。2、WebSocket通信WebSocket协议是一种基于TCP的新型网络协议。它实现了浏览器与服务器的全双工通信——可以理解为服务器主动向客户端发送信息。现在大部分投屏交互的实现方式主要依赖于浏览器的WebSocket即时通讯技术，包括很多国外的案例。以往传统网站基本上都是采用上面提到的轮询来实现这个技术。在WebSocketAPI中，浏览器和服务器只需要进行一次握手，浏览器和服务器之间就形成了一个快速通道，两者可以直接实时地互相传输数据。使用websocket技术的页面不同于普通页面，需要特殊的服务器环境支持。这样就可以实现消息交互的时效性。服务端收到新的交互消息后，会直接通过websocket通知客户端，客户端收到消息后只需要及时显示即可。3、交互消息的处理通过上面的分析我们可以知道，消息交互的及时展示可以通过websocket连接的建立来实现。但是如何处理整体消息显示呢？如何整合新旧消息数据的处理？我的处理是这样的：进入页面后，获取当前时间交互消息的总数据，作为总消息队列存储为baseArray（按创建时间顺序排列）；将上面的baseArray复制到runArray中作为显示执行队列；根据显示情况，每次从runArray队列的头部选择一定量的消息数据进行一屏显示（设置一屏显示n条数据）。如果没有新消息，则根据显示时间间隔3重复上述操作，获取数据进行显示；当runArray队列显示不够时，再次复制baseArray，连接到runArray的后面；当有新的消息item到来时（约定每次通知一条数据），为了保证新消息显示的时效性，此时，将item分别放在两个队列的头部，baseArray为主要用于保证消息总的顺序；runArray主要用于保证下一次截屏显示时新消息的时效性。根据以上逻辑，可以实现交互过程中的消息展示，保证消息展示的时效性。综上所述，以上是本次产品开发的经验总结。文笔有限。希望能阐明我的一些观点：）对websocket技术进行扩展和延伸，基本可以实现所有实时交互场景的交互开发。多屏交互一般有四种交互模式：单模式：适用于在线PC互联网广告和线下长期固定场所。 双模式：适用于在线PC互联网广告、双屏移动互联网广告和线下营销。多人模式：适用于线下酒吧、咖啡店、KTV等场所。 不限人数模式：适用于大型线下商场、机场、活动、庆典、年会等。PS：可添加微信订阅号“冷星学前端”同步更新文章内容
