Electron基础(二) 进程通信的ipcMain、contextBridge、ipcRenderer
1.什么是ipcMain
在 Electron 中，ipcMain是一个非常重要的模块，它负责处理从渲染器进程（即 Web 页面）发送到主进程（即 Electron 应用的后台进程）的进程间通信（IPC，Inter-Process Communication）消息。简而言之，ipcMain是主进程中用于监听和处理来自渲染器进程的 IPC 消息的一个接口。
Electron 应用的架构通常分为两部分：主进程和渲染器进程。主进程负责创建和管理窗口、处理系统事件、调用系统 API 等，而渲染器进程则负责渲染 HTML、CSS 和 JavaScript，与用户进行交互。由于安全原因，Electron 限制了渲染器进程直接访问系统资源的能力，因此，当渲染器进程需要与主进程通信以执行某些任务（如打开文件对话框、最小化窗口、关闭应用等）时，就需要使用 IPC 机制。
// 主进程 main.js 中
const { app, BrowserWindow, ipcMain } = require('electron');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 注意：出于安全考虑，通常不建议启用 nodeIntegration
contextIsolation: false, // 当启用 nodeIntegration 时，通常也需要设置 contextIsolation 为 false（但不推荐这样做）
enableRemoteModule: true // 在新版本的 Electron 中，enableRemoteModule 默认为 false，并且不推荐使用
// 更好的做法是使用 contextBridge 和 preload 脚本来安全地暴露 API
}
});
// 监听渲染器进程发送的 'ping' 消息
ipcMain.on('ping', (event, arg) => {
console.log(`Received ping from renderer process: ${arg}`);
// 回复渲染器进程
event.reply('pong', `Pong from main process: ${arg}`);
});
win.loadFile('index.html');
}
app.whenReady().then(createWindow);// 渲染进程 preload.js预加载脚本，暴露 API
const { ipcRenderer } = require('electron');
// 发送 'ping' 消息到主进程
ipcRenderer.send('ping', 'Hello from renderer');
// 监听主进程的回复
ipcRenderer.on('pong', (event, arg) => {
console.log(`Received pong from main process: ${arg}`);
});2.什么是contextBridge
contextBridge在Electron框架中扮演着至关重要的角色，其主要作用是在渲染器进程（通常是Web页面）和主进程之间安全地暴露API。具体来说，contextBridge通过创建一个单向的、只能从主进程到渲染器进程的桥接，实现了两个进程之间的安全通信。以下是contextBridge作用的详细解析：
1. 安全通信
- 单向桥接：contextBridge确保了API的暴露是单向的，即从主进程到渲染器进程，从而避免了渲染器进程直接访问Node.js的API，这有助于防止潜在的安全问题。
- 隔离上下文：Electron的contextIsolation特性（当启用时）将渲染器进程的上下文与Node.js环境隔离开来，以防止恶意脚本访问敏感API。contextBridge在这种隔离的上下文中提供了一个安全的桥梁，允许开发者在保持隔离的同时，将必要的API暴露给渲染器进程。
2. API暴露
- 暴露有限API：开发者可以通过contextBridge
.exposeInMainWorld方法将特定的方法和属性从主进程暴露到渲染器进程的window对象上。这样，渲染器进程中的JavaScript代码就可以安全地调用这些API，而无需直接访问Node.js环境。 - 参数检查和过滤：在暴露API时，开发者可以在exposeInMainWorld的回调函数中添加参数检查和过滤逻辑，以确保传递给主进程的数据是合法和安全的。
3. 示例用法
// 在 preload.js 中
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
send: (channel, data) => {
// 在这里可以进行一些参数检查
ipcRenderer.send(channel, data);
},
invoke: async (channel, data) => {
// 在这里可以进行一些参数检查
return await ipcRenderer.invoke(channel, data);
}
});
// 在渲染器进程的 JavaScript 中
window.electronAPI.send('some-channel', 'some-data');
const result = await window.electronAPI.invoke('some-channel', 'some-data');3.什么是ipcRenderer
ipcRenderer 是 Electron 框架中用于渲染器进程（通常是 Web 页面）与主进程之间进行进程间通信（IPC, Inter-Process Communication）的模块。它允许渲染器进程发送同步或异步消息到主进程，并接收主进程的响应。
在 Electron 应用中，主进程负责控制整个应用的生命周期，包括窗口的创建和管理、系统事件的监听等，而渲染器进程则负责页面的渲染和与用户的交互。由于安全原因，渲染器进程不能直接访问系统资源或执行某些敏感操作，这些操作需要通过 IPC 机制与主进程通信来完成。
ipcRenderer模块提供了一系列的方法来实现这一通信机制，包括：(
- ipcRenderer.send(channel
,...args)：发送一个同步消息到主进程，并通过 channel 标识消息的类型，...args 是传递给主进程的参数。这个方法不会等待主进程的响应。 - ipcRenderer
.sendSync(channel,...args)：发送一个同步消息到主进程，并等待主进程的响应。这个方法会阻塞渲染器进程的 JavaScript 线程，直到收到主进程的响应或发生错误。 - ipcRenderer
.invoke(channel,...args)：发送一个异步消息到主进程，并返回一个 Promise。当主进程处理完消息并返回结果时，Promise 会被解析。这个方法提供了一种更现代、基于 Promise 的方式来处理异步 IPC 调用。 - ipcRenderer.on(channel
,listener)：监听指定 channel 上的消息。当主进程通过相同的 channel发送消息到渲染器进程时，会触发相应的监听器函数。 - ipcRenderer
.removeListener(channel,listener)：移除之前通过 ipcRenderer.on添加的监听器。
在渲染器进程中，你可以通过 require('electron').ipcRenderer 来访问 ipcRenderer 模块。然后，你可以使用上述方法来与主进程进行通信。
需要注意的是，由于 ipcRenderer 允许渲染器进程与主进程进行通信，因此在使用时需要特别小心，以避免潜在的安全风险。确保你只对可信的源暴露 IPC 通道，并在接收消息时进行适当的验证和清理。
此外，从 Electron 5 开始，为了提高安全性，Electron 引入了 contextIsolation和 preload 脚本的概念。启用 contextIsolation 后，渲染器进程的上下文将被隔离，无法直接访问 Node.js 的 API。相反，你应该使用 preload 脚本作为桥梁，在其中使用 contextBridge 将安全的 API 暴露给渲染器进程。这样，ipcRenderer 就成为了在 preload脚本中安全暴露给渲染器进程的重要工具。