制作网页弹幕服务器

这篇说说一个非常好用的弹插件jquery.danmu.js的使用心得以及前端和后台数据一个解决方案。开发到最后发现这说不定是一个好的创业项目呢!

示例

这是主站地址下的一个弹幕主题设计的封面,这样的设计简洁而内容又可以根据需要变化,现在只有我可以从后端添加弹幕,但是其实这个区域可以变成一面留言墙,所有游客都可以留言。

除此之外这个弹幕插件可以应用到视频弹幕、直播弹幕。总体来讲由于是基于<div>标签,所以可以将网页的任何部分变成弹幕区。

插件使用方法

使用方式在作者的Github repo里解释的已经十分清楚。只需要引用插件后在网页预留的弹幕区加上html代码即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript" src="js/jquery.danmu.js"></script>
<div id="danmu"></div>
<script type="text/javascript">
$("#danmu").danmu({
height:'100%',
width:'100%',
left:0,
top:5,
right:0,
danmuLoop:true,
zindex :2,
speed:10000
});
</script>

但是有几个地方值得注意:

  • position是可以调整的参数。默认为absolute,但是实际上可以根据需要在relative与absolute之间调整。
  • 弹幕速度为弹幕滚过每672像素所需要的时间,数值越大速度越慢。
  • 使用$('#danmu').data("nowTime",0);重置,使用$('#danmu').danmu("setTime",新时间);设置时间。
  • 弹幕对象实际是一个json字符串,对于json可以使用jquery函数JSON.parse(弹幕对象)来处理。
  • 弹幕计时用的是十分之秒,网页播放器往往使用的是更小的单位,同步时间需要换算。

后台数据

有了前端的插件,现在就需要一个可靠的后端数据库的支持。插件作者提到了可以用SQL,这是一个方案,优点是简单方便,缺点也有,直接和SQL通讯不安全,而且多个地址共享数据库时很不方便。 我用的解决方案是用Mongodb作为数据库,再写一个接口,用GET和POST的方式调取和写入数据。

前端可以用ajax发送请求,例如读取弹幕可以使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function(){
var Getdanmu = function() {
$.ajax({
method: "GET",
dataType: 'json',
async: false,
data: {}//相关参数,
url:""//请求地址,
success:function(data){
/*生成弹幕字符串 danmuObject*/
$("#danmu").danmu("addDanmu",danmuObject);//加载弹幕
}
}
});
};
var sync = setInterval(Getdanmu, 800);//弹幕同步
});

发送弹幕可以使用(假设使用danmu_send_btn作为发送按钮):

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
$( "#danmu_send_btn" ).click(function() {
/*生成弹幕字符串 danmuObject*/
$.ajax({
method: "POST",
dataType: 'json',
data: JSON.stringify(danmuObject),
url:""//请求地址
});
}
});
});

后台收到请求以后可以对数据、用户身份、请求来源和所用设备进行筛选,比如只接受注册用户从中国IP地址使用非移动端发送的中文弹幕等等。对于符合规定的GET请求,就可以从Mongodb里调取数据;对于合规的POST请求,就可以将弹幕写入数据库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Danmu(BaseHandler):
def get(self):
'''
1. 读取参数
2. 检查请求
3. 读取并返回数据
4. 处理错误
'''

def post(self):
'''
1. 读取参数
2. 检查请求
3. 写入数据
4. 处理错误
'''

弹幕数据服务器

就像Disqus和多说是网站评论的服务器一样,使用这种数据架构的优势就在于可以将Mongodb做成一个弹幕数据服务器。用户可以通过注册获得API Key,然后在自己的网页header部分引用这个插件,再调整参数做好自己喜欢的弹幕区,最后通过服务器通信写入和读取自己网站的弹幕数据,岂不美哉?

1
2
3
4
5
6
7
8
9
                                      ----------------
--->| 弹幕网站A |
------------------- 数据通信 | ---------------
| 弹幕网站数据库 | --------------
------------------- | ----------------
--->| 弹幕网站B |
| ----------------
|
---> 更多用户

有需求的网站就不需要自己做弹幕功能了,只要注册使用弹幕服务即可,对于商业用户还可以收个费什么的。