[Electron]中IPC进程间通信

嗓子疼谁心疼

已于 2024-03-06 09:28:46 修改

阅读量1.3k

点赞数 52

分类专栏： Electron 文章标签：前端 javascript electron

于 2024-03-06 00:15:00 首次发布

本文链接：https://blog.csdn.net/qq_29069649/article/details/136481144

版权

Electron 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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") }
})

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron的ipc通讯</title>
</head>
<body>
    <h2>渲染进程到主进程（单向）</h2>
    <div>
        <button id="btnToMain">渲染进程发送到主进程</button>
    </div>
    <div>
        <input type="text" id="sendText">
    </div>
    <br>
    <br>
    <div>收到主进程发送到渲染进程的消息：</div>
    <div>
        <input type="text" id="messageFromMain" style="width: 300px;">
    </div>
    <br>
    <div>
        <button id="btnInvoke">渲染进程invoke主进程</button>
    </div>
    <div>
        <input type="text" id="messageInvokeMain" style="width: 300px;">
    </div>
     <script src="./index.js"></script>
</body>
</html>

// 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;
    })
}