在知乎上無意中看到了一篇有關這個的話題https://zhuanlan.zhihu.com/p/23992890，剛好沒事也好久沒弄swoole了就自己按照知乎上的那篇文站實操了一下
那個試驗中有幾個點需要注意一下：
1.首先得安裝php的swoole擴展
pecl install swoole
用php -m檢查擴展是否安好
2.jquery包和彈幕所需要的包最好用他那個dist中的文件，不然的話有可能頁面js會報錯
3. liunx發行版安裝php5.3+並且編譯swoole擴展，在php.ini中加入extension=swoole.so之后打開命令行，cd到server.php所在目錄，修改文件中的監聽IP和端口，使用php server.php即開啟服務端。 然后客戶端html中修改websocket連接的服務端IP和端口，打開頁面即可開始體驗該實時彈幕系統。
4.index.html中的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="jquery.danmu.min.js"></script>
<style type="text/css">
#danmu {
width: 40px;
height: 360px;
background-color: gray;
}
#send_box {
position: absolute;
top: 500px;
left: 100px;
}
</style>
</head>
<body>
<script type="text/javascript">
console.log('嘗試websocket和swoole的配合');
var ws = new WebSocket("ws://192.168.131.51:9502");//一定要以ws://開頭 ，端口是否可用(試驗中可以直接關閉防火牆centos7用 systemctl stop firewalld.service ；7以下的用service iptables stop )
ws.onopen = function () {
console.log("握手成功");
ws.send('hello world!!!');//向php服務器發送數據
};
ws.onmessage = function (e) {
console.log("message:" + e.data);
var time = $('#danmu').data("nowtime") + 1;
var text_obj = '{ "text":"' + e.data + '" , "color":"red" ,"size":"1","position":"0","time":"' + time + '" ,"isnew":" "}'; //構造加上了innew屬性的字符串danmu對象
console.log(text_obj);
var new_obj = eval('(' + text_obj + ')'); //轉化為js對象
$('#danmu').danmu("add_danmu", new_obj); //向插件中添加該danmu對象
};
ws.onerror = function () {
console.log("error");
};
$(document).ready(function () {
$("#danmu").danmu({
left: 100, //區域的起始位置x坐標
top: 100, //區域的起始位置y坐標
height: 360, //區域的高度
width: 640, //區域的寬度
zindex: 100, //div的css樣式zindex
speed: 20000, //彈幕速度，飛過區域的毫秒數
sumtime: 50000, //彈幕運行總時間
danmuss: {}, //danmuss對象，運行時的彈幕內容
default_font_color: "#FF0000", //彈幕默認字體顏色
font_size_small: 16, //小號彈幕的字體大小,注意此屬性值只能是整數
font_size_big: 24, //大號彈幕的字體大小
opacity: "0.9", //彈幕默認透明度
top_botton_danmu_time: 6000 //頂端底端彈幕持續時間
});
$('#danmu').danmu('danmu_start');
});
function send() {
console.log(document.getElementById('content').value);
ws.send(document.getElementById('content').value); //將input輸入框中的文字發送給后端服務器，讓后端服務器廣播之
}
</script>
<div id="danmu"></div>
<div id="send_box">
<input id="content" type="text">
<input type="submit" onclick="send()">
</div>
</body>
</html>
5.server.php中的代碼如下
<?php
$server = new swoole_websocket_server("0.0.0.0", 9502);//0.0.0.0表示廣播消息； 9502是剛才前端頁面中定好的通信端口
$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();
后端中的輸出效果
前端控制台的效果
前端彈幕頁面的效果（開多個窗口都會有接受，因為剛才后端設置的是廣播的形式啊）
友情鏈接：