使用Electron開發(fā)出來的桌面應(yīng)用都是多進(jìn)程的，其中包含了一個主進(jìn)程（Main）和至少一個渲染進(jìn)程（Renderer）。

主進(jìn)程控制整個應(yīng)用的生命周期，通過electron中的一些模塊與GUI交互，同時控制每一個渲染進(jìn)程。

渲染進(jìn)程會在BrowserWindow對象創(chuàng)建出的窗口中渲染出Web頁面，每個渲染頁面都運(yùn)行在獨(dú)立的進(jìn)程中。

主進(jìn)程與渲染進(jìn)程之間通信

ipc模塊 + window.webContents

ipc模塊包含ipcMain和 ipcRenderer兩個模塊，其中ipcMain在主進(jìn)程中使用，ipcRenderer在渲染進(jìn)程中使用，在使用之前，要使用require引入對應(yīng)的模塊。

ipc模塊中的方法：

• ipcMain.on(msg, () => {})：監(jiān)聽渲染進(jìn)程發(fā)送的msg消息，并做出響應(yīng)。
• ipcMain.once(msg, () => {})：監(jiān)聽渲染進(jìn)程發(fā)送的msg消息，并做出響應(yīng)，但是監(jiān)聽到一次msg事件后自動移除這個監(jiān)聽器。
• ipcRenderer.on(msg, () => {})：監(jiān)聽主進(jìn)程發(fā)送的msg消息，并做出響應(yīng)。
• ipcRenderer.once(msg, () => {})：監(jiān)聽主進(jìn)程發(fā)送的msg消息，并做出響應(yīng)，但是監(jiān)聽到一次msg事件后自動移除這個監(jiān)聽器。
• ipcRenderer.send(msg, data)：監(jiān)聽渲染進(jìn)程向主進(jìn)程發(fā)送msg異步消息，并攜帶參數(shù)data。
• ipcRenderer.sendSync(msg, data)：監(jiān)聽渲染進(jìn)程向主進(jìn)程發(fā)送msg同步消息，并攜帶參數(shù)
• ipcRenderer.sentTo(webContentId, msg, data)：監(jiān)聽渲染進(jìn)程向具有webContentId的窗口發(fā)送消息
• ipcRenderer.sendToHost(msg, data)：監(jiān)聽渲染進(jìn)程向host頁面上的 <webview> 元素發(fā)送消息

ipc模塊還提供了刪除指定監(jiān)聽器和刪除所有監(jiān)聽器的方法：removeListener()、removeAllListener()，這兩個方法在ipcMain和ipcRenderer這兩個模塊中的用法是一樣的。

通過上面的幾個監(jiān)聽器我們發(fā)現(xiàn)，單獨(dú)使用ipc模塊無法實(shí)現(xiàn)主進(jìn)程主動向渲染進(jìn)程發(fā)送消息。所以我一般把BrowserWindow實(shí)例中的webContents和ipc模塊結(jié)合使用

一個主進(jìn)程與渲染進(jìn)程間通信的例子

// 在主進(jìn)程中使用ipcMain
const { ipcMain, BrowserWindow } = require('electron');

window = new BrowserWindow({
?? ?width: 800,
?? ?height: 600
});

// 主進(jìn)程主動向渲染進(jìn)程發(fā)送消息
window.webContents.send('main webContents msg', data);

// 主進(jìn)程接收渲染進(jìn)程發(fā)送的消息,并通過回調(diào)函數(shù)做出響應(yīng)
ipcMain.on('renderer ipc msg', (event, arg) => {
?? ?// TODO something
})

// 在渲染進(jìn)程中使用ipcRender
const ipcRender = require('electron');

// 渲染進(jìn)程中使用ipcRenderer.on接收主進(jìn)程消息，并通過回調(diào)函數(shù)做出相應(yīng)
ipcRenderer.on('main webContents msg', (event, arg) => {
?? ?// 在相應(yīng)主進(jìn)程事件時，通過ipcRenderer.send方法像主進(jìn)程發(fā)送另一條消息
?? ?ipcRenderer.send('renderer ipc msg', data);
})

ipcRenderer發(fā)送的同步消息和異步消息

在上面列舉的幾個方法中，其中ipcRenderer發(fā)送消息的方法分為發(fā)送同步消息的方法ipcRenderer.send和發(fā)送異步消息的方法ipcRenderer.sendSync。主程序在監(jiān)聽到這兩種不同方法的消息時，可以通過不同的方式給渲染進(jìn)程返回消息：

// 渲染進(jìn)程

// 渲染進(jìn)程發(fā)送異步消息
ipcRenderer.send('msg', data);

// 渲染進(jìn)程發(fā)送同步消息。 發(fā)送同步消息，任務(wù)未完成時會阻止其他操作
var message = ipcRenderer.sendSync('sync msg', data);

ipcMain.on('msg', (event, arg) => {
?? ?// 主進(jìn)程監(jiān)聽到渲染進(jìn)程發(fā)的異步消息后，通過event.sender.send()的方式進(jìn)行響應(yīng)，可以在渲染進(jìn)程中使用ipcRenderer.on監(jiān)聽'return msg'消息
?? ?event.sender.send('return msg', data)
})

ipcMain.on('sync msg', (event, arg) => {
?? ?event.retuenValue = 'msg';
})

remote模塊

在渲染進(jìn)程中使用remote，可以調(diào)用主進(jìn)程所提供的一些方法。（例如：dialog、menu等模塊）

const { BrowserWindow } = require('electron').remote;

//通過remote模塊，可以在渲染進(jìn)程中調(diào)用BrowserWindow模塊
let win = new BrowserWindow({ width: 800, height: 600});
win.loadURL('index.html');

渲染進(jìn)程中使用remote模塊返回的對象，都代表了主進(jìn)程中的一個對象，一般稱為遠(yuǎn)程對象。調(diào)用遠(yuǎn)程對象的方法時，實(shí)際上是在想主進(jìn)程發(fā)送同步消息。

比如上面的代碼中，BrowserWindow實(shí)例是通過remote模塊返回的，所以渲染進(jìn)程中的BrowserWindow和win都是遠(yuǎn)程對象。在執(zhí)行new BrowserWindow({...})這段代碼的時候，并沒有在渲染進(jìn)程中創(chuàng)建BrowserWindow實(shí)例的對象，而是在主進(jìn)程中創(chuàng)建了BrowserWindow對象，并把這個對象返回到渲染進(jìn)程中。

remote的方法和屬性

• remote.require(module)：返回主進(jìn)程中的對象
• remote.getCurrentWindow()：返回此網(wǎng)頁所屬的窗口
• remote.getGlobal(name)：返回主進(jìn)程中name的全局變量
• remote.process：返回主進(jìn)程中的process對象

渲染進(jìn)程之間通信

上面提到的通信方法，經(jīng)過測試發(fā)現(xiàn)都無法在渲染進(jìn)程之間直接通信，有時候我們開發(fā)中可以使用主進(jìn)程作為中轉(zhuǎn)進(jìn)行渲染進(jìn)程間的通信：

// renderer process A
const { ipcRenderer } = require('electron');
ipcRenderer.send('A send msg', data);

// main process
const { ipcMain, BrowserWindow } = require('electron');

let win = new BrowserWindow({...});

ipcMain.on('A send msg', (event ,arg) => {
?? ?// TODO something
?? ?win.webContents.send('main send msg', data);
})

const { ipcRenderer } = require('electron');
ipcRenderer.on('main send msg', (event, arg) => {
    // TODO something
})

除了上面這種需要main process中轉(zhuǎn)的方式之外，還有一種方式能夠?qū)崿F(xiàn)渲染進(jìn)程之間的直接通信：

// main process
// 兩個窗口互相獲取對方的窗口 id, 并發(fā)送給渲染進(jìn)程
const { BrowserWindow} = require('electron');

let win1 = new BrowserWindow({...});
let win2 = new BrowserWindow({...});

win1.webContents.send('distributeIds',{
? ? win2Id : win2.id
});
win2.webContents.send('distributeIds',{
? ? win1Id : win1.id
});

// renderer process
const { remote } = require('electron').remote;

// fromId() 可以根據(jù)窗口id找到目標(biāo)窗口
remote.BrowserWindow.fromId(win2Id).webContents.send('msg', data);

到此這篇關(guān)于Electron進(jìn)程間通信的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Electron進(jìn)程間通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！