基于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