介绍
这篇文章给大家分享的是有关javascript如何搭建互动应用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
搭建互动应用
前言
本文从前端的角度出发,简单地介绍了搭建互动应用的一种思路,提供了在线互动,中途加入两个场景的一种解决思路,最后简单介绍了互动应用在实践中的优化方向。通过阅读你可以了解到:
- <李>何为互动应用李> <李>一次互动过程的实现李> <李>中途加入的同步李> <>李互动应用的优化方向李>
何为互动应用
互动,即互相作用,互相交流。互动应用提供了一种用户互相交流的方式,互联网用户可通过打开应用同一页面,通过操作页面元素的方式互动,达到分享,交流的目的。
一个简单的使用场景
如下图,在一个线下课堂场景中,教师和学生通过语言,文字等媒介进行信息互动,这个过程是双向,信息同步的。
中途加入的同步
上面阐述了同时连线的端的互动过程,但互动应用的实际使用场景中存在用户中途加入的情况。比如,老师上课持续一段时间后,学生才上线加入课堂。在这个场景中,需要考虑如何使用户恢复最新的页面状态,从而保证后续互动的同步性。
实现中途加入同步的前提
为了保证恢复历史状态的可行性,互动应用的状态需要被完全记录在数据中,确保这份数据能用于恢复应用的页面状态
中途加入同步的过程
如下图,A和B是同时在线互动的两端。C端中途加入后,首先初始化页面状态a,然后获取diff状态应用到页面中,得到状态b;
有一点需要注意,当C端中途加入的同步期间其他两端发生互动时,此时C端的b 状态实际上并非页面的最新状态(如下图),所以需要restoreTweenMsg这一步来完成a-c状态期间的消息恢复,保证C端状态与A、B相同
互动应用的优化方向
消息轻量化
当互动应用的用户达到较大数量级别时,数据传输会对服务造成很大的压力。从前端的角度看,消息轻量化能一定程度缓解该问题。以下从压缩、精简、稀疏三个优化方向完成消息轻量化