[Electron]中IPC进程间通信

Electron中IPC

进程间通信 (IPC) 是在 Electron 中构建功能丰富的桌面应用程序的关键部分之一。在 Electron 中，进程使用 ipcMain 和 ipcRenderer 模块，通过开发人员定义的“通道”传递消息来进行通信。

本文介绍以下几个方面：

• 1-渲染进程到主进程（单项）

ipcRender.send()

• 2-主进程到渲染进程（单项）

WebContents.send()

• 3-渲染进程到到主进程（双向）

ipcRender.invoke(渲染进程)
ipcMain.handle（主进程）

1.渲染进程到主进程

• 渲染进程通过ipcRender.send()API发送消息

• 主进程通过ipcMain.on()API接受信息

2.主进程到渲染进程

• 主进程通过WebContents.send()发送数据

• 渲染进程通过ipcRender.on()获取数据

3.渲染进程到主进程（双向）

• 渲染进程通过invoke调用API

• 主进程通过handle处理API

示例

功能：

• 渲染进程发送111到主进程

• 主进程发送222到渲染进程

• 渲染进程invoke主进程

// main.js
const { app, BrowserWindow,ipcMain } = require("electron")
const path = require("path")
var id = "";
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        show: false,
        webPreferences:{
            preload:path.join(__dirname,"./preload.js")
        }
    })
    win.loadFile("./index.html")
    win.show()
    id = win.id
}
​
app.whenReady().then(() => {
    createWindow()
})
​
ipcMain.on("messageToMain",(event,text)=>{
    // ipcMain.on 来接收渲染进程发送的数据
    console.log("主进程从渲染进程接收到的数据："+text);
    // 获取当前窗口
    // BrowserWindow.webContents.send 发送数据
   BrowserWindow.fromId(id).webContents.send("messageFromMain","222")
})
​
// ipcMain.handle 返回invoke调用
ipcMain.handle("getData",()=>{
    return "333"
})
​
​
app.on("window-all-closed", () => {
    app.quit()
})

// preload.js
const { contextBridge, ipcRenderer } = require("electron")
contextBridge.exposeInMainWorld("electronIpc", {
    // 预加载脚本暴露 ipcRenderer.send
    send: (text) => { ipcRenderer.send('messageToMain', text) },
    // 预加载脚本暴露 ipcRenderer.on
    onGet: (callback) => {
        ipcRenderer.on("messageFromMain", (event, text) => {
            callback(text)
        })
    },
    // 预加载脚本暴露 ipcRenderer.invoke
    getData: () => { return ipcRenderer.invoke("getData") }
})

    
    
    


    
渲染进程到主进程（单向）
    

        渲染进程发送到主进程
    
    

        
    
    

    

    
收到主进程发送到渲染进程的消息：
    

        
    
    

    

        渲染进程invoke主进程
    
    

        
    
     

// index.js
window.onload = () => {
    var btnToMain = document.getElementById("btnToMain");
    btnToMain.addEventListener("click", () => {
        var sendText = document.getElementById("sendText").value;
        window.electronIpc.send(sendText)
    })
​
    window.electronIpc.onGet((text) => {
        var messageFromMain = document.getElementById("messageFromMain");
        messageFromMain.value = text;
    })
​
    var btnInvoke = document.getElementById("btnInvoke");
    btnInvoke.addEventListener("click",async ()=>{
        var getData = await window.electronIpc.getData();
        var messageInvokeMain = document.getElementById("messageInvokeMain");
        messageInvokeMain.value = getData;
    })
}

效果