当前位置： 首页 > news >正文

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

news 2025/8/4 4:26:42

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
仅仅为个人记录，不喜勿喷

http://www.lryc.cn/news/266440.html

相关文章：

  • 什么是流量攻击? 流量攻击怎么处理？
  • 【大数据】NiFi 的基本使用
  • 5 分钟内搭建一个免费问答机器人：Milvus + LangChain
  • WPF Border
  • 基于博弈树的开源五子棋AI教程[4 静态棋盘评估]
  • STL--排序与检索
  • 大数据处理与分析-Spark
  • 虚拟机的下载、安装(模拟出服务器)
  • K8S Pod Terminating/Unknown故障排查
  • labelme标注的json文件数据转成coco数据集格式（可处理目标框和实例分割）
  • MySQL报错：1366 - Incorrect integer value: ‘xx‘ for column ‘xx‘ at row 1的解决方法
  • MySQL中MVCC的流程
  • 朴素贝叶斯法_naive_Bayes
  • Windows下安装MongoDB实践总结
  • 华为云Stack 8.X 流量模型分析（二）
  • rk3588 之启动
  • ARM GIC （五）gicv3架构-LPI
  • sql-labs服务器结构
  • 【小沐学写作】Docsify制作在线电子书、技术文档（Docsify + Markdown + node）
  • 电脑完全重装教程——原版系统镜像安装
  • 【智慧办公】如何让智能会议室的电子标签实现远程、批量更新信息？东胜物联网硬件网关让解决方案更具竞争力
  • 面向对象设计与分析40讲（16）静态工厂方法模式
  • 【贪心】买卖股票的最佳时机含手续费
  • Altium Designer入门到就业【目录】
  • cmake 查看编译命令，以及在vscode中如何使用cmke
  • 玩转 Scrapy 框架 (一)：Scrapy 框架介绍及使用入门
  • node.js mongoose index（索引）
  • 谷歌推大语言模型VideoPoet：文本图片皆可生成视频和音频
  • ES-mapping
  • Centos 7.9安装Oracle19c步骤亲测可用有视频