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