摘要：最近公司设计了一款基于自己产品的投屏类应用，能够使得用户通过我们的产品平台来设计启用用于投屏功能的页面，实现留言互动等功能。使用场景投屏类应用操作简便，用户仅需要填写简单信息便可实现上墙服务，进行活动现场创意互动，点燃现场情绪。
最近公司设计了一款基于自己产品的投屏类H5应用，能够使得用户通过我们的产品平台来设计启用用于投屏功能的H5页面，实现留言互动等功能。整体的实现和用户体验都是基于前端实现来完成的，特此再次整理一下自己的设计实现思路以供大家分享。使用场景
投屏类应用操作简便，用户仅需要填写简单信息便可实现上墙服务，进行活动现场创意互动，点燃现场情绪。特别是在几乎人人都拥有一部智能手机的今天，投屏类应用在峰会、活动、婚礼现场等场所更是大放异彩——简单“扫一扫”屏幕上二维码，通过投影将自己的观点与建议上墙，参与讨论，分享观点，大幅度提升会场互动效果与亮点呈现。
主要问题以及解决方法 1.如何使得普通用户能够获取自己的上墙页面作为用户，不需要复杂的设计和编码能力，只需要几步设置就可以搭建起来自己的投屏应用，这样才能够吸引用户的使用，降低用户的使用成本和学习成本。
我们的主要实现方法是使用户通过我们的产品平台进行选择性的设置将要用来投屏的页面或者模块，只要几步简单的背景、动画的选择即可获取到一个投屏页面地址，从而能够进行投屏展示。
2.如何能够及时的展现互动信息每一个参与投屏应用的人都希望自己的信息能够及时的展示在投屏上面，从而能够带动现场活动的热情和大家的互动氛围。
常规的实现方案有以下两个：
客户端通过设置一定的轮询时间来定时的向服务器请求问询是否有新的消息，从而将新内容更新到投屏上面。
这样就会带来一个问题：轮询时间的设定？
轮询时间较长的话，就会导致一定时间内的消息堆积，以及互动的及时性；
轮询时间较短的话，又会增加请求次数，从而导致影响性能，所以这个方案是弊端较大的。
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——可以通俗的解释为服务器主动发送信息给客户端。
现在多数投屏互动的实现方式主要是依靠浏览器的WebSocket即时通信技术，包括国外许多案例，在以前传统的网站为了实现这种技术基本都是前面提到的轮询。
在 WebSocket API中，浏览器和服务器只需要要做一个握手的动作，然后浏览器和服务器之间就形成了一条快速通道，两者之间就可以直接实时的互相传送数据。 采用websocket技术的页面不同于普通页面，而是需要特殊的服务器环境支持。
这样就能够实现消息互动的及时性，由服务器接收到新的互动消息之后直接通过websocket通知到客户端，客户端只要在接收到消息的时候进行及时的展示即可。
3.互动消息的处理通过上面的分析可以知道，通过websocket的连接建立可以实现消息互动的及时性展示。但是整体的消息展示的处理该如何来做呢？新老消息数据的处理又该如何来融合呢？
我的处理是这样进行的：
进入页面后获取到当前时间的互动消息的总数据，存储为baseArray作为总的消息队列（约定按照创建时间的新旧顺序排列）；
拷贝上面的baseArray到runArray作为展示的执行队列；
根据展示情况，每次从runArray队列的头部选取一定数量的消息数据进行一屏展示（设定一屏能够展示n条数据）
如果没有新消息的时候，则按照展示时间间隔重复上面的3来获取数据进行展示；当runArray队列中不足以展示时，则再次拷贝baseArray接续到runArray后面；
当有新消息item来到时（约定每次通知一条数据），此时为了确保新消息展示的及时性，此时将item分别放到两个队列的头部，baseArray主要用于保证总消息的顺序性；runArray主要用来确保下次切屏展示时新消息的及时性。
按照上面的逻辑即可实现互动过程中消息的展示以及确保消息展示的及时性。
总结上面就是针对这次产品开发进行的一个经验总结，文笔有限，希望能够阐明了自己的一些观点吧:)
websocket技术基本可以实现所有及时互动类场景的交互开发，一般的多屏互动有四种互动模式：
单人模式：适合线上PC互联网广告和线下长期固定场所。
双人模式：适合线上PC互联网广告、双屏移动互联网广告和线下营销。
多人模式：适合线下酒吧、咖啡厅、KTV等场所。
不限人数模式：适合线下大型商场、机场、活动、庆典、年会等。
PS:大家可以微信添加订阅号“冷星学前端”，同步更新文章内容文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50739.html
摘要：使用移动设备查看页面时会发现，在微信浏览器中有顶部导航栏有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。移动端实践前端掘金说起，相信大家并不陌生。 Sticky Footer，完美的绝对底部 - 前端 - 掘金写在前面 做过网页开发的同学想必都遇到过这样尴尬的排版问题：在主体内容不足够多或者未完全加载出来之前，就会导致出现（图一）的这种情况，原因是因为...
QtScrcpy超赞的安卓实时投屏软件 QtScrcpy介绍眼见为实的效果环境准备主要功能介绍手机打开USB调式模式运行精简模式非精简模式运行时注意这个图 无线连接步骤（保证手机和电脑在同一个局域网）： QtScrcpy介绍 QtScrcpy可以通过USB(或通过TCP/IP)连接Android设备，并进行显示和控制。不需要root权限。单个应用程序最多支持16个安卓设备同时连接。同时支持G...
摘要：虽然说无论手机配置高还是低，云电脑都是可以使用的。云主机怎么使用准备好一台云服务器，云服务器多包含的基本配置就是，内存，硬盘等基本配置。不打算买台式机了，直接买个显示器，然后购买云电脑，再用手机投屏到显示器如何？嗯，这种方式完全可以用，但是并不流畅。云电脑这种方式，小迷妹4年前就体验过了，而且是给一百多个教室分布的。怎么说呢，很有优点，但是缺点也很多。首先，云电脑目前的价格实在不亲民。云电脑...
阅读 1937·2021-11-24 09:39
阅读 3275·2021-09-22 14:58
阅读 1161·2019-08-30 15:54
阅读 3315·2019-08-29 11:33
阅读 1787·2019-08-26 13:54
阅读 1597·2019-08-26 13:35
阅读 2467·2019-08-23 18:14
阅读 761·2019-08-23 17:04
