Electron进程间通信

June 1, 2023

IPC 信道

在 Electron 中，进程使用 Electron 提供的 ipcMain 和 ipcRenderer 模块进行通信。
这些通道是任意（您可以随意命名它们）和双向（您可以在两个模块中使用相同的通道名称）的。

显然：ipcMain 在主线程使用，ipcRenderer 在渲染器线程（preload 线程）使用

Preload 脚本
预加载（preload）脚本包含了那些执行于渲染器进程中，且先于网页内容开始加载的代码。
这些脚本虽运行于渲染器的环境中，却因能访问 Node.js API 而拥有了更多的权限。
预加载脚本可以在 BrowserWindow 构造方法中的 webPreferences 选项里被附加到主进程。
预加载脚本使用 Electron 提供的 contextBridge 模块从主线程向渲染线程的 Window 实例暴露接口

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

ipcMain
IpcMainEvent Object extends Event

main.js

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");

function createWindow() {
    const mainWindow = new BrowserWindow({
        webPreferences: {
            preload: path.join(__dirname, "preload.js"),
        },
    });

    // 在主线程中使用 ipcMain 模块
    // 主线程监听信道（单向，仅监听事件，无法返回值）
    // on(channel: string, listener: (event: IpcMainEvent, ...args: any[]) => void): this;
    ipcMain.on("set-title", (event, title) => {
        const webContents = event.sender;
        const win = BrowserWindow.fromWebContents(webContents);
        win.setTitle(title);
    });

    mainWindow.loadFile("index.html");
}

// 下面是样板代码，忽略
app.whenReady().then(() => {
    createWindow();

    app.on("activate", function () {
        if (BrowserWindow.getAllWindows().length === 0) createWindow();
    });
});

app.on("window-all-closed", function () {
    if (process.platform !== "darwin") app.quit();
});

ipcRenderer

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
    // 在 preload 脚本中使用 ipcRenderer 模块
    // send(channel: string, ...args: any[]): void;
    setTitle: (title) => ipcRenderer.send("set-title", title),
});

安全警告
出于安全原因，我们不会直接暴露整个 ipcRenderer.send API。确保尽可能限制渲染器对 Electron API 的访问。

renderer.js

const setButton = document.getElementById("btn");
const titleInput = document.getElementById("title");
setButton.addEventListener("click", () => {
    const title = titleInput.value;
    window.electronAPI.setTitle(title);
});

渲染器进程到主进程（双向）

下面将省略样板代码

main.js

const { app, BrowserWindow, ipcMain, dialog } = require("electron");
const path = require("path");

app.whenReady().then(() => {
    // 主线程处理信道（双向，可返回值）
    // handle(channel: string, listener: (event: IpcMainInvokeEvent, ...args: any[]) => (Promise<void>) | (any)): void;
    ipcMain.handle("dialog:openFile", async () => {
        const { canceled, filePaths } = await dialog.showOpenDialog();
        if (!canceled) {
            return filePaths[0];
        }
    });

    const mainWindow = new BrowserWindow({ webPreferences: { preload: path.join(__dirname, "preload.js") } });
    mainWindow.loadFile("index.html");
});

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
    // invoke(channel: string, ...args: any[]): Promise<any>
    openFile: () => ipcRenderer.invoke("dialog:openFile"), // => Promise<string>
});

renderer.js

const btn = document.getElementById("btn");
const filePathElement = document.getElementById("filePath");

btn.addEventListener("click", async () => {
    const filePath = await window.electronAPI.openFile();
    filePathElement.innerText = filePath;
});

主进程到渲染器进程

将消息从主进程发送到渲染器进程时，需要指定是哪一个渲染器接收消息。
消息需要通过其 WebContents 实例发送到渲染器进程。
此 WebContents 实例包含一个 send 方法，其使用方式与 ipcRenderer.send 相同。

main.js

const { app, BrowserWindow, Menu, ipcMain } = require("electron");
const path = require("path");

app.whenReady().then(() => {
    ipcMain.on("counter-value", (_event, value) => {
        console.log(value); // 主线程是 Node.js 环境，故将打印在 Node.js 控制台
    });

    Menu.setApplicationMenu(
        Menu.buildFromTemplate([
            {
                label: app.name,
                submenu: [
                    {
                        click: () => mainWindow.webContents.send("update-counter", 1),
                        label: "Increment",
                    },
                    {
                        click: () => mainWindow.webContents.send("update-counter", -1),
                        label: "Decrement",
                    },
                ],
            },
        ]),
    );

    const mainWindow = new BrowserWindow({ webPreferences: { preload: path.join(__dirname, "preload.js") } });
    mainWindow.loadFile("index.html");
    mainWindow.webContents.openDevTools();
});

preload.js

const { contextBridge, ipcRenderer } = require("electron");

contextBridge.exposeInMainWorld("electronAPI", {
    handleCounter: (callback) => ipcRenderer.on("update-counter", callback),
});

renderer.js

const counter = document.getElementById("counter");

window.electronAPI.handleCounter((event, value) => {
    const oldValue = Number(counter.innerText);
    const newValue = oldValue + value;
    counter.innerText = newValue;
    event.sender.send("counter-value", newValue);
});

←Back to home