當前位置:首頁 » 網頁前端 » web彈幕插件
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web彈幕插件

發布時間: 2023-08-23 16:08:06

❶ 如何使用 PHP 構建一個高性能的彈幕後端服務

隨著WEB2.0的流行,現在很多網站都流行使用「彈幕」這種形式來實現互動。
彈幕(barrage),中文流行詞語,原意指用大量或少量火炮提供密集炮擊。大量以字幕彈(dàn)出形式顯示的評論同時在屏幕上飄過的現象也被稱為彈幕。
作為PHPer的我們,看到現在各種網站都有酷炫的彈幕飛過,我們是不是也想給自己的網站加入彈幕功能呢?
首先彈幕的後端其實說白了和公共聊天室的後端原理十分相似,都是一個客戶端發送消息給服務端,服務端再將收到的消息廣播給其他的客戶端。對於後端來說他們幾乎沒區別,區別就在於前端
好在我們有一個前端彈幕插件,這個插件是一個jquery插件,github地址:https://github.com/chiruom/jquery.danmu.js,基本上會使用jquery語法,看看示例代碼就可以傻瓜化使用。
前端已經有了解決方案,但是後端呢?前端如何與後端通訊?用傳統的ajax輪詢嗎?不行,這樣效率太低,想想各大火爆的直播平台都是同一時間幾萬人在線,幾千人同時發彈幕,如果靠ajax輪詢一個php介面的話伺服器會吃不消的。且彈幕消息存儲方案略顯復雜,有人問為什麼要存儲呢?因為ajax使用的HTTP協議是無狀態協議,A客戶端和B客戶端之間對於伺服器來說沒有任何標志,如果伺服器要確保A客戶端和B客戶端分別在兩次請求的時候伺服器只返回這兩個客戶端沒有獲取過的彈幕消息,那麼伺服器端就必須使用一個緩存來標識某某客戶端看過哪條彈幕消息。綜上所述ajax可以實現小規模的彈幕通信方案,但是很麻煩。
好在最新的HTML5中加入了WebSocket協議,我們可以通過WebSocket這種基於HTTP協議之上的即時通信協議來替代ajax這種傳統的我問你答的老舊通信模式。而我們是PHPer,對於我們這種只懂PHP的人該如何編寫WebSocket服務端呢?好在我們又得知PHP有一個Swoole擴展,我們在PHP語言中使用它可以很方便的構建一個WebSocket服務端。
關於Swoole的介紹可以參照他的官網http://www.swoole.com/,下面引用官網對它的一段簡短的介紹。
PHP的非同步、並行、高性能網路通信引擎,使用純C語言編寫,提供了PHP語言的非同步多線程伺服器,非同步TCP/UDP網路客戶端,非同步MySQL,非同步Redis,資料庫連接池,AsyncTask,消息隊列,毫秒定時器,非同步文件讀寫,非同步DNS查詢。 Swoole內置了Http/WebSocket伺服器端/客戶端、Http2.0伺服器端。
Swoole可以廣泛應用於互聯網、移動通信、企業軟體、雲計算、網路游戲、物聯網(IOT)、車聯網、智能家居等領域。 使用PHP+Swoole作為網路通信框架,可以使企業IT研發團隊的效率大大提升,更加專注於開發創新產品。
先別被Swoole這么多的功能嚇到了。我們先關注這裡面的重點Swoole內置了Http/WebSocket伺服器端/客戶端意味著我們可以通過它構建WebSocket的服務端。看到這里我們是不是就急急忙忙去拿官網的WebSocket服務端代碼做測試呢?不,Swoole是一個PHP擴展,意味著我們還得去安裝它。是不是直接去下載so文件然後在php.ini中加入extension=swoole.so就可以了呢?還不是,我們先去看看Swoole擴展的依賴,這也是我們使用任何語言的任何外部包,外部模塊,外部擴展最先要了解的問題。
參考官網:http://wiki.swoole.com/wiki/page/7.html環境依賴
僅支持Linux,FreeBSD,MacOS,3類操作系統
Linux內核版本2.3.32以上
PHP5.3.10以上版本,包括PHP7
gcc4.4以上版本或者clang
cmake2.4+,編譯為libswoole.so作為C/C++庫時需要使用cmakePHP版本依賴
swoole僅支持PHP5.3.10或更高版本,建議使用PHP5.4+swoole不依賴php的stream、sockets、pcntl、posix、sysvmsg等擴展。PHP只需安裝最基本的擴展即可意味著我們Windows下是無法使用這個擴展了(其實可以藉助cygwin在win下使用swoole,但是考慮到我們使用swoole擴展就是為了性能,也為了熟悉以後的生產環節部署做准備,強烈推薦在linux下開發),那麼我們把開發環境轉移到Linux下進行吧。
接著還要求Linux內核版本為2.3.32以上,PHP為5.3.10以上,那麼我們就用最新的CentOS吧,這個版本的yum安裝的php直接就是PHP7最新版,根本無需考慮其他問題,當然你喜歡圖形界面,用Ubuntu也可以。其他的基本上最新的Linux發行版都是符合版本要求的。
接著我們便來安裝這個擴展,推薦使用PECL來安裝,只需要一條pecl install swoole
即可,非常方便。當然你要編譯安裝,具體步驟請參考http://wiki.swoole.com/wiki/page/6.html安裝完擴展之後在命令行下輸入
php -m
檢查,如果有swoole那麼說明安裝成功了。
接下來就正式開始我們的編碼旅程了。
開始編碼旅程之前我們先看看最基礎的效果原型是什麼樣子沒錯就是這個樣子,兩個瀏覽器之前完全獨立使用Websocket連接服務端,因此對於服務端來說這兩個瀏覽器就相當於兩個完全處在不同機器上的客戶端。
效果看完了就開始來講代碼吧。
我們先看看官網的WebSocket服務端示例代碼。
$serv = new Swoole\Websocket\Server("127.0.0.1", 9502);$serv->on('Open', function($server, $req) {echo "connection open: ".$req->fd;
});
$serv->on('Message', function($server, $frame) {echo "message: ".$frame->data;
$server->push($frame->fd, json_encode(["hello", "world"]));});
$serv->on('Close', function($server, $fd) {echo "connection close: ".$fd;
});
$serv->start();
我們看到這個代碼的第一行先是new了一個WebSocket服務端對象,並且在構造方法中的第一個參數指定了服務端監聽的IP,第二個參數指定了服務端監聽的埠。然後使用on方法為每一個事件設置了回調函數,最後一行start方法正式開始運行服務端。
這種寫法非常像Javascript裡面的非同步調用,這也是Swoole中的事件驅動非同步非阻塞特性,正因為是這種特性,每一個獨立的事件(請求)會在服務端接收到之後分別非同步處理,他們之間無需互相等待,這也是Swoole性能高的原因所在。
我們來分別剖析一下每一個事件的含義。
$serv->on('Open', function($server, $req) {echo "connection open: ".$req->fd;
});
顧名思義,Open表示打開一個新的鏈接,並且在事件觸發之後echo出連接上服務端的客戶端id,該客戶端唯一id為回調函數第二個參數中的fd欄位。這也是服務端區分客戶端的唯一id。
$serv->on('Message', function($server, $frame) {echo "message: ".$frame->data;
$server->push($frame->fd, json_encode(["hello", "world"]));});
同樣顧名思義,Message表示消息到達服務端的事件,並且在事件觸發之後echo出發送給服務端的數據,該數據為回調函數第二個參數的data欄位。另外我們還看到它調用了$server->push,這是回調函數的第一個參數中的push方法,它是一個服務端給客戶的發送數據的方法,第一個參數為要發送的客戶端id,第二個為要發送的數據,這里的含義是向發給服務端消息的那個客戶端發送["hello", "world"]這個數組(方括弧寫數組為PHP5.4的新特性,如果你是PHP5.3請使用傳統的array工廠函數生成數組)經過json序列化之後的數據。
$serv->on('Close', function($server, $fd) {echo "connection close: ".$fd;
});
最後一個事件Close更加容易理解,就是關閉事件,當然關閉的不是服務端,而是客戶端,可以理解為客戶端與服務端斷開連接的事件。回調函數中的代碼含義為echo出與服務端斷開連接的那個客戶端id。
基本的API都清楚了,下面就直接看代碼吧,短短二十行而已。
https://github.com/cw1997/danmu-demo/blob/master/server.php$server = new swoole_websocket_server("0.0.0.0", 1997);$server->on('open', function (swoole_websocket_server $server, $request) {echo "server: handshake success with fd{$request->fd}\n";//$request->fd 是客戶端id});
$server->on('message', function (swoole_websocket_server $server, $frame) {echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";//$frame->fd 是客戶端id,$frame->data是客戶端發送的數據//服務端向客戶端發送數據是用 $server->push( '客戶端id' , '內容')$data = $frame->data;
foreach($server->connections as $fd){
$server->push($fd , $data);//循環廣播
}
});
$server->on('close', function ($ser, $fd) {echo "client {$fd} closed\n";
});
$server->start();
這里最核心的廣播代碼其實還用到了一個之前沒有提到過的成員,也就是swoole_websocket_server對象的connections成員,這個成員中保存了所有已連接上該WebSocket服務端的fd,也就是客戶端id。因此我們只要在message事件中使用foreach遍歷該成員,循環將所有服務端收到的彈幕消息都發送給其他已連接上該服務端的客戶端即可。
後端講完了再講講前端吧。
前端代碼也不是很多https://github.com/cw1997/danmu-demo/blob/master/index.htmlvar ws = new WebSocket("ws://192.168.1.107:1997");ws.onopen = function(){
console.log("握手成功");
ws.send('hello world!!!');
};
ws.onmessage = function(e){
console.log("message:" + e.data);
var time = jQuery('#danmu').data("nowtime") + 1;var text_obj = '{ "text":"' + e.data + '" , "color":"green" ,"size":"1","position":"0","time":"' + time + '" ,"isnew":" "}'; //構造加上了innew屬性的字元串danmu對象console.log(text_obj);
var new_obj = eval('(' + text_obj + ')'); //轉化為js對象jQuery('#danmu').danmu("add_danmu", new_obj); //向插件中添加該danmu對象};
ws.onerror = function(){
console.log("error");
};
核心代碼都在這里,使用new WebSocket("ws://192.168.1.107:1997")創建一個WebSocket客戶端連接對象,通過該對象的各種事件進行對應的操作,和服務端是不是很像?更多代碼解釋可以參考源代碼中的注釋,這里不做更多介紹。
看到這里相信作為一名PHPer的你也可以開發出屬於自己的彈幕系統了。這里展示的只是一個最基礎最原始的彈幕平台。我們也了解到了使用PHP開發一個彈幕平台需要涉及到的技術有WebSocket,Swoole擴展,甚至碰到了很多初級開發者平時不怎麼接觸的工具,比如說PECL,比如說Linux。
其實PHP結合Swoole擴展還可以做很多事情,比如說對接各種家電,對接各種硬體介面實現在Web端實時控制家電,又比如說結合樹莓派做智能小車,通過web端進行遙控等等,各種新奇的玩法等你發現。誰說PHP只能做Web開發?PHP擁有了Swoole擴展其實能做的事情還有很多,Swoole就像他的宣傳標題一樣:重新定義PHP。

❷ B站彈幕姬有聲念彈幕怎麼弄的看到有的up主的彈幕姬有人發彈幕後會自動念出來

彈幕姬是個插件,需要下載安裝才能用。b站直播姬是一款二次元在線直播軟體,直播姬裡麵包含彈幕姬,不用再去安裝彈幕姬插件了。

b站直播姬使用方法教程:

需要先成為b站會員,才能登錄b站直播姬界面。

直播姬主界面:

左下:為各種來源添加按鈕,從左到右依次為攝像頭,游戲源,抓屏,多媒體,文本,圖片。添加來源後會在右邊場景里顯示,也可以在場景中編輯你的來源。

右上:可以查看、修改自己的直播間信息。

右下:為彈幕姬、音量、設置按鈕。

點擊"彈幕姬"按鈕可以開啟彈幕姬以及設置彈幕姬顯示與詳細參數。點擊"音量"按鈕可以調節系統和麥克風音量。最高增幅300%。

點擊"設置"按鈕可以調節視頻、音頻、推流與快捷鍵的設置。添加完來源、調整好設置之後就可開始直播啦!點擊"開始直播",LINKSTART!