Electron发送和接收数据用到的是 ipcMain 和 ipcRenderer 两个对象：
ipcMain 是用在主进程中的；ipcRenderer 是用在渲染进程中的。
主进程用win.webContents.send或 event.reply()、event.sender.send()发送消息，用ipcMain.on监听消息；
渲染进程用ipcRenderer.send发送消息，用ipcRenderer.on监听消息。
一、渲染进程向主进程发送消息：
主进程：main.js
const {app,BrowserWindow,ipcMain} = require('electron')const path = require('path')function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true, // 不加，渲染进程会报错contextIsolation: false, // 为了安全性enableRemoteModule: true // 不加，渲染进程会报错}})win.loadFile('index.html')}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}})// 2、监听渲染进程发送过来消息ipcMain.on('asynchronous-message', function (event, arg) {console.log(arg); // prints "ping"// event.reply('sendToRender', "pong");event.sender.send('asynchronous-reply', 'pong');});
渲染进程：render.js
const {ipcRenderer} = require('electron');document.getElementById("sender").onclick = function () {// 1、向主进程发送消息ipcRenderer.send('asynchronous-message', 'ping');}// 3、监听主进程返回过来的消息ipcRenderer.on('asynchronous-reply', function (event, arg) {console.log("event:", event);console.log("arg:", arg);});
index.html
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Hello World!</title><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /></head><body><h1>Hello World!</h1><p>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</p><div><button id="sender">发送</button></div><script src="./render.js"></script></body></html>
二、主进程向渲染进程发送消息：
主进程main.js：
const {app,BrowserWindow,ipcMain} = require('electron')const path = require('path')function createWindow() {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true, // 不加，渲染进程会报错contextIsolation: false, // 为了安全性enableRemoteModule: true // 不加，渲染进程会报错}})// 1、主进程向渲染进程发送消息win.webContents.send('mainSendToRender', {code: '200', msg: '主进程向渲染进程发送消息'});win.loadFile('index.html')}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}})// 4、接收信息ipcMain.on('asynchronous-message', function (event, arg) {console.log(arg); // prints "ping"});
渲染进程render.js：
const {ipcRenderer} = require('electron');// 2、渲染进程监听消息ipcRenderer.on('mainSendToRender', function (event, arg) {console.log("event:", event);console.log("arg:", arg);// 3、渲染进程发送消息ipcRenderer.send('asynchronous-message', 'ping');});
index.html：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Hello World!</title><meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" /></head><body><h1>Hello World!</h1><p>We are using Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,and Electron <span id="electron-version"></span>.</p><div><button id="sender">发送</button></div><script src="./render.js"></script></body></html>
