如何進(jìn)行Web實時彈幕的原理分析

本篇文章為大家展示了如何進(jìn)行Web實時彈幕的原理分析，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

廢話不多說，首先上效果圖。

效果圖

用途

• 搞活動、年會的時候，在大屏幕上實時顯示留言、吐槽。

• 在視頻網(wǎng)站上，將大家的吐槽實時展示出來。

原理

其他原理挺簡單的，就是將大家的留言實時展示出來。

注意點：實時性、動畫效果、數(shù)據(jù)存儲。

實時性

首先我們會想到，Ajax輪循 簡單，粗暴。

客戶端和服務(wù)器之間會一直進(jìn)行連接，每隔一段時間就詢問一次。

客戶端會輪詢，判斷有沒有新消息。

這種方式連接數(shù)會很多，一個接受，一個發(fā)送。

而且每次發(fā)送請求都會有Http的Header，會很耗流量，也會消耗CPU的利用率。

所以，這個方案是不可取的。

可以通過長連接，socket.io 來實現(xiàn)。

Socket.IO 官方地址：http://socket.io/

Socket.IO 支持 WebSocket 協(xié)議、用于實時通信和跨平臺的框架。

Socket.IO 設(shè)計的目標(biāo)是構(gòu)建能夠在不同瀏覽器和移動設(shè)備上良好運行的實時應(yīng)用。

如實時分析系統(tǒng)、二進(jìn)制流數(shù)據(jù)處理應(yīng)用、在線聊天室、在線客服系統(tǒng)、評論系統(tǒng)、WebIM等。

目前，Socket.IO 已經(jīng)支持主流PC瀏覽器(IE、Safari、Chrome、Firefox、Opera等)。

移動平臺上的瀏覽器（iOS平臺下的Safari、Android平臺下的基于Webkit的瀏覽器等）。

Socket.IO 實現(xiàn)了實時、雙向、基于事件的通訊機(jī)制,它解決了實時的通信問題，并統(tǒng)一了服務(wù)端與客戶端的編程方式。

啟動了Socket以后，就像建立了一條客戶端與服務(wù)端的管道，兩邊可以信息互通。

利用Socket.IO 與 Workerman 結(jié)合 ，雙劍合璧。

Workerman 官方地址：http://www.workerman.net/

動畫效果

CommentCoreLibrary
http://jabbany.github.io/CommentCoreLibrary/demo/

GoEasy
http://goeasy.io/www/demo/barrage

jquery.barrager.js

Jquery.barrager.js 是一款優(yōu)雅的網(wǎng)頁彈幕插件,支持顯示圖片,文字以及超鏈接。

支持速度、高度、顏色、數(shù)量等自定義

鏈接：http://yaseng.org/jquery.barrager.js/

大家可以瀏覽上面提供的Demo，根據(jù)自己的實際需求進(jìn)行修改，優(yōu)化。

數(shù)據(jù)存儲

切記不要每次發(fā)送數(shù)據(jù)的時候?qū)崟r插入的數(shù)據(jù)庫中，可以利用異步處理。

首先將數(shù)據(jù)存儲到緩存中，異步將緩存的數(shù)據(jù)同步到數(shù)據(jù)庫中。

效果圖的實現(xiàn)方法：

Socket.IO + Workerman + jquery.barrager.js

上述內(nèi)容就是如何進(jìn)行Web實時彈幕的原理分析，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。