廢話不多說，首先上效果圖。
效果圖
用途
- 搞活動、年會的時候，在大螢幕上實時顯示留言、吐槽。
- 在視訊網站上，將大家的吐槽實時展示出來。
- ...
原理
其他原理挺簡單的，就是將大家的留言實時展示出來。
注意點：實時性、動畫效果、資料儲存。
實時性
首先我們會想到，Ajax輪循 簡單，粗暴。
客戶端和伺服器之間會一直進行連線，每隔一段時間就詢問一次。
客戶端會輪詢，判斷有沒有新訊息。
這種方式連線數會很多，一個接受，一個傳送。
而且每次傳送請求都會有Http的Header，會很耗流量，也會消耗CPU的利用率。
所以，這個方案是不可取的。
可以通過長連線，socket.io 來實現。
Socket.IO 官方地址：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 官方地址：www.workerman.net/
動畫效果
CommentCoreLibrary
jabbany.github.io/CommentCore…
GoEasy
goeasy.io/www/demo/ba…
jquery.barrager.js
Jquery.barrager.js 是一款優雅的網頁彈幕外掛,支援顯示圖片,文字以及超連結。
支援速度、高度、顏色、數量等自定義
大家可以瀏覽上面提供的Demo，根據自己的實際需求進行修改，優化。
資料儲存
切記不要每次傳送資料的時候實時插入的資料庫中，可以利用非同步處理。
首先將資料儲存到快取中，非同步將快取的資料同步到資料庫中。
效果圖的實現方法：
Socket.IO + Workerman + jquery.barrager.js
大家可以關注微信公眾號，回覆 “彈幕原始碼”，即可獲取原始碼。
Thanks ~
作者：PHP後端開發者
免費提供技術諮詢服務（自己懂的知識）。
QQ群：564557094。
關注微信公眾號，留言即可，看到留言後會及時回覆。
