javascript如何搭建互动应用

介绍

这篇文章给大家分享的是有关javascript如何搭建互动应用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

搭建互动应用

前言

本文从前端的角度出发,简单地介绍了搭建互动应用的一种思路,提供了在线互动,中途加入两个场景的一种解决思路,最后简单介绍了互动应用在实践中的优化方向。通过阅读你可以了解到:

    <李>何为互动应用 <李>一次互动过程的实现李 <李>中途加入的同步李 <>李互动应用的优化方向李

何为互动应用

互动,即互相作用,互相交流。互动应用提供了一种用户互相交流的方式,互联网用户可通过打开应用同一页面,通过操作页面元素的方式互动,达到分享,交流的目的。

一个简单的使用场景

如下图,在一个线下课堂场景中,教师和学生通过语言,文字等媒介进行信息互动,这个过程是双向,信息同步的。 javascript如何搭建互动应用“>在今年疫情期间,很多学校都采用线上课堂的形式进行上的课,如何使线上授课的体验接近甚至超越线下呢?这就需要一种互动应用基于双向,信息同步的前提,提供线上授课的功能。</p> <p>举个例子来说,老师在应用中打开一份课件,学生需要同时看到这份课件,且授课过程中针对该课件的操作,也能一一被同一课堂的学生们接收的到,反过来学生也能操作该课件,并被老师和其他学生接收到。</p> <p>老师通过该应用可在授课的同时,即时接收学生的反馈,甚至让学生们参与到线上课堂的互动中。</p> <h3>一次互动过程的实现</h3> <p>如何达到信息同步的效果呢?信息同步,即状态同步。在线上授课的场景中,老师操作课件,为了使学生能看到最新的课件信息,需要在当前课件的基础上,加上老师操作课件的状态,达到更新课件状态的目的。</p> <p>抽象来说,<强>当前状态+增量状态=最新状态</强>,</p> <p>另一方面,对课件的操作,需要通过网络传输到其他端,这就需要将<强>行为序列化和反序列化</强>,</p> <p>总的来说,一次完整的互动过程包含行为产生与行为序列化,行为数据传输,反序列化与行为同步三个过程,如下图,一个端触发了一个行为时,经过序列化产生相应的行为数据,数据传输到B端后,B端经过反序列化后恢复相同的行为,完成了一次“行为,行为”的同步。</p> <p> <img src=

中途加入的同步

上面阐述了同时连线的端的互动过程,但互动应用的实际使用场景中存在用户中途加入的情况。比如,老师上课持续一段时间后,学生才上线加入课堂。在这个场景中,需要考虑如何使用户恢复最新的页面状态,从而保证后续互动的同步性。

实现中途加入同步的前提

为了保证恢复历史状态的可行性,互动应用的状态需要被完全记录在数据中,确保这份数据能用于恢复应用的页面状态

中途加入同步的过程

如下图,A和B是同时在线互动的两端。C端中途加入后,首先初始化页面状态a,然后获取diff状态应用到页面中,得到状态b;

有一点需要注意,当C端中途加入的同步期间其他两端发生互动时,此时C端的b 状态实际上并非页面的最新状态(如下图),所以需要restoreTweenMsg这一步来完成a-c状态期间的消息恢复,保证C端状态与A、B相同javascript如何搭建互动应用

互动应用的优化方向

消息轻量化

当互动应用的用户达到较大数量级别时,数据传输会对服务造成很大的压力。从前端的角度看,消息轻量化能一定程度缓解该问题。以下从压缩、精简、稀疏三个优化方向完成消息轻量化

javascript如何搭建互动应用