&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 等。