Web實時彈幕原理分析

tigerZH 發(fā)布于2019-06-27 14:56 / 3838人閱讀

摘要：官方地址支持協(xié)議用于實時通信和跨平臺的框架。如實時分析系統(tǒng)二進制流數(shù)據(jù)處理應用在線聊天室在線客服系統(tǒng)評論系統(tǒng)等。官方地址動畫效果是一款優(yōu)雅的網(wǎng)頁彈幕插件支持顯示圖片文字以及超鏈接。

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

效果圖

用途

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

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

...

原理

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

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

實時性

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

客戶端和服務器之間會一直進行連接，每隔一段時間就詢問一次。

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

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

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

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

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

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

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

Socket.IO 設計的目標是構建能夠在不同瀏覽器和移動設備上良好運行的實時應用。

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

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

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

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

啟動了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 是一款優(yōu)雅的網(wǎng)頁彈幕插件,支持顯示圖片,文字以及超鏈接。

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

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

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

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

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

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

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

Socket.IO + Workerman + jquery.barrager.js

大家可以關注微信公眾號，回復 “彈幕源碼”，即可獲取源碼。

推薦閱讀

系統(tǒng)的講解 - SSO 單點登錄

系統(tǒng)的講解 - PHP WEB 安全防御

系統(tǒng)的講解 - PHP 緩存技術

系統(tǒng)的講解 - PHP 接口簽名驗證

系統(tǒng)的講解 - PHP 浮點數(shù)高精度運算

GPU云服務器云服務器 web播放器彈幕 webrtc實時通話原理實時搜索引擎原理 web實時通訊

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/22109.html

前端基礎入門

摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發(fā)了，真的是這樣的嗎秘密花園經(jīng)典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現(xiàn)點擊按鈕復制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現(xiàn)點擊按鈕復制區(qū)域文本的功能，不需要依賴 flash。...

shinezejian 2019-08-22 13:51 評論0 收藏0
【小案例】基于色鍵技術的純客戶端實時蒙版彈幕

摘要：組件提供了一系列的操作接口以方便用戶對彈幕的相關特性進行定制。對于這種類型的圖像，我們可以使用色鍵的方式進行摳圖生成蒙版。其中，用于更新蒙版的接口為。導讀：本文內容是筆者最近實現(xiàn)的 web 端彈幕組件—— Barrage UI 的一個延伸。在閱讀本文的實例和相關代碼之前，不妨先瀏覽項目文檔，對組件的使用方式和相關接口進行了解。各位童鞋如果經(jīng)常上 B 站（bilibili.com） ...

muzhuyu 2019-08-23 14:50 評論0 收藏0
2016年云巴產(chǎn)品更新合集

摘要：實時彈幕使用云巴，直播平臺可快速實現(xiàn)視頻直播中發(fā)送彈幕打賞點贊等實時互動功能。云巴聊天室支持圖片上傳文件發(fā)送文檔評論系統(tǒng)正式上線新增搜索功能，我們會做得更好。 SDK 篇 Android SDK 更新 Release 1.6.3后臺進程相互拉起的特殊版本 Release 1.6.4增加 so 文件 Release 1.8.0支持小米、華為推送，無需注冊第三方賬號 Release 1....

CoffeX 2019-08-21 11:27 評論0 收藏0