electron中的IPC通信

Electron的核心架构包含主进程（管理应用生命周期、系统资源）和渲染进程（每个窗口的网页实例）。由于进程隔离，它们需通过IPC（进程间通信） 协作。本文详解IPC的四种模式、安全实践及性能优化。

---

一、IPC基础：通信模式与API

1. 单向通信（渲染进程 → 主进程）

场景：触发操作无需返回值（如修改窗口标题）。

// 渲染进程（通过预加载脚本暴露API）  
window.electronAPI.setTitle('新标题');  // 预加载脚本（preload.js）  
contextBridge.exposeInMainWorld('electronAPI', {  setTitle: (title) => ipcRenderer.send('set-title', title)  
});  // 主进程  
ipcMain.on('set-title', (event, title) => {  const win = BrowserWindow.fromWebContents(event.sender);  win.setTitle(title);  
});  

关键点：使用 ipcRenderer.send + ipcMain.on 组合。

2. 双向通信（渲染进程 ⇄ 主进程）

场景：需等待主进程返回结果（如读取文件）。
推荐方案：invoke/handle（异步Promise风格）

// 渲染进程  
const data = await window.electronAPI.readFile('demo.txt');  // 预加载脚本暴露方法  
readFile: (path) => ipcRenderer.invoke('read-file', path)  // 主进程  
ipcMain.handle('read-file', async (event, path) => {  return fs.promises.readFile(path, 'utf-8');  
});  

替代方案：send/reply（传统回调，需手动管理事件）。

3. 主进程主动推送（主进程 → 渲染进程）

场景：实时通知（如系统事件、后台任务完成）。

// 主进程  
mainWindow.webContents.send('update-counter', 1);  // 渲染进程（通过预加载脚本监听）  
window.electronAPI.onUpdateCounter((value) => {  console.log('计数更新:', value);  
});  // 预加载脚本注册监听器  
onUpdateCounter: (callback) => {  ipcRenderer.on('update-counter', (event, value) => callback(value));  
}  

注意：需通过 webContents 指定目标窗口。

4. 同步通信（谨慎使用）

场景：极少需阻塞渲染进程的场景（如小型配置读取）。

// 渲染进程  
const reply = ipcRenderer.sendSync('sync-message', 'ping');  // 主进程  
ipcMain.on('sync-message', (event, arg) => {  event.returnValue = 'pong';  
});  

风险：阻塞渲染线程导致页面卡顿。

---

二、安全与架构最佳实践

1. 启用上下文隔离（Context Isolation）

必要性：防止渲染进程直接访问Node.js API，减少攻击面。

// 创建窗口时配置  
new BrowserWindow({  webPreferences: {  contextIsolation: true, // 默认启用  preload: path.join(__dirname, 'preload.js')  }  
});  

预加载脚本作用：唯一安全桥接，仅暴露必要API。

2. 禁用Node.js集成

webPreferences: {  nodeIntegration: false // 禁止渲染进程直接调用Node模块  
}  

3. IPC通信数据验证

原则：主进程始终校验传入数据。

ipcMain.handle('write-file', (event, { path, content }) => {  if (typeof path !== 'string' || !isValidPath(path)) {  throw new Error('非法路径');  }  // 执行写入...  
});  

---

三、性能优化进阶技巧

1. 大型数据传输优化

• 避免JSON序列化：改用 ArrayBuffer 或 Stream。

// 主进程发送文件流  
const readStream = fs.createReadStream('large-video.mp4');  
mainWindow.webContents.send('video-stream', readStream);  

• 共享内存：使用 SharedArrayBuffer（需配置CSP策略）。

2. 减少高频IPC调用

批处理示例：合并渲染进程的多次状态更新请求。

// 渲染进程  
let batchData = [];  
setInterval(() => {  if (batchData.length > 0) {  ipcRenderer.send('batch-update', batchData);  batchData = [];  }  
}, 100);  

3. 计算密集型任务迁移

• 方案1：主进程使用 Worker线程（worker_threads模块）。
• 方案2：创建隐藏渲染进程作为计算池。

---

四、常见陷阱与调试

1. 事件监听泄漏
   • 在Vue/React组件卸载时移除监听：

     useEffect(() => {  ipcRenderer.on('event', handler);  return () => ipcRenderer.off('event', handler);  
     }, []);  
     

2. IPC通道命名冲突
   • 前缀规范：module:action（如 fs:read-file）。
3. 序列化限制
   • 不可传输函数、DOM元素，复杂对象需手动序列化。