Electron发送和接收数据用到的是 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
Hello World!
Hello World!
We are using Node.js ,
Chromium ,
and Electron .
主进程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:
Hello World!
Hello World!
We are using Node.js ,
Chromium ,
and Electron .