阅读 2431

基于Electron + nodejs + 小程序 实现弹幕小工具(开篇)

前言

弹幕(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

关注下面的标签,发现更多相似文章
评论