Electron 的进程间通信（IPC）中，send、invoke 和 on记录 | 花花世界

在 Electron 的进程间通信（IPC）中，send、invoke 和 on 代表了三种完全不同的消息传输模式。你可以把 Electron 的架构想像成两台设备：

• 渲染进程（Renderer / 前端网页）：就像客户端。
• 主进程（Main / Node.js 后端）：就像服务器。

剖析

1. ipcRenderer.send —— 单向发信（发完即忘）

• 模式：单向通信（One-way）。
• 作用：渲染进程给主进程发送一条消息，不需要等待主进程的回复或结果。
• 生活类比：给别人寄一封明信片，发出去就不管了。

// preload.js 中定义
closeWindow: () => ipcRenderer.send('close-window')

// main.js 中监听并处理
ipcMain.on('close-window', () => {
  mainWindow.close(); // 主进程收到指令后直接关窗口，不需要给前端回传什么数据
});

2. ipcRenderer.invoke —— 双向请求（异步等待结果）

• 模式：双向通信（Two-way / Async Request-Response）。
• 作用：渲染进程向主进程发起请求，并等待主进程返回数据（基于 Promise，配合 async/await 使用）。
• 生活类比：打电话问朋友：“明天天气怎么样？”，朋友思考/查询后在电话里告诉你答案。

// preload.js 中定义
getAlwaysOnTop: () => ipcRenderer.invoke('get-always-on-top')

// main.js 中处理请求并 return 返回值
ipcMain.handle('get-always-on-top', async () => {
  return mainWindow.isAlwaysOnTop(); // 返回当前窗口是否置顶的状态 (true/false)
});

// index.html / renderer.js 中调用
async function checkState() {
  const isTop = await window.electronAPI.getAlwaysOnTop();
  console.log('当前是否置顶:', isTop);
}

3. ipcRenderer.on —— 被动监听（等待主进程推数据）

• 模式：事件监听（Event Listener / Push Notification）。

• 作用：在渲染进程中注册一个监听器。当主进程主动向渲染进程发送数据（通过 webContents.send）时，这里的回调函数会被触发。

• 生活类比：订阅报纸。你平时不用做什么，只要报社（主进程）一出新报纸，就会送到你的邮箱里。

// preload.js 中定义
onUpdateLED: (callback) => ipcRenderer.on('update-led', (_event, value) => callback(value))

// main.js 中主动推数据给前端（比如 HTTP 服务收到请求后）
mainWindow.webContents.send('update-led', '显示新数据');

// index.html / renderer.js 中接收推送
window.electronAPI.onUpdateLED((data) => {
  document.getElementById('display').innerText = data;
});