前言
弹幕(barrage),中文流行词语,指的是在网络上观看视频时弹出的评论性字幕。类似小说中行间彰显的夹批,视频中屏间飘过的评点叫做弹幕,原意指用大量或少量火炮提供密集炮击。而弹幕,顾名思义是指子弹多而形成的幕布,大量吐槽评论从屏幕飘过时效果看上去像是飞行射击游戏里的弹幕。
很久以前,弹幕还只是出现在视频中,边看视频边吐槽,成为不少人的习惯。
后来,弹幕出现的地方就越来越多了。酒吧、企业年会、行业峰会、校园晚会等等场景,凡是有大屏幕的地方,基本上弹幕都能派上用场。不得不说,在很多场景下,弹幕是一大神器。
那么,作为一个前端,如何手撸一个弹幕工具呢?
需求分析
首先,来分析一下需求:
- 为了提高用户的参与度,应该尽量减少用户的使用成本,无需下载APP,无需注册账号,扫码即用。
- 使用弹幕的时候,有可能是正在播放视频、放映PPT等。所以我们的弹幕应该是透明的叠加层,可以叠加在任何背景元素之上,而且鼠标还能操作弹幕层下面的控件。
- 播放视频或PPT的电脑,最常见的,有可能是Windows或者Mac,所以我们要适配多平台。
以上,应该是这个弹幕工具最基本的需求了。
技术选型
从以上的需求可以看出,我们大概需要三个端的开发:
- 发送端:扫码即用,运行在用户的手机上,小程序成为一个不错的选择。
- 接收端:运行在PC上,当前热门的Electron可以使用前端技术构建跨平台的桌面应用。
- 服务端:发送端和接收端之间,应该有一个服务端进行数据的处理。那么,nodejs也就可以派上用场了。
很明显,一个前端就可以完成以上所有开发。
总体架构图
简单的websocket服务端搭建
我们可以通过ws模块快速的搭建一个websocket服务。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('something');
});
复制代码
以上只是最简单的websocket服务示例,大家可以去详细看看ws模块文档。接下来会有专门一篇博客讲解服务端。
其他
微信要求我们所有的API,域名都是经过备案的,而且协议必须是HTTPS或者WSS。如果我们的产品需要最终上线到线上环境,就需要申请域名、域名备案以及申请SSL证书。
FreeSSL.org是一个提供免费HTTPS证书申请的网站,可能你用得上。
有了域名、证书之后,讲道理,你需要进行nginx的配置,让指定的域名支持wss协议。比如,我们的服务运行在8080端口,而我们的访问域名是wss://danmu.xxx.com ,那么,nginx配置应该如下:
server {
listen 443;
server_name danmu.xxx.com;
ssl on;
#ssl证书文件存放位置
ssl_certificate /ssl_cert/danmu.xxx.com.pem;
ssl_certificate_key /ssl_cert/danmu.xxx.com.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:8080/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
复制代码
详情可查看官网文档
总结
本文大概梳理了我们要做的弹幕是什么样的产品形态,进行了初步的技术选型,同时对上线需要做的一些准备工作进行了预告。
接下来,会专门的文章对每个端的开发进行详细讲解,有兴趣的可以关注我们,我们将会持续更新。
以上,如有错漏,欢迎指正!
@Author: TDGarden