当前位置：首页 > news >正文

Electron主进程渲染进程间通信的方式

news 来源：原创 2025/4/28 9:17:18

在 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 应用中实现主进程和渲染进程之间的高效通信。