Hello , 大家好，今天通过一个示例说明一下Electron 进程间通信（IPC），说明主进程与渲染器进程之间是如何通信的及通信流程是什么样的。

1. 目录结构及说明

--node_modules   
--index.html                    ----->应用程序界面
--main.js                       ----->Electron主进程
--package.json
--package-lock.json
--preload.js                    ----->预加载脚本

2.示例说明

本示例主要实现以下功能：

1. 渲染器进程向主进程发送数据：应用程序页面(index.html)通过预加载脚本(preload.js)向主进程(main.js)发送数据，并从主进程返回数据。
2. 主进程向渲染器进程发送数据：主进程(main.js)通过预加载脚本(preload.js)向应用程序页面(index.html)定时(每一秒发送一次当前时间)发送数据。

3. index.html

    
    
    
    



    当前时间：
    
    请输入：发送数据并返回数据只发送数据
    接收的内容：
    
    

4. preload.js

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

contextBridge.exposeInMainWorld('eIPC', {
    /**
     * 发送数据并返回数据
     * @param {*} data 发送的数据
     * @returns 
     */
    async sendData(data) {
        return await ipcRenderer.invoke('send-data', data);
    },

    /**
     * 发送数据不等待返回值
     */
    sendDataNotWaitReturn: (data) => { ipcRenderer.send('send-data-only', data) },

    /**
     * 监听获取最新的时间
     * @param {*} callback
     */
    onNewDate: (callback) => { ipcRenderer.on('new-date', callback) },
})

5. main.js

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
let win;
const createWindow = () => {
    win = new BrowserWindow({
        width: 1000,
        height: 1000,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    })
    win.maximize();
    win.webContents.openDevTools();
    win.loadFile('index.html')
}
app.whenReady().then(() => {
    createWindow()
})

/**
 * 接收来自渲染器进程的数据，并向渲染器进程返回数据
 */
ipcMain.handle('send-data', (event, ...args) => {
    console.log(args)
    return `你好，我是主进程，我于【${new Date()}】接收到你发来的数据【${args[0]}】`;
})

/**
 * 只接收来自渲染器进程的数据，不返回数据，在控制台打印
 */
ipcMain.on('send-data-only', (event, ...args) => {
    //控制台打印数据
    console.log(`主进程收到数据【${args[0]}】`)
})

/**
 * 每秒向渲染器发送一次数据
 */
setInterval(() => {
    win.webContents.send('new-date', new Date());
}, 1000);

下面详细说一下数据传输流程

6.渲染器进程向主进程发送数据并接收数据流程

1. index.html中点击按钮【发送数据并返回数据】触发事件

// 发送数据并接收数据
function sendData() {
    //此方法中调用预加载脚本的eIPC.sendData(mInputValue)方法传入数据
    let mInputValue = document.getElementById("mInput").value;
    console.log(mInputValue);
    window.eIPC.sendData(mInputValue).then((value) => {
        //接收数据
        let mRecviceData = document.getElementById("mRecviceData");
        mRecviceData.innerHTML = value;
    })
}

2. 调用预加载脚本preload.js方法。

async sendData(data) {
    //通过ipcRenderer.invoke('send-data', data)这个方法会向主进程发送数据
    return await ipcRenderer.invoke('send-data', data);
}

3. 主进程main.js设置监听器接收数据。

ipcMain.handle('send-data', (event, ...args) => {
    console.log(args)
    //return数据就会直接返回到index.html页面上了
    return `你好，我是主进程，我于【${new Date()}】接收到你发来的数据【${args[0]}】`;
})

6.主进程向渲染器进程发送数据

1. 主进程main.js定时发送数据

setInterval(() => {
    //向页面发送数据
    win.webContents.send('new-date', new Date());
}, 1000);

2. 预加载脚本preload.js设置监听方法

//ipcRenderer.on('new-date', callback) 通过此方法可以接收到主进程的数据
// callback 会传入收到的数据
onNewDate: (callback) => { ipcRenderer.on('new-date', callback) },

3. 页面index.html接收数据

window.eIPC.onNewDate((_event, value) => {
    mDate.innerHTML = value;
})

以上就是主进程与渲染器进程双向通信的示例及说明。