《通信软件前端开发》课件-49.Electron+主进程与渲染进程通信

《通信软件前端开发》Electron主进程与渲染进程通信01案例导入知识讲解02动手实践03测试与验证04讨论与问答05课后思考与作业06课程总结07案例导入01场景描述“在通信设备报警系统中，当设备状态异常时，需通过主进程检测系统事件（如网络中断），并触发渲染进程中的Vue组件显示报警弹窗。如何实现这一跨进程通信？”问题导入主进程（Electron）能否直接操作渲染进程（Vue3）的DOM？为什么？01如果渲染进程需要访问本地文件系统，应如何设计通信流程？02展示目标成果主进程模拟“离线”事件→渲染进程弹出红色报警窗口。01渲染进程通过搜索框输入关键词→主进程过滤设备列表并返回结果。02预录视频内容（1.5分钟）知识讲解02进程通信基础管理原生功能（窗口、菜单、系统API），单例运行。主进程运行Web页面（Vue3），可创建多个（如多窗口）。渲染进程ipcMain（主进程）+ipcRenderer（渲染进程）模块。通信桥梁核心通信模式方向：渲染进程→主进程。使用场景：需立即响应的操作（如读取配置文件）示例代码：ipcRenderer.sendSync('channel',data)同步通信方向：双向。使用场景：非实时操作（如文件读写、网络请求）示例代码：ipcRenderer.send('channel',data)+ipcMain.on('channel',callback)异步通信方向：主进程→渲染进程。使用场景：主动推送通知（如设备状态变化）示例代码：webContents.send('channel',data)事件监听实践安全使用预加载脚本（Preload）暴露受限API给渲染进程。//preload.js.const{contextBridge,ipcRenderer}=require('electron');contextBridge.exposeInMainWorld('api',{sendAlert:(msg)=>ipcRenderer.send('alert',msg),onDeviceUpdate:(callback)=>ipcRenderer.on('device-update',callback),});禁用Node.js集成在渲染进程中设置webPreferences:{nodeIntegration:false}。项目中的通信场景报警弹窗触发主进程监听系统事件→调用webContents.send('show-alert',{level:'error'})设备数据加载渲染进程→主进程：send('fetch-devices',{page:1})主进程→渲染进程：webContents.send('devices-list',data)动手实践03任务要求在通信设备报警系统中实现以下功能点击“刷新设备”按钮，通过IPC请求主进程获取最新设备列表。渲染进程发送请求模拟API延迟（setTimeout），返回Mock数据并触发渲染进程更新。主进程响应数据主进程随机触发“设备离线”事件，渲染进程显示弹窗。报警弹窗通知代码框架指导主进程（main.js）ipcMain.on('fetch-devices',(event,{page})=>{setTimeout(()=>{constmockData=[{id:1,name:'Router-01',status:'online'}];event.sender.send('devices-list',{data:mockData,page});},1000);});//模拟设备离线事件。setInterval(()=>{mainWindow.webContents.send('show-alert',{title:'设备离线',message:'Router-01已断开连接'});},5000);渲染进程（Vue组件）//使用预加载API或直接导入（需配置contextIsolation:false，不推荐）const{ipcRenderer}=require('electron');exportdefault{methods:{refreshDevices(){ipcRenderer.send('fetch-devices',{page:1});ipcRenderer.on('devices-list',(event,{data})=>{this.deviceList=data;});},},mounted(){ipcRenderer.on('show-alert',(event,{title,message})=>{alert(${title}:${message});//实际项目中替换为Vue弹窗组件。});},}实时支持教师演示如何调试IPC通信（ChromeDevTools的ELECTRON_EVENTS面板）。01提供常见错误解决方案（如事件未触发、数据格式错误）。02测试与验证04自动化测试使用Spectron（Electron自动化测试工具）编写测试用例app.client.click('#refresh-btn')//点击刷新按钮。01.waitUntilTextExists('.device-item','Router-01',2000)//验证设备列表更新。02.getAlertText().then(text=>assert.include(text,'设备离线'));//验证弹窗内容。03动手实践035秒内，是否随机弹出报警窗口。02点击刷新后设备列表是否更新。01运行项目，检查以下功能是否正常：讨论与问答05分组讨论“如果渲染进程需要上传文件到主进程，应如何设计通信流程？能否直接使用<inputtype=“file”>？”教师总结强调预加载脚本的安全性，并预告下节课将讲解使用Electron的dialog模块实现文件选择。课后思考与作业06思考题Part02在多窗口场景下，如何确保主进程的消息推送到指定窗口？Part01如何优化IPC通信性能（如减少高频事件传递的数据量）？实践作业Part02使用Vue3的provide/inject或Pinia管理从IPC接收的全局状态（如报警消息队列）。Part01在项目中添加“设备搜索”功能：渲染进程发送关键词→主进程过滤数据→返回结果。课程总结07核心知识点总结03项目中设备数据加载与报警弹窗的实现逻辑。02预加载脚本在安全通信中的核心作用。01IPC通信的三种模式（同步/