廢話不多說袱饭，首先上效果圖川无。
效果圖
用途
- 搞活動(dòng)、年會(huì)的時(shí)候虑乖，在大屏幕上實(shí)時(shí)顯示留言懦趋、吐槽。
- 在視頻網(wǎng)站上决左，將大家的吐槽實(shí)時(shí)展示出來愕够。
- ...
原理
其他原理挺簡(jiǎn)單的走贪，就是將大家的留言實(shí)時(shí)展示出來佛猛。
注意點(diǎn)：實(shí)時(shí)性、動(dòng)畫效果坠狡、數(shù)據(jù)存儲(chǔ)继找。
實(shí)時(shí)性
首先我們會(huì)想到，Ajax輪循 簡(jiǎn)單逃沿，粗暴婴渡。
客戶端和服務(wù)器之間會(huì)一直進(jìn)行連接，每隔一段時(shí)間就詢問一次凯亮。
客戶端會(huì)輪詢边臼，判斷有沒有新消息。
這種方式連接數(shù)會(huì)很多假消，一個(gè)接受柠并，一個(gè)發(fā)送。
而且每次發(fā)送請(qǐng)求都會(huì)有Http的Header富拗，會(huì)很耗流量臼予，也會(huì)消耗CPU的利用率。
所以啃沪，這個(gè)方案是不可取的粘拾。
可以通過長(zhǎng)連接，socket.io 來實(shí)現(xiàn)创千。
Socket.IO 官方地址：http://socket.io/
Socket.IO 支持 WebSocket 協(xié)議缰雇、用于實(shí)時(shí)通信和跨平臺(tái)的框架。
Socket.IO 設(shè)計(jì)的目標(biāo)是構(gòu)建能夠在不同瀏覽器和移動(dòng)設(shè)備上良好運(yùn)行的實(shí)時(shí)應(yīng)用追驴。
如實(shí)時(shí)分析系統(tǒng)寓涨、二進(jìn)制流數(shù)據(jù)處理應(yīng)用、在線聊天室氯檐、在線客服系統(tǒng)戒良、評(píng)論系統(tǒng)、WebIM等冠摄。
目前糯崎，Socket.IO 已經(jīng)支持主流PC瀏覽器(IE几缭、Safari、Chrome沃呢、Firefox年栓、Opera等)。
移動(dòng)平臺(tái)上的瀏覽器（iOS平臺(tái)下的Safari薄霜、Android平臺(tái)下的基于Webkit的瀏覽器等）。
Socket.IO 實(shí)現(xiàn)了實(shí)時(shí)惰瓜、雙向、基于事件的通訊機(jī)制,它解決了實(shí)時(shí)的通信問題备禀，并統(tǒng)一了服務(wù)端與客戶端的編程方式。
啟動(dòng)了Socket以后奈揍，就像建立了一條客戶端與服務(wù)端的管道曲尸，兩邊可以信息互通。
利用Socket.IO 與 Workerman 結(jié)合 另患，雙劍合璧。
Workerman 官方地址：http://www.workerman.net/
動(dòng)畫效果
CommentCoreLibrary
http://jabbany.github.io/CommentCoreLibrary/demo/
GoEasy
http://goeasy.io/www/demo/barrage
jquery.barrager.js
Jquery.barrager.js 是一款優(yōu)雅的網(wǎng)頁(yè)彈幕插件,支持顯示圖片,文字以及超鏈接昆箕。
支持速度、高度秘通、顏色为严、數(shù)量等自定義
鏈接：http://yaseng.org/jquery.barrager.js/
大家可以瀏覽上面提供的Demo，根據(jù)自己的實(shí)際需求進(jìn)行修改肺稀，優(yōu)化。
數(shù)據(jù)存儲(chǔ)
切記不要每次發(fā)送數(shù)據(jù)的時(shí)候?qū)崟r(shí)插入的數(shù)據(jù)庫(kù)中话原，可以利用異步處理。
首先將數(shù)據(jù)存儲(chǔ)到緩存中涉馅，異步將緩存的數(shù)據(jù)同步到數(shù)據(jù)庫(kù)中黄虱。
效果圖的實(shí)現(xiàn)方法：
Socket.IO + Workerman + jquery.barrager.js
大家可以關(guān)注微信公眾號(hào)稚矿，回復(fù) “彈幕源碼”，即可獲取源碼晤揣。
微信名稱：IT小圈兒，微信號(hào)：ToFeelings钠四，歡迎一起學(xué)習(xí)跪楞。
Thanks ~
