投屏類H5應用開發分析

最近公司設計了一款基於本身產品的投屏類H5應用，可以使得用戶經過咱們的產品平臺來設計啓用用於投屏功能的H5頁面，實現留言互動等功能。總體的實現和用戶體驗都是基於前端實現來完成的，特此再次整理一下本身的設計實現思路以供你們分享。

使用場景

投屏類應用操做簡便，用戶僅須要填寫簡單信息即可實現上牆服務，進行活動現場創意互動，點燃現場情緒。特別是在幾乎人人都擁有一部智能手機的今天，投屏類應用在峯會、活動、婚禮現場等場所更是大放異彩——簡單「掃一掃」屏幕上二維碼，經過投影將本身的觀點與建議上牆，參與討論，分享觀點，大幅度提高會場互動效果與亮點呈現。

主要問題以及解決方法

1.如何使得普通用戶可以獲取本身的上牆頁面

做爲用戶，不須要複雜的設計和編碼能力，只須要幾步設置就能夠搭建起來本身的投屏應用，這樣纔可以吸引用戶的使用，下降用戶的使用成本和學習成本。

咱們的主要實現方法是使用戶經過咱們的產品平臺進行選擇性的設置將要用來投屏的頁面或者模塊，只要幾步簡單的背景、動畫的選擇便可獲取到一個投屏頁面地址，從而可以進行投屏展現。

2.如何可以及時的展示互動信息

每個參與投屏應用的人都但願本身的信息可以及時的展現在投屏上面，從而可以帶動現場活動的熱情和你們的互動氛圍。

常規的實現方案有如下兩個：

1、定時輪詢

客戶端經過設置必定的輪詢時間來定時的向服務器請求問詢是否有新的消息，從而將新內容更新到投屏上面。
這樣就會帶來一個問題：輪詢時間的設定？
輪詢時間較長的話，就會致使必定時間內的消息堆積，以及互動的及時性；
輪詢時間較短的話，又會增長請求次數，從而致使影響性能，因此這個方案是弊端較大的。

2、WebSocket通訊

WebSocket協議是基於TCP的一種新的網絡協議。它實現了瀏覽器與服務器全雙工(full-duplex)通訊——能夠通俗的解釋爲服務器主動發送信息給客戶端。

如今多數投屏互動的實現方式主要是依靠瀏覽器的WebSocket即時通訊技術，包括國外許多案例，在之前傳統的網站爲了實現這種技術基本都是前面提到的輪詢。

在 WebSocket API中，瀏覽器和服務器只須要要作一個握手的動做，而後瀏覽器和服務器之間就造成了一條快速通道，二者之間就能夠直接實時的互相傳送數據。 採用websocket技術的頁面不一樣於普通頁面，而是須要特殊的服務器環境支持。

這樣就可以實現消息互動的及時性，由服務器接收到新的互動消息以後直接經過websocket通知到客戶端，客戶端只要在接收到消息的時候進行及時的展現便可。

3.互動消息的處理

經過上面的分析能夠知道，經過websocket的鏈接創建能夠實現消息互動的及時性展現。可是總體的消息展現的處理該如何來作呢？新老消息數據的處理又該如何來融合呢？

個人處理是這樣進行的：

1. 進入頁面後獲取到當前時間的互動消息的總數據，存儲爲baseArray做爲總的消息隊列（約定按照建立時間的新舊順序排列）；
2. 拷貝上面的baseArray到runArray做爲展現的執行隊列；
3. 根據展現狀況，每次從runArray隊列的頭部選取必定數量的消息數據進行一屏展現（設定一屏可以展現n條數據）
4. 若是沒有新消息的時候，則按照展現時間間隔重複上面的3來獲取數據進行展現；當runArray隊列中不足以展現時，則再次拷貝baseArray接續到runArray後面；
5. 當有新消息item來到時（約定每次通知一條數據），此時爲了確保新消息展現的及時性，此時將item分別放到兩個隊列的頭部，baseArray主要用於保證總消息的順序性；runArray主要用來確保下次切屏展現時新消息的及時性。

按照上面的邏輯便可實現互動過程當中消息的展現以及確保消息展現的及時性。

總結

上面就是針對此次產品開發進行的一個經驗總結，文筆有限，但願可以闡明瞭本身的一些觀點吧:)

---

拓展延伸

websocket技術基本能夠實現全部及時互動類場景的交互開發，通常的多屏互動有四種互動模式：

• 單人模式：適合線上PC互聯網廣告和線下長期固定場所。 　　
• 雙人模式：適合線上PC互聯網廣告、雙屏移動互聯網廣告和線下營銷。
• 多人模式：適合線下酒吧、咖啡廳、KTV等場所。 　　
• 不限人數模式：適合線下大型商場、機場、活動、慶典、年會等。

PS:你們能夠微信添加訂閱號「冷星學前端」，同步更新文章內容