基於Electron + nodejs + 小程序實現彈幕小工具（開篇）

時間 2019-11-21

原文原文鏈接

前言

彈幕（barrage），中文流行詞語，指的是在網絡上觀看視頻時彈出的評論性字幕。相似小說中行間彰顯的夾批，視頻中屏間飄過的評點叫作彈幕，原意指用大量或少許火炮提供密集炮擊。而彈幕，顧名思義是指子彈多而造成的幕布，大量吐槽評論從屏幕飄過期效果看上去像是飛行射擊遊戲裏的彈幕。javascript

好久之前，彈幕還只是出如今視頻中，邊看視頻邊吐槽，成爲很多人的習慣。html

後來，彈幕出現的地方就愈來愈多了。酒吧、企業年會、行業峯會、校園晚會等等場景，凡有大屏幕的地方，基本上彈幕都能派上用場。不得不說，在不少場景下，彈幕是一大神器。前端

那麼，做爲一個前端，如何手擼一個彈幕工具呢？java

需求分析

首先，來分析一下需求：node

爲了提升用戶的參與度，應該儘可能減小用戶的使用成本，無需下載APP，無需註冊帳號，掃碼即用。
使用彈幕的時候，有多是正在播放視頻、放映PPT等。因此咱們的彈幕應該是透明的疊加層，能夠疊加在任何背景元素之上，並且鼠標還能操做彈幕層下面的控件。
播放視頻或PPT的電腦，最多見的，有多是Windows或者Mac，因此咱們要適配多平臺。

以上，應該是這個彈幕工具最基本的需求了。nginx

技術選型

從以上的需求能夠看出，咱們大概須要三個端的開發：web

發送端：掃碼即用，運行在用戶的手機上，小程序成爲一個不錯的選擇。
接收端：運行在PC上，當前熱門的Electron可使用前端技術構建跨平臺的桌面應用。
服務端：發送端和接收端之間，應該有一個服務端進行數據的處理。那麼，nodejs也就能夠派上用場了。

很明顯，一個前端就能夠完成以上全部開發。npm

整體架構圖

簡單的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";
    }
}
複製代碼