基於Electron + nodejs + 小程式 實現彈幕小工具（開篇）
彈幕（barrage），中文流行詞語，指的是在網路上觀看視訊時彈出的評論性字幕。類似小說中行間彰顯的夾批，視訊中屏間飄過的評點叫做彈幕，原意指用大量或少量火炮提供密集炮擊。而彈幕，顧名思義是指子彈多而形成的幕布，大量吐槽評論從螢幕飄過時效果看上去像是飛行射擊遊戲裡的彈幕。
很久以前，彈幕還只是出現在視訊中，邊看視訊邊吐槽，成為不少人的習慣。
後來，彈幕出現的地方就越來越多了。酒吧、企業年會、行業峰會、校園晚會等等場景，凡是有大螢幕的地方，基本上彈幕都能派上用場。不得不說，在很多場景下，彈幕是一大神器。
那麼，作為一個前端，如何手擼一個彈幕工具呢？
需求分析
首先，來分析一下需求：
- 為了提高使用者的參與度，應該儘量減少使用者的使用成本，無需下載APP，無需註冊賬號，掃碼即用。
- 使用彈幕的時候，有可能是正在播放視訊、放映PPT等。所以我們的彈幕應該是透明的疊加層，可以疊加在任何背景元素之上，而且滑鼠還能操作彈幕層下面的控制元件。
- 播放視訊或PPT的電腦，最常見的，有可能是Windows或者Mac，所以我們要適配多平臺。
以上，應該是這個彈幕工具最基本的需求了。
技術選型
從以上的需求可以看出，我們大概需要三個端的開發：
- 傳送端：掃碼即用，執行在使用者的手機上，小程式成為一個不錯的選擇。
- 接收端：執行在PC上，當前熱門的Electron可以使用前端技術構建跨平臺的桌面應用。
- 服務端：傳送端和接收端之間，應該有一個服務端進行資料的處理。那麼，nodejs也就可以派上用場了。
很明顯，一個前端就可以完成以上所有開發。
總體架構圖
簡單的websocket服務端搭建
我們可以通過ws模組快速的搭建一個websocket服務。
const Socket/">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