最近公司設計了一款基于自己產品的投屏類H5應用，能夠使得用戶通過我們的產品平臺來設計啟用用于投屏功能的H5頁面，實現留言互動等功能。整體的實現和用戶體驗都是基于前端實現來完成的，特此再次整理一下自己的設計實現思路以供大家分享。

使用場景

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

主要問題以及解決方法

1.如何使得普通用戶能夠獲取自己的上墻頁面

作為用戶，不需要復雜的設計和編碼能力，只需要幾步設置就可以搭建起來自己的投屏應用，這樣才能夠吸引用戶的使用，降低用戶的使用成本和學習成本。

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

2.如何能夠及時的展現互動信息

每一個參與投屏應用的人都希望自己的信息能夠及時的展示在投屏上面，從而能夠帶動現場活動的熱情和大家的互動氛圍。

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

一、定時輪詢

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

二、WebSocket通信

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

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

在 WebSocket API中，瀏覽器和服務器只需要要做一個握手的動作，然后瀏覽器和服務器之間就形成了一條快速通道，兩者之間就可以直接實時的互相傳送數據。 采用websocket技術的頁面不同于普通頁面，而是需要特殊的服務器環境支持。

這樣就能夠實現消息互動的及時性，由服務器接收到新的互動消息之后直接通過websocket通知到客戶端，客戶端只要在接收到消息的時候進行及時的展示即可。

3.互動消息的處理

通過上面的分析可以知道，通過websocket的連接建立可以實現消息互動的及時性展示。但是整體的消息展示的處理該如何來做呢？新老消息數據的處理又該如何來融合呢？

我的處理是這樣進行的：

進入頁面后獲取到當前時間的互動消息的總數據，存儲為baseArray作為總的消息隊列（約定按照創建時間的新舊順序排列）；

拷貝上面的baseArray到runArray作為展示的執行隊列；

根據展示情況，每次從runArray隊列的頭部選取一定數量的消息數據進行一屏展示（設定一屏能夠展示n條數據）

如果沒有新消息的時候，則按照展示時間間隔重復上面的3來獲取數據進行展示；當runArray隊列中不足以展示時，則再次拷貝baseArray接續到runArray后面；

當有新消息item來到時（約定每次通知一條數據），此時為了確保新消息展示的及時性，此時將item分別放到兩個隊列的頭部，baseArray主要用于保證總消息的順序性；runArray主要用來確保下次切屏展示時新消息的及時性。

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

總結

上面就是針對這次產品開發進行的一個經驗總結，文筆有限，希望能夠闡明了自己的一些觀點吧:)

---

拓展延伸

websocket技術基本可以實現所有及時互動類場景的交互開發，一般的多屏互動有四種互動模式：

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

PS:大家可以微信添加訂閱號“冷星學前端”，同步更新文章內容

總結

以上是生活随笔為你收集整理的投屏类H5应用开发分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。