廢話不多說，首先上效果圖。
效果圖
用途
- 搞活動、年會的時候，在大屏幕上實時顯示留言、吐槽。
- 在視頻網站上，將大家的吐槽實時展示出來。
- ...
原理
其他原理挺簡單的，就是將大家的留言實時展示出來。
注意點：實時性、動畫效果、數據存儲。
實時性
首先我們會想到，Ajax輪循 簡單，粗暴。
客戶端和服務器之間會一直進行連接，每隔一段時間就詢問一次。
客戶端會輪詢，判斷有沒有新消息。
這種方式連接數會很多，一個接受，一個發送。
而且每次發送請求都會有Http的Header，會很耗流量，也會消耗CPU的利用率。
所以，這個方案是不可取的。
可以通過長連接，socket.io 來實現。
Socket.IO 官方地址：http://socket.io/
Socket.IO 支持 WebSocket 協議、用于實時通信和跨平臺的框架。
Socket.IO 設計的目標是構建能夠在不同瀏覽器和移動設備上良好運行的實時應用。
如實時分析系統、二進制流數據處理應用、在線聊天室、在線客服系統、評論系統、WebIM等。
目前，Socket.IO 已經支持主流PC瀏覽器(IE、Safari、Chrome、Firefox、Opera等)。
移動平臺上的瀏覽器（iOS平臺下的Safari、Android平臺下的基于Webkit的瀏覽器等）。
Socket.IO 實現了實時、雙向、基于事件的通訊機制,它解決了實時的通信問題，并統一了服務端與客戶端的編程方式。
啟動了Socket以后，就像建立了一條客戶端與服務端的管道，兩邊可以信息互通。
利用Socket.IO 與 Workerman 結合 ，雙劍合璧。
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 是一款優雅的網頁彈幕插件,支持顯示圖片,文字以及超鏈接。
支持速度、高度、顏色、數量等自定義
鏈接：http://yaseng.org/jquery.barrager.js/
大家可以瀏覽上面提供的Demo，根據自己的實際需求進行修改，優化。
數據存儲
切記不要每次發送數據的時候實時插入的數據庫中，可以利用異步處理。
首先將數據存儲到緩存中，異步將緩存的數據同步到數據庫中。
效果圖的實現方法：
Socket.IO + Workerman + jquery.barrager.js
大家可以關注微信公眾號，回復 “彈幕源碼”，即可獲取源碼。
微信名稱：IT小圈兒，微信號：ToFeelings，歡迎一起學習。
Thanks ~
