資訊專欄INFORMATION COLUMN
摘要：最近公司設(shè)計了一款基于自己產(chǎn)品的投屏類應(yīng)用，能夠使得用戶通過我們的產(chǎn)品平臺來設(shè)計啟用用于投屏功能的頁面，實現(xiàn)留言互動等功能。使用場景投屏類應(yīng)用操作簡便，用戶僅需要填寫簡單信息便可實現(xiàn)上墻服務(wù)，進(jìn)行活動現(xiàn)場創(chuàng)意互動，點燃現(xiàn)場情緒。
最近公司設(shè)計了一款基于自己產(chǎn)品的投屏類H5應(yīng)用，能夠使得用戶通過我們的產(chǎn)品平臺來設(shè)計啟用用于投屏功能的H5頁面，實現(xiàn)留言互動等功能。整體的實現(xiàn)和用戶體驗都是基于前端實現(xiàn)來完成的，特此再次整理一下自己的設(shè)計實現(xiàn)思路以供大家分享。使用場景
投屏類應(yīng)用操作簡便，用戶僅需要填寫簡單信息便可實現(xiàn)上墻服務(wù)，進(jìn)行活動現(xiàn)場創(chuàng)意互動，點燃現(xiàn)場情緒。特別是在幾乎人人都擁有一部智能手機(jī)的今天，投屏類應(yīng)用在峰會、活動、婚禮現(xiàn)場等場所更是大放異彩——簡單“掃一掃”屏幕上二維碼，通過投影將自己的觀點與建議上墻，參與討論，分享觀點，大幅度提升會場互動效果與亮點呈現(xiàn)。
主要問題以及解決方法 1.如何使得普通用戶能夠獲取自己的上墻頁面作為用戶，不需要復(fù)雜的設(shè)計和編碼能力，只需要幾步設(shè)置就可以搭建起來自己的投屏應(yīng)用，這樣才能夠吸引用戶的使用，降低用戶的使用成本和學(xué)習(xí)成本。
我們的主要實現(xiàn)方法是使用戶通過我們的產(chǎn)品平臺進(jìn)行選擇性的設(shè)置將要用來投屏的頁面或者模塊，只要幾步簡單的背景、動畫的選擇即可獲取到一個投屏頁面地址，從而能夠進(jìn)行投屏展示。
2.如何能夠及時的展現(xiàn)互動信息每一個參與投屏應(yīng)用的人都希望自己的信息能夠及時的展示在投屏上面，從而能夠帶動現(xiàn)場活動的熱情和大家的互動氛圍。
常規(guī)的實現(xiàn)方案有以下兩個：
客戶端通過設(shè)置一定的輪詢時間來定時的向服務(wù)器請求問詢是否有新的消息，從而將新內(nèi)容更新到投屏上面。
這樣就會帶來一個問題：輪詢時間的設(shè)定？
輪詢時間較長的話，就會導(dǎo)致一定時間內(nèi)的消息堆積，以及互動的及時性；
輪詢時間較短的話，又會增加請求次數(shù)，從而導(dǎo)致影響性能，所以這個方案是弊端較大的。
WebSocket協(xié)議是基于TCP的一種新的網(wǎng)絡(luò)協(xié)議。它實現(xiàn)了瀏覽器與服務(wù)器全雙工(full-duplex)通信——可以通俗的解釋為服務(wù)器主動發(fā)送信息給客戶端。
現(xiàn)在多數(shù)投屏互動的實現(xiàn)方式主要是依靠瀏覽器的WebSocket即時通信技術(shù)，包括國外許多案例，在以前傳統(tǒng)的網(wǎng)站為了實現(xiàn)這種技術(shù)基本都是前面提到的輪詢。
在 WebSocket API中，瀏覽器和服務(wù)器只需要要做一個握手的動作，然后瀏覽器和服務(wù)器之間就形成了一條快速通道，兩者之間就可以直接實時的互相傳送數(shù)據(jù)。 采用websocket技術(shù)的頁面不同于普通頁面，而是需要特殊的服務(wù)器環(huán)境支持。
這樣就能夠?qū)崿F(xiàn)消息互動的及時性，由服務(wù)器接收到新的互動消息之后直接通過websocket通知到客戶端，客戶端只要在接收到消息的時候進(jìn)行及時的展示即可。
3.互動消息的處理通過上面的分析可以知道，通過websocket的連接建立可以實現(xiàn)消息互動的及時性展示。但是整體的消息展示的處理該如何來做呢？新老消息數(shù)據(jù)的處理又該如何來融合呢？
我的處理是這樣進(jìn)行的：
進(jìn)入頁面后獲取到當(dāng)前時間的互動消息的總數(shù)據(jù)，存儲為baseArray作為總的消息隊列（約定按照創(chuàng)建時間的新舊順序排列）；
拷貝上面的baseArray到runArray作為展示的執(zhí)行隊列；
根據(jù)展示情況，每次從runArray隊列的頭部選取一定數(shù)量的消息數(shù)據(jù)進(jìn)行一屏展示（設(shè)定一屏能夠展示n條數(shù)據(jù)）
如果沒有新消息的時候，則按照展示時間間隔重復(fù)上面的3來獲取數(shù)據(jù)進(jìn)行展示；當(dāng)runArray隊列中不足以展示時，則再次拷貝baseArray接續(xù)到runArray后面；
當(dāng)有新消息item來到時（約定每次通知一條數(shù)據(jù)），此時為了確保新消息展示的及時性，此時將item分別放到兩個隊列的頭部，baseArray主要用于保證總消息的順序性；runArray主要用來確保下次切屏展示時新消息的及時性。
按照上面的邏輯即可實現(xiàn)互動過程中消息的展示以及確保消息展示的及時性。
總結(jié)上面就是針對這次產(chǎn)品開發(fā)進(jìn)行的一個經(jīng)驗總結(jié)，文筆有限，希望能夠闡明了自己的一些觀點吧:)
websocket技術(shù)基本可以實現(xiàn)所有及時互動類場景的交互開發(fā)，一般的多屏互動有四種互動模式：
單人模式：適合線上PC互聯(lián)網(wǎng)廣告和線下長期固定場所。
雙人模式：適合線上PC互聯(lián)網(wǎng)廣告、雙屏移動互聯(lián)網(wǎng)廣告和線下營銷。
多人模式：適合線下酒吧、咖啡廳、KTV等場所。
不限人數(shù)模式：適合線下大型商場、機(jī)場、活動、慶典、年會等。
PS:大家可以微信添加訂閱號“冷星學(xué)前端”，同步更新文章內(nèi)容文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50739.html
摘要：使用移動設(shè)備查看頁面時會發(fā)現(xiàn)，在微信瀏覽器中有頂部導(dǎo)航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面 做過網(wǎng)頁開發(fā)的同學(xué)想必都遇到過這樣尷尬的排版問題：在主體內(nèi)容不足夠多或者未完全加載出來之前，就會導(dǎo)致出現(xiàn)（圖一）的這種情況，原因是因為...
QtScrcpy超贊的安卓實時投屏軟件 QtScrcpy介紹眼見為實的效果環(huán)境準(zhǔn)備主要功能介紹手機(jī)打開USB調(diào)式模式運行精簡模式非精簡模式運行時注意這個圖 無線連接步驟（保證手機(jī)和電腦在同一個局域網(wǎng)）： QtScrcpy介紹 QtScrcpy可以通過USB(或通過TCP/IP)連接Android設(shè)備，并進(jìn)行顯示和控制。不需要root權(quán)限。單個應(yīng)用程序最多支持16個安卓設(shè)備同時連接。同時支持G...
摘要：雖然說無論手機(jī)配置高還是低，云電腦都是可以使用的。云主機(jī)怎么使用準(zhǔn)備好一臺云服務(wù)器，云服務(wù)器多包含的基本配置就是，內(nèi)存，硬盤等基本配置。不打算買臺式機(jī)了，直接買個顯示器，然后購買云電腦，再用手機(jī)投屏到顯示器如何？嗯，這種方式完全可以用，但是并不流暢。云電腦這種方式，小迷妹4年前就體驗過了，而且是給一百多個教室分布的。怎么說呢，很有優(yōu)點，但是缺點也很多。首先，云電腦目前的價格實在不親民。云電腦...
閱讀 1947·2021-11-24 09:39
閱讀 3320·2021-09-22 14:58
閱讀 1178·2019-08-30 15:54
閱讀 3331·2019-08-29 11:33
閱讀 1800·2019-08-26 13:54
閱讀 1609·2019-08-26 13:35
閱讀 2479·2019-08-23 18:14
閱讀 776·2019-08-23 17:04
