前言

彈幕（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