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

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