用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，遍历的元素为单个连接的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相关推荐

【PHP】五分钟教你编写一个实时弹幕网站
由于博主是个忠实的英雄联盟粉丝,所以经常观看一些明星大神的直播.而一谈到直播,肯定会看到满屏幕飘来飘去的弹幕.那么问题来了,这些视频弹幕网站如何做到实时同步的?PHP如何开发一个类似的网站? 首先要搞 ...
利用python爬取某直播网站实时弹幕并分析
这里写自定义目录标题技术选择以及思路分析好久没来这个破站更新了,看着充斥着各种CV操作的csdn,质量已经越来越差,但作为在这获得过帮助的人,理应也做几个原创帮点小忙.之前刚好有说要一个弹幕机器 ...
BILIBILI 高并发实时弹幕系统那些事（项目开源、架构演变）
原文地址:http://blog.csdn.net/hxqneuq2012/article/details/52813937 B 站建立开源工作组:ijkplayer 等多个项目开源 SegmentF ...
pythongui界面实现爬取b站弹幕_Python爬虫自动化爬取b站实时弹幕实例方法
免费资源网,https://freexyz.cn/ 最近央视新闻记者王冰冰以清除可爱和专业的新闻业务水平深受众多网友喜爱,b站也有很多up主剪辑了关于王冰冰的视频.我们都是知道b站是一个弹幕网站,那你 ...
闲聊弹幕网站背后的用户需求和心理动机
闲聊弹幕网站背后的用户需求和心理动机(转) "(dan)幕"一词源于射击游戏,指密集的子弹像幕布一样."弹幕"网站也源于此,指网友可以边看视频时边发表评论,这种 ...
python接收弹幕_Python爬虫自动化爬取b站实时弹幕实例方法
最近央视新闻记者王冰冰以清除可爱和专业的新闻业务水平深受众多网友喜爱,b站也有很多up主剪辑了关于王冰冰的视频.我们都是知道b站是一个弹幕网站,那你知道如何爬取b站实时弹幕吗?本文以王冰冰视频弹幕为例 ...
开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo项目分析
开源框架完美组合之Spring.NET + NHibernate + ASP.NET MVC + jQuery + easyUI 中英文双语言小型企业网站Demo,这个是一个在网上流传比较多的Spri ...
华为云部署html网页,手把手教你如何在华为云服务器上部署一个自己的弹幕网站！...
开发思路首先是让弹幕的随机高度出现,这个计算方法是:最大高度=屏幕的高度-发送div的高度-弹幕本身的高度,范围就是 0-最大高度了,弹幕总是从右往左移动,所以出现最右侧的位置计算方法是:最右侧位置 ...
b站实时弹幕和历史弹幕 Protobuf 格式解析
参考: https://zhuanlan.zhihu.com/p/392931611 https://gitee.com/nbody1996/bilibili-API-collect/blob/mas ...

用swoole实现实时弹幕网站demo

用swoole实现实时弹幕网站demo相关推荐

最新文章

热门文章