以下是关于 Electron 桌面端进程通信的基本知识点总结:
一、Electron 进程模型基础
1. 进程类型与职责
|
进程类型
|
职责
|
权限
|
|---|
|
主进程(Main)
|
创建窗口、系统级操作、IPC中枢
|
完全Node.js访问权限
|
|
渲染进程(Renderer)
|
展示Web内容、UI交互
|
默认受限(可配置开启Node.js)
|
|
预加载脚本(Preload)
|
桥接主进程与渲染进程
|
有限Node.js访问(安全沙箱)
|
2. 进程通信基础架构
二、基础通信模式
1. 异步通信(推荐)
渲染进程 → 主进程
:
const{ ipcRenderer }=require('electron');
ipcRenderer.send('async-msg',{ data:'请求数据'});const{ ipcMain }=require('electron');
ipcMain.on('async-msg',(event, args)=>{
console.log('收到:', args);
event.reply('async-reply','响应数据');});
主进程 → 渲染进程
:
const win =newBrowserWindow();
win.webContents.send('main-to-renderer','推送数据');
ipcRenderer.on('main-to-renderer',(_, data)=>{
console.log('收到主进程数据:', data);});
2. 同步通信(谨慎使用)
const result = ipcRenderer.sendSync('sync-action','参数');
ipcMain.on('sync-action',(event, arg)=>{
event.returnValue ='处理结果';});
三、进阶通信模式
1. Promise封装
const{ contextBridge, ipcRenderer }=require('electron');
contextBridge.exposeInMainWorld('electronAPI',{invoke:(channel, data)=>{return ipcRenderer.invoke(channel, data);}});
window.electronAPI.invoke('getFile','/path').then(handleResult);
2. 流式数据传输
ipcMain.handle('stream-file',async(event, path)=>{const stream = fs.createReadStream(path);returnnewPromise((resolve)=>{
stream.on('data',(chunk)=>{
event.sender.send('file-chunk', chunk);});
stream.on('end', resolve);});});
3. 多窗口通信
const windows =newMap();
ipcMain.on('send-to-window',(_, targetId, message)=>{const targetWin = windows.get(targetId);
targetWin?.webContents.send('cross-window-msg', message);});
四、安全通信实践
1. 安全策略矩阵
|
风险
|
防护措施
|
实现方式
|
|---|
|
任意IPC暴露
|
白名单控制
|
预加载脚本中严格过滤暴露接口
|
|
敏感数据泄漏
|
数据脱敏
|
主进程处理敏感操作,仅返回必要信息
|
|
DDoS攻击
|
频率限制
|
主进程添加请求限流中间件
|
|
反序列化漏洞
|
校验数据格式
|
使用JSON Schema验证输入
|
2. 安全通道示例
const validChannels =['safe-action1','safe-action2'];
contextBridge.exposeInMainWorld('api',{send:(channel, data)=>{if(validChannels.includes(channel)){
ipcRenderer.send(channel, data);}},receive:(channel, listener)=>{if(validChannels.includes(channel)){
ipcRenderer.on(channel, listener);}}});
五、性能优化策略
1. 通信性能指标
|
指标
|
健康阈值
|
优化手段
|
|---|
|
单次IPC延迟
|
<5ms
|
减少不必要通信,合并请求
|
|
大数据传输耗时
|
<100ms(1MB数据)
|
流式传输 + 压缩(如gzip)
|
|
内存占用
|
<50MB/进程
|
及时清除监听器 + 使用Transferable对象
|
2. 高效数据序列化
const buffer = Buffer.from([1,2,3]);
ipcRenderer.send('binary-data', buffer);
ipcMain.on('binary-data',(_, buffer)=>{const data = Uint8Array.from(buffer);});
六、调试与错误处理
1. 调试工具链
|
工具
|
用途
|
|---|
|
Chrome DevTools
|
调试渲染进程IPC通信
|
|
VS Code调试器
|
主进程断点调试
|
|
electron-log
|
跨进程日志记录
|
|
Wireshark
|
网络层通信分析(高级)
|
2. 错误处理模式
ipcMain.handle('safe-action',async(event, arg)=>{try{returnawaitriskyOperation(arg);}catch(error){
console.error('IPC Error:', error);thrownewError('操作失败');}});
window.electronAPI.invoke('safe-action', data).catch(err=>showErrorDialog(err.message));
七、企业级最佳实践
1. 架构设计模式
2. 版本兼容方案
functioncheckFeature(feature){return ipcRenderer.invoke('feature-check', feature).then(supported=>{if(!supported){}});}
3. 通信协议规范
interfaceIPCProtocol{'file:open':{
request:{ path:string};
response:{ content:string}|{ error:string};};'dialog:show':{
request:{type:'info'|'warning', message:string};
response:boolean;};}
八、扩展应用场景
1. 硬件交互
ipcMain.handle('usb-scan',async()=>{const devices =await usbDetect.find();return devices.map(d=>({
vid: d.vendorId,
pid: d.productId
}));});
2. 本地数据库
ipcMain.handle('query-db',(_, sql, params)=>{returnnewPromise((resolve, reject)=>{
db.all(sql, params,(err, rows)=>{if(err)reject(err);elseresolve(rows);});});});
发布评论