Web實時彈幕原理分析

廢話很少說，首先上效果圖。

效果圖

用途

• 搞活動、年會的時候，在大屏幕上實時顯示留言、吐槽。
• 在視頻網站上，將你們的吐槽實時展現出來。
• ...

原理

其餘原理挺簡單的，就是將你們的留言實時展現出來。

注意點：實時性、動畫效果、數據存儲。

實時性

首先咱們會想到，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/Comm...

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

jquery.barrager.js

Jquery.barrager.js 是一款優雅的網頁彈幕插件,支持顯示圖片,文字以及超連接。

支持速度、高度、顏色、數量等自定義

連接：http://yaseng.org/jquery.barr...

你們能夠瀏覽上面提供的Demo，根據本身的實際需求進行修改，優化。

數據存儲

切記不要每次發送數據的時候實時插入的數據庫中，能夠利用異步處理。

首先將數據存儲到緩存中，異步將緩存的數據同步到數據庫中。

效果圖的實現方法：

Socket.IO + Workerman + jquery.barrager.js

你們能夠關注微信公衆號，回覆 「彈幕源碼」，便可獲取源碼。

推薦閱讀

• 系統的講解 - SSO 單點登陸
• 系統的講解 - PHP WEB 安全防護
• 系統的講解 - PHP 緩存技術
• 系統的講解 - PHP 接口簽名驗證
• 系統的講解 - PHP 浮點數高精度運算