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