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

electron中主进程和渲染进程通信3种方式【详细教程】

article 2025/2/11 10:10:09

1. 使用ipcMain和ipcRenderer
2. 实验步骤
3. 其他方法

1. 使用ipcMain和ipcRenderer

我们知道electron应用中main.js可以理解成主进程，index.html可以理解成渲染进程。两个进程间是通过 ipcMain 和 ipcRenderer 实现进程通信的。

文章配图

2. 实验步骤

创建项目结构

main.js：主进程脚本
preload.js：预加载脚本
index.html：渲染器进程的 HTML 文件
renderer.js：渲染器进程的 JavaScript 文件

编写主进程代码（main.js）
在主进程中，使用 ipcMain 模块监听来自渲染器进程的消息，并进行处理。以下是一个简单的示例代码：


const { app, BrowserWindow, ipcMain } = require('electron');

const path = require('node:path');



function createWindow() {

  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
    },
  });


  mainWindow.loadFile('index.html');


  // 监听来自渲染器进程的消息
  ipcMain.on('message-from-renderer', (event, message) => {
    console.log('主进程收到消息:', message);
    event.reply('reply-from-main', 'Hello from main process!');
  });
}



app.whenReady().then(createWindow);



app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') app.quit();
});

编写预加载脚本（preload.js）
使用 contextBridge 和 ipcRenderer 模块，将特定的 IPC 功能暴露给渲染器进程。这可以确保安全性和隔离性：


const { contextBridge, ipcRenderer } = require('electron');



contextBridge.exposeInMainWorld('api', {

  sendMessage: (message) => ipcRenderer.send('message-from-renderer', message),
  onReply: (callback) => ipcRenderer.on('reply-from-main', callback),
});

编写渲染器进程代码（index.html 和 renderer.js）
在渲染器进程中，通过 preload.js 暴露的 API 发送消息到主进程，并接收回复。

index.html


<!DOCTYPE html>

<html>

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>IPC Communication</title>
  </head>
  <body>
    <h1>IPC Communication Example</h1>
    <button id="sendButton">Send Message to Main Process</button>
    <p id="replyMessage"></p>
    <script src="./renderer.js"></script>
  </body>
</html>

renderer.js


document.getElementById('sendButton').addEventListener('click', () => {

  window.api.sendMessage('Hello from renderer process!');
});



window.api.onReply((event, message) => {

  document.getElementById('replyMessage').innerText = `Reply from main process: ${message}`;
});