投屏类H5应用开发分析

最近公司设计了一款基于自己产品的投屏类H5应用，能够使得用户通过我们的产品平台来设计启用用于投屏功能的H5页面，实现留言互动等功能。整体的实现和用户体验都是基于前端实现来完成的，特此再次整理一下自己的设计实现思路以供大家分享。

使用场景

投屏类应用操作简便，用户仅需要填写简单信息便可实现上墙服务，进行活动现场创意互动，点燃现场情绪。特别是在几乎人人都拥有一部智能手机的今天，投屏类应用在峰会、活动、婚礼现场等场所更是大放异彩——简单“扫一扫”屏幕上二维码，通过投影将自己的观点与建议上墙，参与讨论，分享观点，大幅度提升会场互动效果与亮点呈现。

主要问题以及解决方法

1.如何使得普通用户能够获取自己的上墙页面

作为用户，不需要复杂的设计和编码能力，只需要几步设置就可以搭建起来自己的投屏应用，这样才能够吸引用户的使用，降低用户的使用成本和学习成本。

我们的主要实现方法是使用户通过我们的产品平台进行选择性的设置将要用来投屏的页面或者模块，只要几步简单的背景、动画的选择即可获取到一个投屏页面地址，从而能够进行投屏展示。

2.如何能够及时的展现互动信息

每一个参与投屏应用的人都希望自己的信息能够及时的展示在投屏上面，从而能够带动现场活动的热情和大家的互动氛围。

常规的实现方案有以下两个：

一、定时轮询

客户端通过设置一定的轮询时间来定时的向服务器请求问询是否有新的消息，从而将新内容更新到投屏上面。
这样就会带来一个问题：轮询时间的设定？
轮询时间较长的话，就会导致一定时间内的消息堆积，以及互动的及时性；
轮询时间较短的话，又会增加请求次数，从而导致影响性能，所以这个方案是弊端较大的。

二、WebSocket通信

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——可以通俗的解释为服务器主动发送信息给客户端。

现在多数投屏互动的实现方式主要是依靠浏览器的WebSocket即时通信技术，包括国外许多案例，在以前传统的网站为了实现这种技术基本都是前面提到的轮询。

在 WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就可以直接实时的互相传送数据。 采用websocket技术的页面不同于普通页面，而是需要特殊的服务器环境支持。

这样就能够实现消息互动的及时性，由服务器接收到新的互动消息之后直接通过websocket通知到客户端，客户端只要在接收到消息的时候进行及时的展示即可。

3.互动消息的处理

通过上面的分析可以知道，通过websocket的连接建立可以实现消息互动的及时性展示。但是整体的消息展示的处理该如何来做呢？新老消息数据的处理又该如何来融合呢？

我的处理是这样进行的：

1. 进入页面后获取到当前时间的互动消息的总数据，存储为baseArray作为总的消息队列（约定按照创建时间的新旧顺序排列）；
2. 拷贝上面的baseArray到runArray作为展示的执行队列；
3. 根据展示情况，每次从runArray队列的头部选取一定数量的消息数据进行一屏展示（设定一屏能够展示n条数据）
4. 如果没有新消息的时候，则按照展示时间间隔重复上面的3来获取数据进行展示；当runArray队列中不足以展示时，则再次拷贝baseArray接续到runArray后面；
5. 当有新消息item来到时（约定每次通知一条数据），此时为了确保新消息展示的及时性，此时将item分别放到两个队列的头部，baseArray主要用于保证总消息的顺序性；runArray主要用来确保下次切屏展示时新消息的及时性。

按照上面的逻辑即可实现互动过程中消息的展示以及确保消息展示的及时性。

总结

上面就是针对这次产品开发进行的一个经验总结，文笔有限，希望能够阐明了自己的一些观点吧:)

---

拓展延伸

websocket技术基本可以实现所有及时互动类场景的交互开发，一般的多屏互动有四种互动模式：

• 单人模式：适合线上PC互联网广告和线下长期固定场所。 　　
• 双人模式：适合线上PC互联网广告、双屏移动互联网广告和线下营销。
• 多人模式：适合线下酒吧、咖啡厅、KTV等场所。 　　
• 不限人数模式：适合线下大型商场、机场、活动、庆典、年会等。

PS:大家可以微信添加订阅号“冷星学前端”，同步更新文章内容