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

在 Electron 中,主进程和渲染进程之间的通信主要通过 IPC(进程间通信)机制实现。以下是几种常见的通信方式:

1. 渲染进程向主进程发送消息(单向)

渲染进程可以通过 ipcRenderer.send 向主进程发送消息,主进程通过 ipcMain.on 监听消息。

主进程代码

javascript 复制代码
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

javascript 复制代码
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.send('message-from-renderer', message),
});

渲染进程代码(HTML/JS)

html 复制代码
<script>
  window.electronAPI.sendMessage('Hello from Renderer Process!');
</script>

2. 渲染进程向主进程发送消息并等待响应(双向)

从 Electron 7 开始,推荐使用 ipcRenderer.invokeipcMain.handle 进行双向通信。

主进程代码

javascript 复制代码
ipcMain.handle('dialog:openFile', async () => {
  const { canceled, filePaths } = await dialog.showOpenDialog();
  if (!canceled) {
    return filePaths[0];
  }
});

预加载脚本(preload.js

javascript 复制代码
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
});

渲染进程代码

javascript 复制代码
window.electronAPI.openFile().then((filePath) => {
  console.log('Selected file:', filePath);
});

3. 主进程向渲染进程发送消息

主进程可以通过 webContents.send 向特定的渲染进程发送消息。

主进程代码

javascript 复制代码
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

javascript 复制代码
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  onUpdateCounter: (callback) => ipcRenderer.on('update-counter', (_event, value) => callback(value)),
});

渲染进程代码

javascript 复制代码
window.electronAPI.onUpdateCounter((value) => {
  const counter = document.getElementById('counter');
  const newValue = parseInt(counter.innerText, 10) + value;
  counter.innerText = newValue;
});

4. 渲染进程之间的通信

渲染进程之间不能直接通信,但可以通过主进程作为中介。例如,一个渲染进程向主进程发送消息,主进程再将消息转发给另一个渲染进程。

主进程代码

javascript 复制代码
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);
  }
});

渲染进程代码(发送消息)

javascript 复制代码
window.electronAPI.sendMessage('Hello from Renderer 1!');

渲染进程代码(接收消息)

javascript 复制代码
window.electronAPI.onMessage((message) => {
  console.log('Received message from Renderer 1:', message);
});

注意事项

  • 安全性 :默认情况下,渲染进程无法直接访问 Node.js 和 Electron 模块。需要通过预加载脚本(preload.js)和 contextBridge 暴露必要的 API。
  • 性能 :尽量避免使用同步通信(如 ipcRenderer.sendSync),因为它会阻塞渲染进程。
  • 上下文隔离 :启用上下文隔离(contextIsolation: true)可以提高应用的安全性。

通过这些方法,可以在 Electron 应用中实现主进程和渲染进程之间的高效通信。

相关推荐
邢同学爱折腾2 天前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron
vvilkim2 天前
使用Electron开发跨平台本地文件管理器:从入门到实践
前端·javascript·electron
musk12122 天前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
vvilkim2 天前
Electron 安全最佳实践:构建安全的桌面应用
javascript·安全·electron
vvilkim3 天前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 天前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
Cacciatore->4 天前
Electron 快速上手
javascript·arcgis·electron
vvilkim4 天前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
ZJ_.13 天前
Electron自动更新详解—包教会版
linux·前端·javascript·windows·electron·前端框架·node.js
£小羽毛14 天前
Electron(01)入门与实战:从环境搭建到打包发布
前端·javascript·electron