|
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>
|