trtc-electron-sdk的demo中添加更新功能以及出现的报错问题

本文主要是介绍trtc-electron-sdk的demo中添加更新功能以及出现的报错问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、官网demo下载地址

点击下载
按照官网demo说明文档进行安装和运行

2、添加electron-updater

npm install electron-updater

根据项目需求安装对应的版本，建议使用5.2.1

3、创建一个handleUpdater.js文件，和package.json同级

// const { ipcMain } = require('electron')
const { autoUpdater } = require("electron-updater")
const {ipcMain, app} = require("electron");
let canQuit = false;
function handleUpdate(mainWindow) {console.log("版本更新检测",mainWindow)autoUpdater.setFeedURL(“填写自己项目更新地址”) // 设置下载地址function sendUpdateMessage(text) {mainWindow.webContents.send('message', text);}mainWindow.on('close', (event) => {if (!canQuit) {mainWindow.hide();mainWindow.setSkipTaskbar(true);event.preventDefault();}});// 检查更新出错autoUpdater.on('error', (error) => {console.log('autoUpdater-error:::', arguments)sendUpdateMessage({cmd: 'error',message: error,});})// 检查是否有版本更新autoUpdater.on('checking-for-update', (message) => {console.log('checking-for-update:::', arguments)sendUpdateMessage({cmd: 'checking-for-update',message: message})})// 检测到有版本更新autoUpdater.on('update-available', (message) => {console.log('update-available:::', arguments)sendUpdateMessage({cmd: 'update-available',message: message,});})// 未发现有新版本autoUpdater.on('update-not-available', (message) => {console.log('update-not-available:::', arguments)sendUpdateMessage({cmd: 'update-not-available',message: message,});})// 更新下载进度事件autoUpdater.on('download-progress', progressObj => {console.log('download-progress:::', progressObj)sendUpdateMessage({cmd: 'download-progress',message: progressObj,});})// 下载完成，询问用户是否更新autoUpdater.on('update-downloaded', (    event, releaseNotes, releaseName, releaseDate, updateUrl) => {console.log('update-downloaded::: 下载完成，询问用户是否更新')sendUpdateMessage({cmd: 'update-downloaded',message: {releaseNotes,releaseName,releaseDate,updateUrl,},});// autoUpdater.quitAndInstall();})//接收渲染进程消息，开始检查更新ipcMain.on('checkForUpdate', () => {console.log("接收渲染进程消息，开始检查更新")//执行自动更新检查// sendUpdateMessage({cmd:'checkForUpdate',message:arg})autoUpdater.checkForUpdates();});ipcMain.on('quitAndInstall', () => {console.log("接收渲染进程信息，是否立即更新")autoUpdater.quitAndInstall();});//接收渲染进程信息，是否立即更新
`    // ipcMain.on('quitAndInstall', () => {//     console.log("接收渲染进程信息，是否立即更新")//     autoUpdater.quitAndInstall();// });`// 手动下载更新文件// ipcMain.on('confirmDownloadUpdate', () => {//     console.log("手动下载")//     autoUpdater.downloadUpdate();// });
}module.exports = {handleUpdate
}

4、创建更新页面updater.vue

<template><el-dialog:title="percentage == 100 ? '下载完成' : '正在下载新版本,请稍候...'":visible.sync="dialogVisible"width="500px":close-on-click-modal="closeOnClickModal":close-on-press-escape="closeOnPressEscape":show-close="showClose"center><divstyle="width: 100%; height: 50px; line-height: 50px; text-align: center"><el-progressstatus="success":text-inside="true":stroke-width="20":percentage="percentage":width="strokeWidth":show-text="true"></el-progress></div></el-dialog>
</template>
<script>
let { ipcRenderer } = window.require("electron");
import config from '../../package.json'
import { getAuthToken, removeAuthToken } from '@/utils/auth'
import { logout } from '@/api/index'
export default {data() {return {dialogVisible: false,//是否打开弹窗closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBoxcloseOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBoxshowClose: false,//是否显示关闭按钮percentage: 0,//进度条进度strokeWidth: 200,//进度条的厚度confirmShowClose: false,//是否显示右上角关闭按钮confirmShowCancelButton: false,//是否显示取消按钮forcedUpdating: false,//是否需要强制更新timeOut: null,interval: null}},mounted() {//接收主进程版本更新消息ipcRenderer.on("message", (event, arg) => {//监听息屏或者睡眠状态if ('lock-screen' == arg.cmd) {this.handleLogout()} else if ("update-available" == arg.cmd) {console.log("监听发现可用更新事件")//监听发现可用更新事件，判断是否在login页面，也可以选择不需要判断页面自己进行更新if (this.$route.name != 'login') {this.$Bus.$emit('uploadVersion')} else {this.$notify({title: '更新提示',message: "有新版本发现，即将开始更新"});this.dialogVisible = true;// 这里是当有新版本发现时，出现弹框进行确认是否需要更新// this.updateAvailable(arg)}} else if ("download-progress" == arg.cmd) {// 更新下载进度事件this.downloadProgress(arg)} else if ("error" == arg.cmd) {console.log("监听升级失败事件")//监听升级失败事件this.error(arg)} else if ('update-downloaded' == arg.cmd) {console.log("监听下载完成事件")//监听下载完成事件this.updateDownloaded(arg)}});//2秒后开始检测新版本this.timeOut = window.setTimeout(() => {console.log("2222")ipcRenderer.send("checkForUpdate");}, 2000);this.interval = window.setInterval(() => {ipcRenderer.send("checkForUpdate");}, 1800000);this.$Bus.$off("headerUplaod").$on("headerUplaod", () => {ipcRenderer.send("checkForUpdate");})},methods: {/* 登出 */handleLogout() {if (this.$route.name != 'login') {logout(JSON.parse(getAuthToken('userInfo')).userName).then(() => {removeAuthToken('userInfo')removeAuthToken('deptInfo')this.$router.push("/login")this.$Bus.$emit("closeSocket")})}},//监听发现可用更新事件updateAvailable(arg) {let text//根据版本号来判断是否需要强制更新if (arg.message) {let A = config.version.split('.')[0]; // 本地版本号let a = arg.message.version.split('.')[0]; // 服务器安装包版本号let B = config.version.split('.')[1];let b = arg.message.version.split('.')[1];//如果版本号的第一位或者第二位是和目前的版本号不一样就需要强制更新if (a > A || b > B) {text = '发现新版本,需要立即更新才能使用！'this.confirmShowClose = false //是否显示右上角关闭按钮this.confirmShowCancelButton = false //是否显示取消按钮this.forcedUpdating = true //强制更新} else {text = '发现新版本,是否下载新版本?'this.forcedUpdating = false //寻求用户是否需要更新}}//显示升级对话框this.$confirm(text, '提示', {showClose: this.confirmShowClose,//是否显示右上角关闭按钮showCancelButton: this.confirmShowCancelButton,//是否显示取消按钮closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBoxcloseOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBoxconfirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.dialogVisible = true; //打开安装白下载进度弹窗ipcRenderer.send("confirmDownloadUpdate");   // 手动下载更新文件}).catch(() => {});},// 更新下载进度事件downloadProgress(arg) {//更新升级进度// this.dialogVisible = true; //关闭弹窗let percent = Math.round(parseFloat(arg.message.percent));console.log(`更新升级进度---percent`)this.percentage = percent;},//监听升级失败事件error(arg) {this.dialogVisible = false; //关闭弹窗console.log('更新失败');},//监听下载完成事件updateDownloaded() {//有时候网速太快会跳过获取进度，这里进度加个判断，手动设置获取更新进度this.percentage = this.percentage != 100 ? 100 : this.percentage//如果需要强制更新的就不需要再询问客户是否安装// console.log(this.forcedUpdating);if (this.forcedUpdating) {ipcRenderer.send("quitAndInstall"); //退出并安装更新包} else {this.$confirm('下载完成，是否立即更新?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',closeOnClickModal: false,//是否可通过点击遮罩关闭 MessageBoxcloseOnPressEscape: false,//是否可通过按下 ESC 键关闭 MessageBoxtype: 'warning'}).then(() => {ipcRenderer.send("quitAndInstall"); //退出并安装更新包}).catch(() => {this.dialogVisible = false; //关闭弹窗this.$message({type: 'info',message: '已取消更新'});});}}},destroyed() {//清除定时器window.clearTimeout(this.timeOut);window.clearTimeout(this.interval);}
}
</script>

1、本地运行皆为正常，但是打包后，客户端安装后报错cannot find modulee ‘electron-updater’
原因：打包时未将electron-updater进行打包
解决办法：在package.json文件中找到build，在extraFiles里面添加‘node_modules/electron-updater/’，后续出现这种问题根据提示完成插件的添加

  "build": {"asar": true,"asarUnpack": "**\\*.{node,dll}","productName": "police","appId": "com.tencent.trtc-electron-simple-demo","icon": "public/info-avatar.ico","directories": {"output": "./bin"},"publish": [{"provider": "generic","url": "https://jqga.jqwjw.cn/clientupdate/"}],"win": {"target": ["nsis","zip"],"extraFiles": [{"from": "node_modules/trtc-electron-sdk/build/Release/","to": "./resources","filter": ["**/*"]},// 主要代码{"from": "node_modules/electron-updater/","to": "./resources/node_modules/electron-updater","filter": ["**/*"]},]},"files": ["dist/**/*","*.js","!node_modules"]},

在vue项目中使用let { ipcRenderer } = require(“electron”);必须在前面添加window.不然会提示fs.existsSync is not function
仅仅为个人记录，不喜勿喷

这篇关于trtc-electron-sdk的demo中添加更新功能以及出现的报错问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---