資訊專欄INFORMATION COLUMN
摘要：最近公司設計了一款基于自己產品的投屏類應用，能夠使得用戶通過我們的產品平臺來設計啟用用于投屏功能的頁面，實現留言互動等功能。使用場景投屏類應用操作簡便，用戶僅需要填寫簡單信息便可實現上墻服務，進行活動現場創意互動，點燃現場情緒。
最近公司設計了一款基于自己產品的投屏類H5應用，能夠使得用戶通過我們的產品平臺來設計啟用用于投屏功能的H5頁面，實現留言互動等功能。整體的實現和用戶體驗都是基于前端實現來完成的，特此再次整理一下自己的設計實現思路以供大家分享。使用場景
投屏類應用操作簡便，用戶僅需要填寫簡單信息便可實現上墻服務，進行活動現場創意互動，點燃現場情緒。特別是在幾乎人人都擁有一部智能手機的今天，投屏類應用在峰會、活動、婚禮現場等場所更是大放異彩——簡單“掃一掃”屏幕上二維碼，通過投影將自己的觀點與建議上墻，參與討論，分享觀點，大幅度提升會場互動效果與亮點呈現。
主要問題以及解決方法 1.如何使得普通用戶能夠獲取自己的上墻頁面作為用戶，不需要復雜的設計和編碼能力，只需要幾步設置就可以搭建起來自己的投屏應用，這樣才能夠吸引用戶的使用，降低用戶的使用成本和學習成本。
我們的主要實現方法是使用戶通過我們的產品平臺進行選擇性的設置將要用來投屏的頁面或者模塊，只要幾步簡單的背景、動畫的選擇即可獲取到一個投屏頁面地址，從而能夠進行投屏展示。
2.如何能夠及時的展現互動信息每一個參與投屏應用的人都希望自己的信息能夠及時的展示在投屏上面，從而能夠帶動現場活動的熱情和大家的互動氛圍。
常規的實現方案有以下兩個：
客戶端通過設置一定的輪詢時間來定時的向服務器請求問詢是否有新的消息，從而將新內容更新到投屏上面。
這樣就會帶來一個問題：輪詢時間的設定？
輪詢時間較長的話，就會導致一定時間內的消息堆積，以及互動的及時性；
輪詢時間較短的話，又會增加請求次數，從而導致影響性能，所以這個方案是弊端較大的。
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:大家可以微信添加訂閱號“冷星學前端”，同步更新文章內容文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50739.html
摘要：使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部導航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面 做過網頁開發的同學想必都遇到過這樣尷尬的排版問題：在主體內容不足夠多或者未完全加載出來之前，就會導致出現（圖一）的這種情況，原因是因為...
QtScrcpy超贊的安卓實時投屏軟件 QtScrcpy介紹眼見為實的效果環境準備主要功能介紹手機打開USB調式模式運行精簡模式非精簡模式運行時注意這個圖 無線連接步驟（保證手機和電腦在同一個局域網）： QtScrcpy介紹 QtScrcpy可以通過USB(或通過TCP/IP)連接Android設備，并進行顯示和控制。不需要root權限。單個應用程序最多支持16個安卓設備同時連接。同時支持G...
摘要：雖然說無論手機配置高還是低，云電腦都是可以使用的。云主機怎么使用準備好一臺云服務器，云服務器多包含的基本配置就是，內存，硬盤等基本配置。不打算買臺式機了，直接買個顯示器，然后購買云電腦，再用手機投屏到顯示器如何？嗯，這種方式完全可以用，但是并不流暢。云電腦這種方式，小迷妹4年前就體驗過了，而且是給一百多個教室分布的。怎么說呢，很有優點，但是缺點也很多。首先，云電腦目前的價格實在不親民。云電腦...
閱讀 1937·2021-11-24 09:39
閱讀 3276·2021-09-22 14:58
閱讀 1161·2019-08-30 15:54
閱讀 3315·2019-08-29 11:33
閱讀 1787·2019-08-26 13:54
閱讀 1597·2019-08-26 13:35
閱讀 2467·2019-08-23 18:14
閱讀 761·2019-08-23 17:04
