三天打造一款全棧簡易視頻直播網(wǎng)站（一）

時間：2023-07-23 06:18:01 | 來源：網(wǎng)站運營

時間：2023-07-23 06:18:01 來源：網(wǎng)站運營

三天打造一款全棧簡易視頻直播網(wǎng)站（一）：從前端談項目架構、接口設計、前后端設計、node.js中間層封裝、項目測試、性能優(yōu)化以及運維部署。

0.先備知識

在你跟著我的文章進行實戰(zhàn)操作之前，你應當具備相關的開發(fā)知識，前端的H5、CSS3、ES6、git的基本使用還有node.js這些基本知識我就我就不多說了，如果不懂我還是希望你先別往后看，趕緊加快修煉吧，因為本項目大體都將使用ES6作開發(fā)。本項目屬于前端進階內(nèi)容，不會介紹像Bootstrap，jQuery或者React等各類框架或者庫的使用，前端部分全部都是原生手寫，并且有大量拓展知識需要去了解，其中包括前端模塊化、前后端分離、接口設計原則、node基本操作、koa2基本知識，PHP基本操作、MySQL基本操作、webpack3、項目測試（單元測試、自動化測試）、pm2負載均衡、nginx反向代理、xampp使用、Linux基本操作。如果作為讀者的你在看完這套技術棧后有些迷茫，也沒關系，在后面的文章中我會引入相關介紹鏈接，在哪個知識點上迷茫，多去推敲即可，祝成功！完整的項目我已經(jīng)托管在了github上，歡迎大家來提出批評和意見，地址是：https://github.com/jerryOnlyZRJ/video-system

其中的代碼可能比較簡單，功能模塊可能也比較單一，我希望和大家分享的是項目從規(guī)劃到實現(xiàn)的整體思想，所以不要在意這些細節(jié)啦。。。

1.目錄結構

├── build 網(wǎng)站上線目錄├── coverage 覆蓋率測試結果├── src 網(wǎng)站開發(fā)目錄├── tests 項目測試目錄├── .babelrc babel配置文件├── .gitignore git有關├── gulpfile.js gulp配置文件├── jest.config.js jest配置文件├── readme.md├── package.json├── webpack.config.js webpack開發(fā)配置文件└── webpack.production.config.js webpack上線配置文件

2.需求分析

幾天前我本在匆匆忙忙地準備各大公司的實習生招聘簡歷，實驗室的一位好哥們忽然找到了我，他最近在研發(fā)一款基于機器學習的人臉識別監(jiān)控系統(tǒng)，希望我能協(xié)助他完成前端的工作。正好之前我也有對視頻直播作過一些研究，兄弟有難，對我來說這項任務當然是義不容辭的啦。從他手里我拿到兩份供我使用的東西，一份是以MIMETYPE:multipart/x-mixed-replace;boundary=frame傳輸?shù)囊曨l流的URL，還有一份是存儲識別結果的資源數(shù)據(jù)庫，我需要做的，便是將視頻流展示，將識別結果以表單形式展示。

2.1.視頻直播實現(xiàn)

實現(xiàn)視頻直播的方式有很多，包括之前我提及過得RMTP協(xié)議，還有本項目使用的MIMETYPE:multipart/x-mixed-replace;boundary=frame的HTTP傳輸方式，所有的方式思想都是一樣，無非就是服務器實時推送，客戶端實時拉取。對于本項目而言，因為在后臺需要對視頻流中的每一幀作識別處理，并且將識別結果以幀的形式導出，因此這里我們選擇了后者。如果想深入了解這種傳輸方式，大家可以瀏覽這篇博文，里面對此做了詳細介紹：https://www.cnblogs.com/leaven/p/3514650.html 其實它的本質(zhì)，便是以數(shù)據(jù)塊的形式傳輸視頻幀，后一個數(shù)據(jù)塊將會替代前一個數(shù)據(jù)塊，boundary表示它傳輸?shù)臅r間間隔，這里的值是frame（幀）。具體在網(wǎng)頁中的應用就更為簡單，我們只需要用一個img標簽引入就行，將src設置為后臺給予我們的URL即可，就像是引入一張圖片。

2.2數(shù)據(jù)庫接口層封裝

既然以及為我們提供了資源數(shù)據(jù)庫，那么我們只需要再給后臺加一層PHP即可。其實這部分工作原則來說應該是歸屬后端的，但是因為本項目只有我們兩個人，哥們他在圖像識別那邊已經(jīng)有很多工作了，加上我也有能力完成，所以我更需要接手這份工作。其實在實際的開發(fā)過程中，作為一名前端人員也應當多去了解一些后端開發(fā)的知識，一定是利大于弊的，別想著那不是我的工作范圍我就不管不問了，當項目出BUG的時候，你就會知道知識的匱乏會讓你多苦逼了。本項目的開發(fā)過程是完全前后端分離的，所以在開發(fā)過程中，我們不會用到上線服務器，所以我們得現(xiàn)在開發(fā)環(huán)境中搭建上線服務器的模擬環(huán)境，廢話不多說，開始工作：

后端給我的數(shù)據(jù)庫結構是下面這樣的：

Field Typepeople_id INT (P)name VARCHAR(20) 自定義名字age INTsex INTpic_url VARCHAR(50) 首次在攝像頭范圍內(nèi)識別到某人員的視頻幀URLvideo_url VARCHAR(50) 某人員在攝像頭內(nèi)出現(xiàn)時候的視頻last_time DATE 某人員在攝像頭中最后出現(xiàn)的時間那么，我們先在本地的MySQL中建立一個名為video的數(shù)據(jù)庫，并且在該數(shù)據(jù)庫下建立一張名為info的數(shù)據(jù)表，具體SQL代碼參考項目根目錄下的info.sql文件，PHP接口層封裝參考項目build/info.php文件，這里大家會好奇我為什么把PHP文件放在了一個名字叫build的文件夾里，大家先別著急，一會就會給大家講解。這里需要特別提及一下，因為這是我在開發(fā)機上搭建的模擬服務器環(huán)境，所以在PHP里我就直接用root去鏈接了，還有最后的輸出，我們通過json_encode()轉(zhuǎn)化成了字符串，所以在前端接收數(shù)據(jù)時一定要記得JSON.parse()。

上面的事情做完了之后，我們的后端模擬工作就基本結束啦，接下來就要開始我們真正的工作了。

3.前端架構

這里我們的工作包括了前端界面實現(xiàn)和前端業(yè)務邏輯實現(xiàn)，作為學生黨自己鉆研的項目，最好不過的地方便是沒有UI設計圖紙，哈哈，那么我這么一位全身充滿文藝氣息的文藝青年就可以自由發(fā)揮啦！雖然說不太專業(yè)，但我覺得我的審美還算過得去。。。別取笑我！這里大家可能會問要不要用什么庫啊像Bootstrap什么的，在這里我是強烈不推薦的，現(xiàn)在CSS3這么好用，很多樣式完全可以我們自己寫，還有我們自己的特色，甚至是jQuery，在本項目中都不使用，H5給我們提供了那么多好用的API，jQuery已經(jīng)逐漸在退出歷史舞臺啦。而且因為項目只是為了搭建一個建議的直播網(wǎng)站，所以我也沒用React這些框架，可以說，整個項目大體都是手寫原生代碼（除了node，那個用原生真的會寫到腎虧）。

3.1UI設計

給大家看看我設計的前端界面：

看起來是不是特別簡約，要的就是這個效果。頁面的頂端是一個導航欄，最開始我們只加入了一個menu-btn，click之后會跳出側(cè)邊導航欄，里面有兩個li，用于切換右邊的content-box里面的內(nèi)容?！耙曨l廣場”對應的content-box內(nèi)有四個item，用于展示我們的視頻（后端實際上給了我四個視頻流的URL），“出入信息”對應的content-box用于展示我們的數(shù)據(jù)庫信息。整體的布局我使用的是flex，主要原因就是兩個——好用。其實本來想用grid的，但發(fā)現(xiàn)太久沒用了生疏了，而且還有一些新特性還是在測試階段（說白了就是筆者好多地方忘了怎么寫了），隨意最后毅然決然了選擇了flex。之所以這樣布局，一是符合現(xiàn)在流行的簡約布局，最關鍵的是這樣的布局方式更方便后期我們做響應式。PS：響應式的部分不在我們的三天內(nèi)容內(nèi)，以后如果有需要我會繼續(xù)更新并深入介紹。

3.2代碼實現(xiàn)

有了UI設計方案，那我們就開始上手代碼吧。先$ npm init初始化我們的項目，并在項目根目錄下新建一個build（或者dist）目錄用于存放我們的項目上線文件。新建一個src目錄用于存放我們的項目開發(fā)文件，在src目錄內(nèi)新建一個public（或static）目錄用于存放我們的靜態(tài)資源，新建一個views目錄用于存放我們的靜態(tài)頁面。src和build的關系便是：src目錄下的源文件經(jīng)過編譯壓縮等操作后將會生成到我們的build目錄下，最后我們只需要將build內(nèi)的文件復制到上線服務器上運行就可以了，也就是說，build文件內(nèi)存放的才是我們最終的“產(chǎn)品”。

接下來我們在src目錄內(nèi)的views目錄下新建一個index.html作為我們的靜態(tài)首頁并開始實現(xiàn)之前的UI設計，代碼因為已經(jīng)托管在了github上了，這里我就不作介紹了，大家爭取自己嘗試去復現(xiàn)一下項目，本項目的代碼僅供參考。

PS：因為沒用jQuery，所以為了實現(xiàn)AJAX，我沒使用原生寫法編寫XMLHttpRequest，而是使用了新推出的 fetch API，雖然說這個API還在測試階段，但是以Promise對象作為異步運用，能夠大大解決JS早期因為異步回調(diào)產(chǎn)生的回調(diào)地獄，還有更好的可讀性，有了ES6的相關知識后也很好上手，何樂而不為？這里給大家推薦一篇fetch API的介紹文：https://segmentfault.com/a/1190000011433064

3.3webpack配置

3.3.1為什么要用webpack?

這里就涉及到了前端模塊化和工程化的思想。眾所周知，在前端工作中，如果我們要在頁面內(nèi)引入CSS樣式或者JS文件，通常都是通過link或者script標簽，但如果，當我們的項目越來越龐大，需要引入的文件越來越多的時候，那我們就得一直往html文件里添加標簽，浪費人力不說，頁面布滿了link和script也不合適。作為前端開發(fā)的基本素養(yǎng)，這里我就視讀者掌握了CommonJS，AMD，CMD以及ES6 Module的相關知識，在本文就不作提及，之后的代碼我們都將以模塊化的形式編寫。

當然，做過開發(fā)的前端er們都知道，瀏覽器并不支持模塊的導出和引入，要解決這一問題， 可以選擇墊片(不推薦，知道有這么個東西就行)，當然，還可以使用我們的打包工具。webpack就是實現(xiàn)我們前端工作工程化的工具。有很多人說，打包工具有很多啊，gulp，grunt還有新出的parcel，為什么我們要選擇webpack？暫時，你只要知道webpack更適合我們做views層的打包就行了，而且webpack將所有的東西都視為模塊——萬物皆模塊，也就是說我們不論是引入JS還是引入CSS，都可以以模塊的形式去做，至于幾個打包工具的利弊，在后面我們用gulp對node層進行打包時，會再作深入分析。

因此我們先在項目的根目錄下添加兩個文件，一個是webpack.config.js（開發(fā)版），webpack.production.config.js(上線版)。開發(fā)版用于開發(fā)階段我們的調(diào)試工作，上線版用于項目最后我們生成上線文件時的打包工作。其實兩份文件的內(nèi)容相差無幾，唯一的區(qū)別便是：相比與開發(fā)版的webpack配置文件，我們會在上線版的配置文件中增加代碼壓縮等功能，以實現(xiàn)我們的資源最大性能優(yōu)化。

如果大家在webpack遇到了什么困難，可以參考這篇文章：https://www.jianshu.com/p/42e11515c10f

3.3.2webpack中配置的注意事項

（一）這里為了區(qū)分ES6文件和編譯后的普通JS文件，我將ES文件的后綴名設置為了.es的形式，所以在配置文檔里。我們應當在babel-loader里的匹配項中加上/.es

（二）在output的屬性中，我增加了publicPath: '/'一行，增加之后插入HTML文件中的script和link標簽的src屬性值的開頭會增加一個‘/’字符，表示在根目錄下的路徑，目的是為了配合koa中的靜態(tài)資源配置。如果你有CDN服務器，那就可以把publicPath填上你的CDN IP。

（三）我在編譯后的JS文件和CSS文件的文件名中自動添加了MD5戳，目的是防止更新JS文件或者CSS文件之后網(wǎng)站不同步的情況。

（四）我使用了webpack自帶的CommonsChunkPlugin插件（webpack4已對此做了修改，切記安裝時應當$ npm i webpack@3否則會報錯)，目的是提取打包后JS文件中的公共代碼，因為每次我們引入一個模塊（說白話就是require一次），webpack都會往打包后的文件添加這個模塊里的代碼，當項目的體積越來越大時，我們不免需要引入許多相同的模塊，這樣就會產(chǎn)生大量重復的代碼，造成資源浪費，通過這一插件就能解決這一問題。

（五）在項目里我使用了clean-webpack-plugin這款插件，目的是清空前一次編譯后的文件。因為我之前提到過，我在JS和CSS文件名后自動添加了MD5戳，由于不會出現(xiàn)重名沖突，所以前一次編譯的文件不會被替換，每次編譯后都會增加一份文件，這是我們所不想看到的。運用這款插件的目的就是清空build目錄下的pubilc和views內(nèi)的所有文件。

3.4.package.json深入

3.4.1.快捷命令

項目的最后，大家可以打開根目錄下的package.json文件，這里存放著我們項目的一些基本信息還有依賴文件，大家結合之前我們配置好的webpack，可以在文件中的"scripts"屬性中加入以下兩行代碼:

"dev": "webpack-dev-server --open"

"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"

前一行代碼的作用是在本地模擬一臺測試服務器，能夠展示你編譯后的頁面，并實時監(jiān)聽代碼變化自動刷新頁面，配置可以參考webpack.config.js文件內(nèi)的devServer屬性值。而第二行代碼，是以webpack.production.config.js內(nèi)的配置編譯項目，加入了這兩行代碼之后，我們在編譯上線文件的時候就不需要敲一長串Shell啦，直接$ npm run build就OK了。

3.4.2.區(qū)分開發(fā)環(huán)境和上線環(huán)境

package.json的作用不僅僅局限于制定我們的快捷命令，大家翻到文件的下方，會看到這兩個屬性："devDependencies"、"dependencies",前者是指開發(fā)環(huán)境下的項目依賴，諸如我們的打包工具webpack和后面將提到的gulp，還有我們的測試插件jest和supertest，這些都會在后兩天的項目任務中深入介紹，而后者是指上線環(huán)境下的項目依賴，諸如我們的koa還有一系列koa引申的插件。在node環(huán)境中，我們使用命令$ npm i將會自動安裝所有的依賴，而使用$ npm i -S和$ npm i -D將會分別安裝上線環(huán)境所需的依賴和開發(fā)環(huán)境所需的依賴，之所以這么區(qū)分的作用，我們將會在第三天的服務器上線任務中詳細介紹，現(xiàn)在我們需要知道的是，在安裝相關依賴時，你必須事先判斷它是屬于開發(fā)環(huán)境下的還是上線環(huán)境下的，并將他們區(qū)分開來，使用不同的安裝命令。

4.結語

在編寫好代碼之后，試著$ npm run build并在build目錄下找到你編譯好的index.html文件，打開看看是不是你設計好的樣式，還有正常執(zhí)行的業(yè)務邏輯。如果出現(xiàn)了BUG，可以使用chrome的開發(fā)者工具打斷點，或者在源代碼中加上debugger關鍵字（這個關鍵字的效果就相當于我們平時在開發(fā)者工具里打的斷點）。

第一天的任務基本就結束了，我們做了前端界面設計及實現(xiàn)，前端工程化的配置，很多東西都是很依靠靈感的，就像我們的界面設計，如果一時沒有頭緒，不用著急，喝杯咖啡聽一首歌，讓自己好好休息一下再繼續(xù)。

其他也都剩一些基本知識了，就不需要過多提及了，如果項目中遇到了困難，記住多查文檔多看社區(qū)，內(nèi)事問百度，外事找谷歌，總會有解決方案的，解決BUG的過程雖然痛苦，但最后時刻的喜悅是難以形容的，加油！

最后來一句每日箴言：Done is better than perfect.