&emsp;&emsp;公司其中一個主營業務是直播，目前主播直播會使用客戶端開播，客戶端中的用戶有觀眾和主播兩種身份。 &emsp;&emsp;但客戶端開播并不方便，例如音質沒有 PC 的好，手機長時間直播發熱，模擬器操作沒有 PC 方便等。 &emsp;&emsp;經過討論，讓我們組基于能跨平臺的[Electron](https://www.electronjs.org/zh/docs/latest/)開發 PC 客戶端版本的開播助手，購買的第三方聲網服務正好也有相關 demo。 :-:  &emsp;&emsp;我們在此 demo 的基礎上增加公司的業務邏輯，其技術原理可以分為以下幾個步驟： 1. 采集：通過攝像頭、麥克風等設備采集音頻和視頻數據。 2. 傳輸：通過網絡將編碼后的音頻和視頻數據傳輸給服務器。 3. 服務器處理：服務器對接收的數據進行處理和分發，將數據發送給各個客戶端。 4. 互動消息和消息信令：直播間的聊天消息傳輸以及各種業務消息指令（例如上麥、下麥等）。 &emsp;&emsp;對應的技術實現會基于[聲網](https://docportal.shengwang.cn/cn/live-streaming-standard-legacy/landing-page)和騰訊[IM](https://cloud.tencent.com/document/product/269/75285)，以及現有的客戶端邏輯，簡單的說就是將客戶端的邏輯搬到 PC 端實現。 1. 采集編解碼部分可由聲網的 SDK 方案進行 PC 端的音視頻采集。 2. 傳輸部分基于聲網的 RTC 協議進行采集后的音視頻數據推流。 3. 業務服務器基于現有直播業務模型進行適配，如開播流程，各種業務消息流程。 4. 互動消息以及消息信令通過現有的三方服務商騰訊 IM 接入適配當前的直播業務流程。 &emsp;&emsp;一開始比較疑惑，為什么直播間中的交互要通過 IM 完成，后面了解到主播和觀眾需要用長連接綁定在一起，這樣有交互才能通知到各個人員的界面中。 &emsp;&emsp;這個工作量是非常巨大的，但是我們計劃分成多期完成，第一期就做最簡單的音頻上麥和下麥。 ## 一、分工 &emsp;&emsp;在拿到原始的 Electron 項目后，一開始還沒想好如何分工，大家對 Electron 都比較陌生。 &emsp;&emsp;前后也討論了兩次，最后決定邊做邊調整分工內容，首先需要了解下 Electron 項目。 **1）項目說明** &emsp;&emsp;當前的 Electron 項目其實就是將頁面打包到瀏覽器中發布成一個客戶端，這是一個特殊的瀏覽器，可以不受限制的使用更多的功能。 &emsp;&emsp;而我們的大部分開發其實和普通網頁開發無差別，代碼存儲在下圖的 renderer 目錄中，分工的主要內容也是此目錄中。 :-:  &emsp;&emsp;main 目錄的文件會控制主進程，負責管理應用的生命周期，顯示原生界面，執行特殊操作并管理渲染器進程。 &emsp;&emsp;下面的代碼就是在打開一個瀏覽器窗口，可配置其寬高，并且能自動打開控制臺。 &emsp;&emsp;開發環境與線上環境 loadURL() 調用的參數有所不同。 ~~~ function createMainWindow() { const window = new BrowserWindow({ width: 1200, height: 720, autoHideMenuBar: true, webPreferences: { nodeIntegration: true, contextIsolation: false, webSecurity: false, }, //titleBarStyle: 'hidden', //titleBarOverlay: false, }); window.setMinimumSize(1200,720) window.setBackgroundColor('#000000') window.webContents.openDevTools({ mode: 'detach', activate: true, }); if (isDevelopment) { window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`); } else { window.loadURL( formatUrl({ pathname: path.join(__dirname, 'index.html'), protocol: 'file', slashes: true, }) ); } window.on('closed', () => { mainWindow = null; }); window.webContents.on('devtools-opened', () => { window.focus(); setImmediate(() => { window.focus(); }); }); return window; } ~~~ **2）明確范圍** &emsp;&emsp;初次分工是讓組內的一名成員負責登錄功能，我去完成主界面的邏輯和項目基礎功能。 &emsp;&emsp;項目基礎功能包括通信、常量、緩存等功能的封裝，其中最重要的是通信功能。 &emsp;&emsp;為了能和客戶端使用相同的接口，需要在通信時也加上與客戶端相同的鑒權邏輯，并且還得帶上所有接口都需要的必傳參數。 &emsp;&emsp;同事的登錄邏輯也會依賴通信，所以通信模塊極為重要，也就最先完成封裝，其次是對騰訊 IM 的封裝。 &emsp;&emsp;官方文檔寫的比較清晰，但是在實際集成時，還是遇到不少問題，期間與客戶端的同事沒少打交道，他們也提供了很大的支持。 &emsp;&emsp;直播間的交互依賴 IM，IM 基于 websocket 長連接，目前已將 IM 的操作封裝到 utils/chat.ts 中，簡化初始化、發送消息、接收消息、加入直播間等功能。 &emsp;&emsp;下面是一條發送上麥的消息，其中 reqId 和 user-agent 是必傳項。 ~~~ { code:"audio", body:{ reqId:1, "user-agent": "" method:"onSeat", seatNum:-1, auto: true } } ~~~ &emsp;&emsp;下面是一條接收進入直播間的消息，如果是響應消息，那么會包含 reqId；如果是主動推送的消息，那么就不會包含此屬性。 &emsp;&emsp;注意，有些響應還會包含 method 字段，并且如果是響應消息，那么 code 都將是 req。 ~~~ { toUserId: "443343545", code: "req", roomId: "88434342", data: { userId: "546657523", nickName: "211", method: "onSeat", reqId: 1 }, print: true } ~~~ &emsp;&emsp;如果要對某個響應做回調，可以根據 code 和 method 的組合來設計回調方法的名稱，然后注冊到一個哈希對象中。 ~~~ public addReceiveCallback(name:string, callback:any) { this.hashReceive[name] = callback; } ~~~ &emsp;&emsp;不過，由于響應消息的 code 都是 req，所以在發送消息時，需要將 reqId 與 code 映射，這樣就能在響應時通過 reqId 讀取 code。 &emsp;&emsp;經過這類基礎封裝后，分工就明確了，直播間中的交互以及登錄都交由另一個同事完成，大家也能做到互不干擾。 ## 二、研發 &emsp;&emsp;客戶端需要將軟件安裝到本地電腦中，所以需要有簽名和更新機制。 &emsp;&emsp;以 MacOS 為例，默認是不能安裝非應用市場的軟件，如果要將軟件發布應用市場，那么就必須簽名。 &emsp;&emsp;而更新是為了能讓用戶享受最新版本的功能和優化。由于第一階段，用戶都是運營能控制的，所以就省去了簽名和更新。 **1）啟動** &emsp;&emsp;啟動項目，在背后執行的命令是[electron-webpack](https://webpack.electron.build/)dev。 ~~~ npm start ~~~ &emsp;&emsp;electron-webpack 的目標是通過一次簡單的安裝消除所有初步設置（項目結構、熱更新、TS、babel 等），以便重新開發應用程序。 **2）打包** &emsp;&emsp;開始打包，在背后執行的命令是 yarn compile &&[electron-builder](https://www.electron.build/index.html)。 ~~~ npm run dist ~~~ &emsp;&emsp;electron-builder 用于打包和構建適用于 macOS、Windows 和 Linux 的 Electron 應用程序。 &emsp;&emsp;注意，打包成?Windows 軟件時，需要在 Windows 系統中完成打包。 &emsp;&emsp;在 Windows 上安裝環境時，發現 Node.js、VSCode 等軟件，最新版都不再支持 Win7。 ~~~ { "compile": "electron-webpack", "dist": "yarn compile && electron-builder", "dist:mac": "yarn dist --dir -c.compression=store -c.mac.identity=null", "dist:win32": "yarn compile && electron-builder --publish never --win --ia32", "dist:win64": "yarn compile && electron-builder --publish never --win --x64" } ~~~ &emsp;&emsp;在第一次打包時，會下載依賴的 electron-v.xxxx.zip 文件，由于國內的網絡環境，下載速度緩慢，經常會失敗。 &emsp;&emsp;在提示的錯誤中，會包含下載地址，最簡單的辦法是放到瀏覽器中下載，下載完成后放到 Mac 的指定目錄。 ~~~ open ~/Library/Caches/electron/ ~~~ &emsp;&emsp;Windows 目錄可以參考 C:\\Users\\Administrator\\AppData\\Local\\electron\\Cache，其中Administrator是登錄的賬號，有可能不同。 :-:  &emsp;&emsp;在打包 Windows 時，也要下載相關的 Electron 壓縮包（下載地址可從錯誤提示中獲取），例如 electron-v18.2.3-darwin-x64.zip。 ~~~ ? Get "https://npmmirror.com/mirrors/electron-builder-binaries/winCodeSign-2.6.0/winCodeSign-2.6.0.7z": proxyconnect tcp: dial tcp :0: connectex: The requested address is not valid in its context.github.com/develar/app-builder/pkg/download.(*Downloader).follow.func1...... ~~~ &emsp;&emsp;在打包時還會出現其他的包不能安裝，按照提示將包下載到本地，然后復制到指定位置。 &emsp;&emsp;例如將 winCodeSign.gz 復制到 ~/Library/Caches/electron-builder/winCodeSign 中并解壓縮。 &emsp;&emsp;最后按照各種提示進行操作即可，例如開放權限等。 :-:  **3）IM** &emsp;&emsp;直播間的通信基于騰訊 IM，以上麥為例，在上麥時客戶端會向 IM 服務器發送上麥消息。 &emsp;&emsp;服務端在完成上麥處理后，讓 IM 服務端發送響應消息給客戶端。 &emsp;&emsp;上麥初始化后，需要加入聲網的頻道，再進行座位下發消息，經由 IM 服務器中轉給客戶端。 **4）日志** &emsp;&emsp;在模板 src/index.ejs 頁面中，已經加載自研的監控 SDK，console.log 和 console.error 的數據都會上報到服務器中。 ~~~html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PC直播助手</title> <script src="https://www.xxx.com/js/shin.js" crossorigin="anonymous"></script> <script> shin.setParam({ token: "pc-live", version: '1.0.0', src: 'https://api.xxx.com/ma.gif' }); </script> </head> <body> <div id="app"></div> </body> </html> ~~~ &emsp;&emsp;除此之外，還可以引入[electron-log](https://www.npmjs.com/package/electron-log/v/4.4.8)庫，將打印信息存儲在本地文件中。 &emsp;&emsp;最新版本是 5.X，但是每次引入會報錯，所以就選用了 4.4.8 版本，內置了 error、warn、info 和 debug 等方法。 ~~~ import logger from 'electron-log'; logger.info('第二條測試日志', { userId: '657676', userSig: 'eJwszc3K*wsAAP--qFMw4w__', groupId: '88434345' }) ~~~ &emsp;&emsp;在調用日志方法后，默認就會在指定目錄中生成 renderer.log 文件，其中 live-assistant 是在 package.json 中配置的 name 屬性。 ~~~ open ~/Library/Logs/live-assistant/ ~~~ &emsp;&emsp;renderer.log 文件中的默認日志格式如下，格式可自定義。 ~~~ [2024-02-22 18:02:20.549] [info] 第二條測試日志 { userId: '5456565', userSig: 'eJwszc3K*wsAAP--qFMw4w__', groupId: '885657564' } [2024-02-22 18:18:14.223] [info] 第三條測試日志 { userId: '34545656', userSig: 'eJwszc3K*wsAAP--qFMw4w__', groupId: '88567688' } ~~~ **5）聲網** &emsp;&emsp;整個直播間功能依賴聲網和 IM 共同作用，IM 是展示 UI 層，可以讓觀眾在直播間內看到主播是否上麥、開閉麥狀態。 &emsp;&emsp;聲網是功能層，實際控制主播是否進入頻道，是否能發流。 &emsp;&emsp;所以整個流程應該是先發送 IM 消息，接收到服務端 IM 消息之后確認業務層功能沒問題再操作聲網層，聲網層收到回調確認功能成功再結束整個功能。 ***** > 原文出處： [博客園-Node.js躬行記](https://www.cnblogs.com/strick/category/1688575.html) [知乎專欄-Node.js躬行記](https://zhuanlan.zhihu.com/pwnode) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。