建站网站模板下载,企业公共服务平台网站建设方案,手机网站关键词快速排名,生产管理网站开发在 Electron 中#xff0c;主进程和渲染进程之间的通信主要通过 IPC#xff08;进程间通信#xff09;机制实现。以下是几种常见的通信方式#xff1a;
1. 渲染进程向主进程发送消息#xff08;单向#xff09;
渲染进程可以通过 ipcRenderer.send 向主进程发送消息主进程和渲染进程之间的通信主要通过 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
scriptwindow.electronAPI.sendMessage(Hello from Renderer Process!);
/script2. 渲染进程向主进程发送消息并等待响应双向
从 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 应用中实现主进程和渲染进程之间的高效通信。
