用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>&nbsp;&nbsp;&nbsp;&nbsp;
  <button type="button"  onclick="pauser()">弹幕暂停</button>  &nbsp;&nbsp;&nbsp;&nbsp;
  显示弹幕:<input type='checkbox' checked='checked' id='ishide' value='is' onchange='changehide()'> &nbsp;&nbsp;&nbsp;&nbsp;
  弹幕透明度:
  <input type="range" name="op" id="op" onchange="op()" value="100"> <br>
  当前弹幕运行时间(秒)：<span id="time"></span>&nbsp;&nbsp;
  设置当前弹幕时间(秒)： <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，遍历的元素为单个连接的fd
    foreach($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

猜你喜欢