electron通信方式有哪些？

---

一、Electron 进程模型先捋清（通信前提）

Electron 本质是 多进程架构：

• 主进程（Main Process）

  • Node 环境
  • 负责窗口、系统能力、原生 API

• 渲染进程（Renderer Process）

  • 浏览器环境（可选 Node）
  • 负责 UI（React / Vue）

👉 进程隔离 → 必须通信

---

二、Electron 通信方式总览（面试必背）

通信方式	适用场景	是否推荐
ipcMain / ipcRenderer	主进程 ↔ 渲染进程	⭐⭐⭐⭐⭐
preload + contextBridge	安全通信	⭐⭐⭐⭐⭐
webContents.send	主 → 指定渲染	⭐⭐⭐⭐
BrowserWindow.webContents	主控渲染	⭐⭐⭐
MessageChannelMain	多窗口/高并发	⭐⭐⭐
remote（已废弃）	早期同步调用	❌
localStorage / IndexedDB	同窗口共享	⭐⭐
WebSocket / HTTP	多实例/跨进程	⭐⭐⭐

---

三、ipc 通信（你问的重点）

1️⃣ ipcRenderer → ipcMain（渲染 → 主）

🔹 ipcRenderer.send（异步，无返回）

// renderer
ipcRenderer.send('open-file', { type: 'txt' })

// main
ipcMain.on('open-file', (event, args) => {
  console.log(args)
})

✅ 特点：

• 单向
• 不关心返回值
• 常用于 通知、触发动作

---

🔹 ipcRenderer.invoke（异步 + 有返回，⭐推荐）

// renderer
const result = await ipcRenderer.invoke('get-version')

// main
ipcMain.handle('get-version', async () => {
  return app.getVersion()
})

✅ 特点：

• Promise 风格
• 支持 async / await
• 最推荐用法

📌 Electron 官方现在主推这个

---

2️⃣ ipcMain → ipcRenderer（主 → 渲染）

🔹 webContents.send

// main
mainWindow.webContents.send('update-progress', 50)

// renderer
ipcRenderer.on('update-progress', (_, percent) => {
  console.log(percent)
})

✅ 场景：

• 主进程主动推送
• 下载进度 / 系统事件

---

3️⃣ ipcRenderer.on（监听）

ipcRenderer.on('channel', (event, data) => {})

⚠️ 注意：

• 页面销毁要 removeListener
• 否则 内存泄漏

---

四、preload + contextBridge（安全通信，必会）

为什么要 preload？

• 避免 nodeIntegration: true
• 防 XSS 直接拿 Node 权限

preload.js

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  getVersion: () => ipcRenderer.invoke('get-version'),
  onUpdate: (cb) => ipcRenderer.on('update', cb)
})

renderer

window.electronAPI.getVersion()

✅ 优点：

• 安全
• 可控
• 官方推荐

---

五、ipc 的完整分类总结（你要的“ipc 都有哪些”）

📌 ipcRenderer 提供的方法

• send(channel, ...args)
• sendSync(channel, ...args) ❌（不推荐）
• invoke(channel, ...args) ⭐
• on(channel, listener)
• once(channel, listener)
• removeListener
• removeAllListeners

---

📌 ipcMain 提供的方法

• on(channel, listener)
• once(channel, listener)
• handle(channel, handler) ⭐
• removeHandler(channel)

---

六、其他 Electron 通信方式（扩展）

1️⃣ MessageChannelMain（多窗口通信）

const { port1, port2 } = new MessageChannelMain()

适合：

• 多窗口
• 大数据传输
• 解耦 ipc channel

---

2️⃣ 渲染进程之间通信

❌ 不能直接通信

常见做法：

• 渲染 A → 主 → 渲染 B
• MessageChannelMain

---

3️⃣ Web 技术通信

• WebSocket
• HTTP
• BroadcastChannel（同源）

适合：

• 多实例
• 多 Electron App

---

七、面试高频“加分点”

你可以这样说 👇：

“现在 Electron 官方推荐用 ipcRenderer.invoke + ipcMain.handle，
配合 preload + contextBridge 做安全通信，
避免开启 nodeIntegration 和 remote。”

面试官基本就点头了 👍

---

八、给你的实战建议（结合你前端经验）

• 业务调用：invoke / handle
• 事件通知：send / on
• 统一封装：所有 ipc 放 preload
• 禁用 remote

---