14290450.html

一、主進程和渲染進程

1.1 主進程和渲染進程的概念

在上手ipc通信之前，得對electron的進程模型有個基本的了解，electron中的進程大致可以分為主進程和渲染進程，主進程指的就是nodejs的進程，而渲染進程則可以簡單的理解為一個Chromium的web頁面。主進程，也就是nodejs進程只有一個，而渲染進程，也就是Chromium的web頁面則可以有多個，ipc通信就是在主進程和渲染進程之間通信。

1.2 主進程和渲染進程的環境區別

認為主進程的代碼是開發者自己寫的，就是普通的node程序，但是渲染進程有可能會加載網頁之類的，可能會執行第三方的js代碼，渲染進程的權限是被限制了的，所以某些敏感操作就需要渲染進程給主進程發消息，讓主進程去做，然后完事了再通知渲染進程。

在使用electron開發客戶端程序的時候，將其類比為web端的B/S架構，其渲染進程就是前端的頁面，是門面，而主進程則是服務器后台，負責處理一些與UI無關的業務邏輯，主進程和渲染進程不可避免的要進行一些數據、指令的交換，即這兩個進程之間要通信交換數據，這就是進程間通信，electron提供了ipc模塊用於在主進程和渲染進程之間通信。

二、主進程與渲染進程通信

2.1 渲染進程向主進程發送異步消息

渲染進程向主進程發送消息默認就是異步的，在渲染進程的html或者render.js中向主進程發送異步消息：

 
            const electron = require("electron");
// 第一個參數是約定的事件的名稱，主進程要監聽這個事件
// 第二個及之后的參數是要發送的具體的消息
electron.ipcRenderer.send("render-to-main-message", message); 
           

send方法至少需要兩個參數，第一個是事件名稱，在主線程中需要監聽此事件，然后是至少一個參數的事件參數，可以有多個，但是至少有一個。

在主線程main.js中接收事件：

 
            // 接收從渲染進程發送到主進程的消息
ipcMain.on("render-to-main-message", (event, message) => {
 
    // 在控制台上打印一下
    console.log(`receive message from render: ${message}`);
 
    // 回復消息
    event.reply("main-to-render-message", `來自主進程：我收到了你的消息“${message}”`);
}) 
           

使用 event.reply 在主進程中回復渲染進程發過來的消息，因為這個replay指定了一個事件名稱，因此在渲染進程render.js中也要監聽事件才能收到回復：

 
            // 接收主進程發來的消息
// 第一個參數是約定的事件的名稱
// 第二個參數是處理事件的callback
electron.ipcRenderer.on("main-to-render-message", (event, message) => {
    alert(message);
}); 
           

2.2 渲染進程向主進程發送同步消息

同步消息是渲染進程向主進程發送的，因為渲染進程頁面可以有多個，而主進程node進程只有一個，因此渲染進程可以等主進程，而主進程不能同步等渲染進程。

渲染進程向主進程發送同步消息，使用 electron.ipcRenderer.sendSync 方法，這個方法的返回值是從主進程中返回的，在渲染進程render.js中向主進程發送消息：

 
            const electron = require("electron");
// 發送同步消息
const replayMessage = electron.ipcRenderer.sendSync("render-to-main-message-sync", message);
alert(replayMessage); 
           

在主進程main.js中接收並回復渲染進程發過來的同步消息：

 
            // 接收同步消息
ipcMain.on("render-to-main-message-sync", (event, message) => {
 
    // 控制台打印一下知道來了
    console.log(`receive sync message from render: ${message}`);
 
    // 回復渲染進程的同步消息
    event.returnValue = `來自主進程：我收到了你的消息“${message}”`;
}) 
           

在主進程中對於同步消息和異步消息的接收沒有區別，只是回復同步消息的時候變成了：

event.returnValue = "要回復的消息內容"

2.3 主進程向渲染進程發送消息

渲染進程可以向主進程發送同步消息或者異步消息，但是主進程只能向渲染進程發送異步消息，比如下面是在主進程啟動后3秒向渲染進程發送一條消息：

 
            function createWindow() {
    const window = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })
 
    // 注意這個路徑是從項目根路徑開始的
    window.loadFile("example/use-ipc/index.html")
 
    setTimeout(() => {
        window.webContents.send("main-to-render-message", "啟動完成了");
    }, 3000)
 
} 
           

在渲染進程render.js中監聽此事件：

const electron = require("electron");
electron.ipcRenderer.on("main-to-render-message", (event, message) => {
    alert(message);
});

2.4 代碼及運行效果一覽

上面的三種發送方式都是只提取了部分代碼做展示，完整的例子代碼如下：

main.js：

 
            const {app, BrowserWindow, ipcMain} = require("electron")
 
function createWindow() {
    const window = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })
 
    // 注意這個路徑是從項目根路徑開始的
    window.loadFile("example/use-ipc/index.html")
 
    setTimeout(() => {
        window.webContents.send("main-to-render-message", "啟動完成了");
    }, 3000)
 
}
 
app.whenReady().then(createWindow)
 
app.on("window-all-closed", () => {
    if (process.platform !== "darwin") {
        app.quit()
    }
})
 
app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})
 
// 接收從渲染進程發送到主進程的消息
ipcMain.on("render-to-main-message", (event, message) => {
 
    // 在控制台上打印一下
    console.log(`receive message from render: ${message}`);
 
    // 回復消息
    event.reply("main-to-render-message", `來自主進程：我收到了你的消息“${message}”`);
})
 
// 接收同步消息
ipcMain.on("render-to-main-message-sync", (event, message) => {
 
    // 控制台打印一下知道來了
    console.log(`receive sync message from render: ${message}`);
 
    // 回復渲染進程的同步消息
    event.returnValue = `來自主進程：我收到了你的消息“${message}”`;
}) 
           

index.html文件（render.js沒有單獨提出來，render的js直接放到html中了）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IPC通信</title>
</head>
<body>
<h1>IPC通信</h1>
<input type="text" id="message">
<button onclick="sendMessageToMainProcess()">發送消息給主進程</button>
 
<script type="text/javascript">
    const electron = require("electron");
 
    // 接收主進程發來的消息
    // 第一個參數是約定的事件的名稱
    // 第二個參數是處理事件的callback
    electron.ipcRenderer.on("main-to-render-message", (event, message) => {
        alert(message);
    });
 
    // 向主進程發送消息
    function sendMessageToMainProcess() {
        const message = document.getElementById("message").value;
 
        // 第一個參數是約定的事件的名稱，主進程要監聽這個事件
        // 第二個及之后的參數是要發送的具體的消息
        electron.ipcRenderer.send("render-to-main-message", message);
 
        // 發送同步消息
        const replayMessage = electron.ipcRenderer.sendSync("render-to-main-message-sync", message);
        alert(replayMessage);
    }
</script>
</body>
</html>
效果：

本文所用Electron版本："electron": "^11.1.0"

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Electron筆記之進程間通信（ipc） WIndows進程通信（IPC）之管道通信 electron窗口間通信 golang通過named pipes實現IPC通信 Android進程間通信IPC c# 進程間通信 IPC 微服務的進程間通信(IPC) Windows進程間通信（IPC）之簡述 IPC（進程間通信）詳解 [轉]Android IPC進程通信——Messager方式