当前位置:首页 » 网页前端 » 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!