electron通信方式有哪些？

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

Electron 本质是多进程架构：

• 主进程（Main Process）

  • Node 环境

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

• 渲染进程（Renderer Process）

  • 浏览器环境（可选 Node）

  • 负责 UI（React / Vue）

👉进程隔离 → 必须通信

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

三、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