這篇文章給大家分享的是有關javascript如何搭建互動應用的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)長期為1000+客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為河池企業(yè)提供專業(yè)的成都網站建設、成都網站設計，河池網站改版等技術服務。擁有十載豐富建站經驗和眾多成功案例,為您定制開發(fā)。

搭建互動應用

前言

本文從前端的角度出發(fā)，簡單地介紹了搭建互動應用的一種思路，提供了在線互動、中途加入兩個場景的一種解決思路，最后簡單介紹了互動應用在實踐中的優(yōu)化方向。通過閱讀你可以了解到：

• 何為互動應用
• 一次互動過程的實現(xiàn)
• 中途加入的同步
• 互動應用的優(yōu)化方向

何為互動應用

互動，即互相作用，互相交流。互動應用提供了一種用戶互相交流的方式，互聯(lián)網用戶可通過打開應用同一頁面，通過操作頁面元素的方式互動，達到分享、交流的目的。

一個簡單的使用場景

如下圖，在一個線下課堂場景中，教師和學生通過語言、文字等媒介進行信息互動，這個過程是雙向、信息同步的。在今年疫情期間，很多學校都采用線上課堂的形式進行上課，如何使線上授課的體驗接近甚至超越線下呢？這就需要一種互動應用基于雙向、信息同步的前提，提供線上授課的功能。

舉個例子來說，老師在應用中打開一份課件，學生需要同時看到這份課件，且授課過程中針對該課件的操作，也能一一被同一課堂的學生們接收到；反過來學生也能操作該課件，并被老師和其他學生接收到。

老師通過該應用可在授課的同時，即時接收學生的反饋，甚至讓學生們參與到線上課堂的互動中。

一次互動過程的實現(xiàn)

如何達到信息同步的效果呢？信息同步，即狀態(tài)同步。在線上授課的場景中，老師操作課件，為了使學生能看到最新的課件信息，需要在當前課件的基礎上，加上老師操作課件的狀態(tài)，達到更新課件狀態(tài)的目的。

抽象來說，當前狀態(tài) + 增量狀態(tài) = 最新狀態(tài)；

另一方面，對課件的操作，需要通過網絡傳輸到其他端，這就需要將行為序列化和反序列化；

總的來說，一次完整的互動過程包含行為產生與行為序列化、行為數據傳輸、反序列化與行為同步三個過程，如下圖，A端觸發(fā)了一個行為時，經過序列化產生相應的行為數據，數據傳輸到B端后，B端經過反序列化后恢復相同的行為，完成了一次“行為——行為”的同步。

1. 行為產生與行為序列化

為了完成行為的同步，需要將行為抽象為指令數據，經過優(yōu)化處理后得到最終的數據，這個過程就是序列化的過程。

2. 行為數據傳輸

互動應用具備實時性，數據傳輸一般采用WebSocket等即時通信技術完成。

3. 反序列化與行為同步

收到數據后，對行為數據進行反序列化，再觸發(fā)應用執(zhí)行相應的行為，完成行為同步。

中途加入的同步

上面闡述了同時連線的端的互動過程，但互動應用的實際使用場景中存在用戶中途加入的情況。比如，老師上課持續(xù)一段時間后，學生才上線加入課堂。在這個場景中，需要考慮如何使用戶恢復最新的頁面狀態(tài)，從而保證后續(xù)互動的同步性。

實現(xiàn)中途加入同步的前提

為了保證恢復歷史狀態(tài)的可行性，互動應用的狀態(tài)需要被完全記錄在數據中，確保這份數據能用于恢復應用的頁面狀態(tài)

中途加入同步的過程

如下圖，A和B是同時在線互動的兩端。C端中途加入后，首先初始化頁面狀態(tài)a，然后獲取diff狀態(tài)應用到頁面中，得到狀態(tài)b；

有一點需要注意，當C端中途加入的同步期間其他兩端發(fā)生互動時，此時C端的b 狀態(tài)實際上并非頁面的最新狀態(tài)（如下圖），所以需要restoreTweenMsg這一步來完成a-c狀態(tài)期間的消息恢復，保證C端狀態(tài)與A、B相同

互動應用的優(yōu)化方向

消息輕量化

當互動應用的用戶達到較大數量級別時，數據傳輸會對服務造成很大的壓力。從前端的角度看，消息輕量化能一定程度緩解該問題。以下從壓縮、精簡、稀疏三個優(yōu)化方向完成消息輕量化

壓縮

發(fā)送端對消息進行壓縮，通過減小消息體積降低服務壓力；接收端收到后再進行解壓。

精簡

如下圖，發(fā)送端通過編譯器中間件，將指令數據進行精簡，減小消息體積；接收端通過解釋器中間件將數據恢復。

稀疏

針對密集持續(xù)、且過程態(tài)沒有副作用的指令，通過稀疏指令，減少指令數量，收到稀疏指令后進行補間運算，使其平滑

同步加速

當用戶中途加入時，在歷史數據較大情況下，同步速度可能受到影響，直接影響用戶體驗。在同步過程中，歷史數據傳輸耗時占比較大，可通過加快歷史數據傳輸來加速同步。

分片同步

當模型數據較大時，直接傳輸會出現(xiàn)丟數據的情況；采用分片方式進行數據傳輸，可保證數據的完整性，但該方案極度依賴WebSocket的發(fā)送傳輸速度

被動上傳同步

當用戶A中途加入時，將發(fā)消息向其他用戶獲取歷史數據，被請求用戶將數據上傳后，通過WebSocket將下載鏈接通知用戶A，用戶A獲取鏈接后，下載得到歷史數據。該方案相比上述方案快，但同步鏈路較長，中途加入的用戶仍然需要一定時間。

定時上傳同步

設置一個定時上傳歷史數據的端，當用戶中途加入時，直接向服務器請求數據。該方案通過縮短同步鏈路，進一步提升同步速度。該方案需要考慮數據上傳與獲取時間差引起的狀態(tài)差異，需要做狀態(tài)的恢復。

感謝各位的閱讀！關于javascript如何搭建互動應用就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

新聞名稱：javascript如何搭建互動應用
網站鏈接：http://www.chinadenli.net/article34/piidpe.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、微信公眾號、品牌網站建設、做網站、建站公司、響應式網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)