Today, the javascript column introduces how we build interactive applications.
Build an interactive application
Introduction
This article from the perspective of the front end, simply introduce a new idea to build interactive applications, providing online interactive, two scenes added in the middle of a solution ideas, and finally a brief introduction to optimization of interactive applications in practice direction. By reading you can learn:
What is an interactive application?
The realization of an interactive process
. Synchronization that is added midway
. The optimization direction of interactive applications
What is interactive application?
Interaction, that is, interact and communicate with each other. Interactive applications provide a way for users to communicate with each other. Internet users can open the same page of the application and interact by operating page elements to achieve the purpose of sharing and communication.
A simple usage scenario
As shown in the figure below, in an offline classroom scenario, teachers and students interact with each other through language, text and other media. This process is two-way and information synchronization.
During this year's epidemic, many schools have adopted online classes for class. How to make the experience of online teaching approach or even surpass offline? This requires an interactive application to provide online teaching functions based on the premise of two-way and information synchronization.
For example, when a teacher opens a courseware in the application, students need to see the courseware at the same time, and the operations of the courseware during the course of teaching can also be received by students in the same classroom one by one; conversely, students The courseware can also be operated and received by teachers and other students.
Through the application, teachers can receive feedback from students in real time while teaching, and even allow students to participate in online classroom interaction.
The realization of an interactive process
how to achieve the effect of information synchronization? Information synchronization, that is, state synchronization. In the online teaching scenario, the teacher operates the courseware. In order to enable students to see the latest courseware information, it is necessary to add the status of the teacher's operation of the courseware to the current courseware to achieve the purpose of updating the courseware status.
Abstractly speaking, current state + incremental state = latest state;
On the other hand, the operation of the courseware needs to be transmitted to other ends through the network, which requires serialization and deserialization of behavior;
In general, a complete interaction process includes three processes: behavior generation and behavior serialization, behavior data transmission, deserialization, and behavior synchronization. As shown in the figure below, when end A triggers a behavior, the corresponding behavior will be generated after serialization. After the data is transmitted to the B terminal, the B terminal restores the same behavior after deserialization, completing a "behavior-behavior" synchronization
-
Behavior generation and behavior serialization
In order to complete behavior synchronization, the behavior needs to be abstracted into instruction data, and the final data is obtained after optimization processing. This process is the process of serialization.
-
Behavioral data transmission
Interactive applications are of real-time nature, and data transmission is generally done using instant communication technologies such as WebSocket.
-
Deserialization and behavior synchronization After
receiving the data, the behavior data is deserialized, and then the application is triggered to execute the corresponding behavior to complete the behavior synchronization.
Synchronization of joining in midway The
above describes the interactive process of the terminals connected at the same time, but there are situations in which users join midway in the actual use scenario of interactive applications. For example, after the teacher has been in class for a period of time, the students will join the class online. In this scenario, it is necessary to consider how to restore the user to the latest page state to ensure the synchronization of subsequent interactions.
To achieve the prerequisite
for adding synchronization midway, in order to ensure the feasibility of restoring the historical state, the state of the interactive application needs to be completely recorded in the data to ensure that this data can be used to restore the page state of the application
The process of joining synchronization midway
As shown in the figure below, A and B are two ends of simultaneous online interaction. After the C end joins midway, first initialize the page state a, and then get the diff state and apply it to the page to get the state b;
One thing to note is that when the other two ends interact during the synchronization that the C side joins halfway, the b state of the C side at this time is actually not the latest state of the page (as shown below), so the restoreTweenMsg step is needed to complete the message during the ac state Restore, ensure that the state of the C terminal is the same as A and B
The optimization direction of interactive applications
Lightweight messages
When interactive applications reach a large number of users, data transmission will put a lot of pressure on services. From a front-end perspective, lightweight messages can alleviate this problem to a certain extent. The following are the three optimization directions of compression, simplification, and sparseness to complete the lightweight message
compression. The
sending end compresses the message, reducing the service pressure by reducing the message volume; the receiving end decompresses it after receiving it.
Simplification
As shown in the figure below, the sender uses the compiler middleware to streamline the instruction data to reduce the size of the message; the receiver uses the interpreter middleware to restore the data.
Sparse For
instructions that are dense and continuous and have no side effects in the process state, through sparse instructions, reduce the number of instructions, and perform tweening operations after receiving sparse instructions to make them smooth.
Synchronous acceleration
. The synchronization speed may be affected, directly affecting the user experience. During the synchronization process, historical data transmission takes a relatively long time, and the synchronization can be accelerated by speeding up the historical data transmission.
Fragmentation synchronization
When the model data is large, direct transmission will cause data loss; the
use of fragmentation for data transmission can ensure the integrity of the data, but this solution is extremely dependent on the transmission and transmission speed of WebSocket.
Passive upload synchronization
when user A When joining halfway, a message will be sent to other users to obtain historical data. After the requested user uploads the data, user A will be notified of the download link via WebSocket. After user A obtains the link, he will download the historical data. This solution is faster than the above solution, but the synchronization link is longer, and users who join midway still need some time.
Timed upload synchronization
Set up a terminal for timed uploading of historical data. When a user joins midway, directly request data from the server. This solution further improves the synchronization speed by shortening the synchronization link. This solution needs to consider the state difference caused by the time difference between data upload and acquisition, and the state needs to be restored.
Concluding remarks
The interactive application program described in this article has been explored by team members, and the shortcomings need to be pointed out.
This article comes from the javascript column of php Chinese website : https://www.php.cn/course/list/17.html