在 Electron 中，主进程和渲染进程之间的通信主要通过 IPC（进程间通信）机制实现。以下是几种常见的通信方式：
1. 渲染进程向主进程发送消息（单向）
渲染进程可以通过 ipcRenderer.send 向主进程发送消息，主进程通过 ipcMain.on 监听消息。
主进程代码
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('node:path');function createWindow() {const mainWindow = new BrowserWindow({webPreferences: {preload: path.join(__dirname, 'preload.js'),},});mainWindow.loadFile('index.html');
}app.whenReady().then(createWindow);ipcMain.on('message-from-renderer', (event, arg) => {console.log('Received message:', arg);// 可以通过 event.reply 向渲染进程回复event.reply('message-from-main', `Received your message: ${arg}`);
});
预加载脚本（preload.js）
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {sendMessage: (message) => ipcRenderer.send('message-from-renderer', message),
});
渲染进程代码（HTML/JS）
<script>window.electronAPI.sendMessage('Hello from Renderer Process!');
</script>
2. 渲染进程向主进程发送消息并等待响应（双向）
从 Electron 7 开始，推荐使用 ipcRenderer.invoke 和 ipcMain.handle 进行双向通信。
主进程代码
ipcMain.handle('dialog:openFile', async () => {const { canceled, filePaths } = await dialog.showOpenDialog();if (!canceled) {return filePaths[0];}
});
预加载脚本（preload.js）
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {openFile: () => ipcRenderer.invoke('dialog:openFile'),
});
渲染进程代码
window.electronAPI.openFile().then((filePath) => {console.log('Selected file:', filePath);
});
3. 主进程向渲染进程发送消息
主进程可以通过 webContents.send 向特定的渲染进程发送消息。
主进程代码
const { app, BrowserWindow, Menu } = require('electron');
const path = require('node:path');function createWindow() {const mainWindow = new BrowserWindow({webPreferences: {preload: path.join(__dirname, 'preload.js'),},});mainWindow.loadFile('index.html');const menu = Menu.buildFromTemplate([{label: app.name,submenu: [{click: () => mainWindow.webContents.send('update-counter', 1),label: 'Increment',},{click: () => mainWindow.webContents.send('update-counter', -1),label: 'Decrement',},],},]);Menu.setApplicationMenu(menu);
}app.whenReady().then(createWindow);
预加载脚本（preload.js）
const { contextBridge, ipcRenderer } = require('electron');contextBridge.exposeInMainWorld('electronAPI', {onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value)),
});
渲染进程代码
window.electronAPI.onUpdateCounter((value) => {const counter = document.getElementById('counter');const newValue = parseInt(counter.innerText, 10) + value;counter.innerText = newValue;
});
4. 渲染进程之间的通信
渲染进程之间不能直接通信，但可以通过主进程作为中介。例如，一个渲染进程向主进程发送消息，主进程再将消息转发给另一个渲染进程。
主进程代码
ipcMain.on('message-from-renderer1', (event, arg) => {// 转发消息到另一个渲染进程const otherWindow = BrowserWindow.getAllWindows().find((win) => win !== event.sender.window);if (otherWindow) {otherWindow.webContents.send('message-from-renderer1', arg);}
});
渲染进程代码（发送消息）
window.electronAPI.sendMessage('Hello from Renderer 1!');
渲染进程代码（接收消息）
window.electronAPI.onMessage((message) => {console.log('Received message from Renderer 1:', message);
});
注意事项
- 安全性：默认情况下，渲染进程无法直接访问 Node.js 和 Electron 模块。需要通过预加载脚本（
preload.js）和contextBridge暴露必要的 API。 - 性能：尽量避免使用同步通信（如
ipcRenderer.sendSync），因为它会阻塞渲染进程。 - 上下文隔离：启用上下文隔离（
contextIsolation: true）可以提高应用的安全性。
通过这些方法，可以在 Electron 应用中实现主进程和渲染进程之间的高效通信。
)
