生活随笔
收集整理的這篇文章主要介紹了
用swoole实现实时弹幕网站demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
最近一直在學swoole就老想著用它做點東西，之前有接觸過個一個jquery彈幕插件，于是我便使用這個插件結合swoole做了一個彈幕網站demo。
插件github地址：https://github.com/chiruom/jquery.danmu.js
使用教程:地址里都有介紹，這里就不一一贅述了
官方提供了一個demo，前端頁面我就直接在官方demo的基礎上加上了websocket，頁面效果展示如下:
前端index.html代碼:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery.danmu.js jQuery彈幕插件</title><style>body {font-family: "Microsoft YaHei" ! important;font-color:#222;}pre {line-height: 2em;font-family: "Microsoft YaHei" ! important;}h4 {line-height: 2em;} #danmuarea {position: relative;background: #222;width:800px;height: 445px;margin-left: auto;margin-right: auto;}.center {text-align: center;}.ctr {font-size: 1em;line-height: 2em;}</style><!--官方demo里沒有jquery.min.js 這里 用的是百度的CDN公共庫--><script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="../dist/jquery.danmu.min.js"></script>
</head><body class="center">
Demo<br><br>
<!--黑背景和彈幕區-->
<div id="danmuarea"><div id="danmu" ></div>
</div>
<!--控制區-->
<div class="ctr" ><button type="button" onclick="resumer() ">彈幕開始/繼續</button> <button type="button" onclick="pauser()">彈幕暫停</button> 顯示彈幕:<input type='checkbox' checked='checked' id='ishide' value='is' onchange='changehide()'> 彈幕透明度:<input type="range" name="op" id="op" onchange="op()" value="100"> <br>當前彈幕運行時間(秒)：<span id="time"></span> 設置當前彈幕時間(秒)： <input type="text" id="set_time" max=20 /><button type="button" onclick="settime()">設置</button><br>發彈幕:<select name="color" id="color" ><option value="white">白色</option><option value="red">紅色</option><option value="green">綠色</option><option value="blue">藍色</option><option value="yellow">黃色</option></select><select name="size" id="text_size" ><option value="1">大文字</option><option value="0">小文字</option></select><select name="position" id="position" ><option value="0">滾動</option><option value="1">頂端</option><option value="2">底端</option></select><input type="textarea" id="text" max=300 /><button type="button" onclick="send()">發送</button>
</div>
<script>var wsServer = 'ws://192.168.8.131:9502';var websocket = new WebSocket(wsServer);websocket.onopen = function(evt){console.log('連接成功');$("#danmu").danmu('danmuResume');}websocket.onmessage = function(evt){console.log('接收數據:'+evt.data);var new_obj=eval('('+evt.data+')');console.log(new_obj);$('#danmu').danmu("addDanmu",new_obj);}websocket.onclose = function(evt){console.log("服務器拒絕");}websocket.onerror = function(evt,e){console.log('錯誤:'+evt.data);}//初始化$("#danmu").danmu({left:0,top:0,height:"100%",width:"100%",speed:20000,opacity:1,font_size_small:16,font_size_big:24,top_botton_danmu_time:6000});//一個定時器，監視彈幕時間并更新到頁面上function timedCount(){$("#time").text($('#danmu').data("nowTime"));t=setTimeout("timedCount()",50)}timedCount();function starter(){$('#danmu').danmu('danmuStart');}function pauser(){$('#danmu').danmu('danmuPause');}function resumer(){$('#danmu').danmu('danmuResume');}function stoper(){$('#danmu').danmu('danmuStop');}function getime(){alert($('#danmu').data("nowTime"));}function getpaused(){alert($('#danmu').data("paused"));}//發送彈幕，使用了文檔README.md第7節中推薦的方法function send(){var text = document.getElementById('text').value;var color = document.getElementById('color').value;var position = document.getElementById('position').value;var size =document.getElementById('text_size').value;var time = $('#danmu').data("nowTime")+2;var text_obj='{ "text":"'+text+'","color":"'+color+'","size":"'+size+'","position":"'+position+'","time":'+time;websocket.send(text_obj);document.getElementById('text').value='';}//調整透明度函數function op(){var op=document.getElementById('op').value;$('#danmu').danmu("setOpacity",op/100);}//調隱藏 顯示
function changehide() {var op = document.getElementById('op').value;op = op / 100;if (document.getElementById("ishide").checked) {$("#danmu").danmu("setOpacity",1)} else {$("#danmu").danmu("setOpacity",0)}}//設置彈幕時間function settime(){var t=document.getElementById("set_time").value;t=parseInt(t)$('#danmu').danmu("setTime",t);}
</script>
</body>
</html>
服務端index.php代碼:
<?php
//服務器代碼
//創建websocket 服務器
$ws = new swoole_websocket_server("0.0.0.0",9502);
// open
$ws->on('open',function($ws,$request){echo "新用戶 $request->fd 加入。\n";$GLOBALS['fd'][$request->fd]['id'] = $request->fd;//設置用戶id});
//message
$ws->on('message',function($ws,$request){//發送每一個客戶端//這里也可以遍歷$ws->connections，遍歷的元素為單個連接的fdforeach($GLOBALS['fd'] as $i){if ($request->fd == $i['id']) {$ws->push($i['id'],$request->data.',"isnew":1}');} else {$ws->push($i['id'],$request->data.'}');} }
});
//close
$ws->on('close',function($ws,$request){echo "客戶端{$request->fd} 斷開連接\n";unset($GLOBALS['fd'][$request->fd]);//清除連接倉庫
});
$ws->start();
使用時服務端執行php index.php
然后瀏覽器訪問index.html即可
我這里地址是 http://192.168.8.131/swoole-danmu/demo/index.html
當然上面的demo有一個問題，就是有新的用戶連接上或者刷新頁面的話，無法看到之前的彈幕，這一點就很容易解決了，把彈幕存儲起來就行了，官方也給了解決方案，就是在添加彈幕之前先使用ajax異步將彈幕存到數據庫中，每次刷新頁面或者有新用戶連接上打開頁面時先把數據庫里的彈幕數據用ajax異步訪問服務端取出來并添加到頁面中。
這里我就不做演示了，官方文檔以及demo里都有詳細介紹
總結
以上是生活随笔為你收集整理的用swoole实现实时弹幕网站demo的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
