本文作者：IMWeb laynechen

未經(jīng)同意，禁止轉(zhuǎn)載

Electron 中的進(jìn)程分類

在 Electron 中，存在兩種進(jìn)程：主進(jìn)程和渲染進(jìn)程。

主進(jìn)程 (Main Process)

一個(gè) Electron 應(yīng)用只有 一個(gè)主進(jìn)程

當(dāng)我們執(zhí)行 electron . 命令后， Electron 會(huì)運(yùn)行當(dāng)前目錄(.)下的 package.json 文件中 main 字段指定的文件。而運(yùn)行該文件的進(jìn)程既是主進(jìn)程。

運(yùn)行在主進(jìn)程中的腳本可以通過(guò)創(chuàng)建一個(gè)窗口，并傳入 URL，讓這個(gè)窗口加載一個(gè)網(wǎng)頁(yè)來(lái)展示圖形界面。

與創(chuàng)建 GUI 相關(guān)的接口只應(yīng)該由主進(jìn)程來(lái)調(diào)用。

渲染進(jìn)程 (Renderer Process)

在Electron里的每個(gè)頁(yè)面都有它自己的進(jìn)程，叫作渲染進(jìn)程。主進(jìn)程通過(guò)實(shí)例化 BrowserWindow，每個(gè) BrowserWindow 實(shí)例都在它自己的渲染進(jìn)程內(nèi)返回一個(gè) web 頁(yè)面。當(dāng) BrowserWindow 實(shí)例銷毀時(shí)，相應(yīng)的渲染進(jìn)程也會(huì)終止。

渲染進(jìn)程由主進(jìn)程進(jìn)行管理。每個(gè)渲染進(jìn)程都是相互獨(dú)立的，它們只關(guān)心自己所運(yùn)行的 web 頁(yè)面。

問題

這篇文章主要要解決的問題是：

Electron 與 View 層(網(wǎng)頁(yè))，也就是主進(jìn)程與渲染進(jìn)程是如何進(jìn)行通信的？

不同的通信是如何實(shí)現(xiàn)的？

先解決第一個(gè)問題。

Electron 與 View 層(網(wǎng)頁(yè))是如何進(jìn)行通信的？

Electron 提供了兩種通信方法：

1. 利用 ipcMain 和 ipcRenderer 模塊

官方文檔 上有使用這兩個(gè)模塊進(jìn)行進(jìn)程通信的例子：

// In main process.

const {ipcMain} = require('electron')

ipcMain.on('asynchronous-message', (event, arg) => {

console.log(arg) // prints "ping"

event.sender.send('asynchronous-reply', 'pong')

})

ipcMain.on('synchronous-message', (event, arg) => {

console.log(arg) // prints "ping"

event.returnValue = 'pong'

})

// In renderer process (web page).

const {ipcRenderer} = require('electron')

console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {

console.log(arg) // prints "pong"

})

ipcRenderer.send('asynchronous-message', 'ping')

渲染進(jìn)程可以通過(guò) ipcRenderer 模塊的 send 方法向主進(jìn)程發(fā)送消息。在主進(jìn)程中，通過(guò) ipcMain 模塊設(shè)置監(jiān)聽 asynchronous-message 和 synchronous-message 兩個(gè)事件，當(dāng)渲染進(jìn)程發(fā)送時(shí)就可以針對(duì)不同的事件進(jìn)行處理。

主進(jìn)程監(jiān)聽事件的回調(diào)函數(shù)中，會(huì)傳遞 event 對(duì)象及 arg 對(duì)象。arg 對(duì)象中保存渲染進(jìn)程傳遞過(guò)來(lái)的參數(shù)。通過(guò) event.sender 對(duì)象，主進(jìn)程可以向渲染進(jìn)程發(fā)送消息。如果主進(jìn)程執(zhí)行的是同步方法，還可以通過(guò)設(shè)置 event.returnValue 來(lái)返回信息。

上面說(shuō)了渲染進(jìn)程如何向主進(jìn)程發(fā)送消息，但主進(jìn)程也可以主動(dòng)向渲染進(jìn)程發(fā)送消息

在主進(jìn)程中，我們會(huì)創(chuàng)建一個(gè) BrowserWindow 對(duì)象，這個(gè)對(duì)象有 webContents 屬性。webContets 提供了 send 方法來(lái)實(shí)現(xiàn)向渲染進(jìn)程發(fā)送消息。當(dāng)然 webContents 對(duì)象遠(yuǎn)不止這兩個(gè)通信方法，具體可以看 webContents

下面是官方文檔提供的使用 webContents 實(shí)現(xiàn)通信的例子：

// In the main process.

const {app, BrowserWindow} = require('electron')

let win = null

app.on('ready', () => {

win = new BrowserWindow({width: 800, height: 600})

win.loadURL(`file://${__dirname}/index.html`)

win.webContents.on('did-finish-load', () => {

win.webContents.send('ping', 'whoooooooh!')

})

})

console.log(message) // Prints 'whoooooooh!'

})

注意，webContents.on 監(jiān)聽的是已經(jīng)定義好的事件，如上面的 did-finish-load。要監(jiān)聽自定義的事件還是通過(guò) ipcMain 和 ipcRenderer。

渲染進(jìn)程的監(jiān)聽事件回調(diào)函數(shù)中，也可以通過(guò) event.sender 來(lái)向主進(jìn)程發(fā)送消息。這個(gè)對(duì)象只是 ipcRenderer 的引用(event.sender === ipcRenderer)。因此，event.sender 發(fā)送的消息在主進(jìn)程中還是需要通過(guò) ipcMain.on 方法來(lái)監(jiān)聽，而不是通過(guò) webContents.on 方法。

2. 利用 electron.remote 模塊

在渲染進(jìn)程中，可以通過(guò)

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

獲取到 remote 對(duì)象，通過(guò) remote 對(duì)象可以讓渲染進(jìn)程訪問/使用主進(jìn)程的模塊。例如，通過(guò) remote 在渲染進(jìn)程中新建一個(gè)窗口：

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

let win = new BrowserWindow({width: 800, height: 600})

win.loadURL('https://github.com')

同樣的，我們也可以通過(guò) remote 對(duì)象訪問到 app 對(duì)象。這樣我們就可以訪問到我們?cè)谥鬟M(jìn)程中掛載到 electron.app 對(duì)象上的方法。

如：

main.js 文件：

// In main process

const { app } = require('electron');

const utils = require('./utils');

app.utils = utils; // 將在 Electron 層實(shí)現(xiàn)的接口綁定到 app 上

index.js 文件(被網(wǎng)頁(yè)引用的腳本文件)：

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

// In renderer process

function(){

// remote.app.utils 對(duì)象與上述文件中的 utils 對(duì)象是一樣的。

remote.app.utils.test();

}

Electron 的兩種進(jìn)程通信方法是如何實(shí)現(xiàn)的？

知道怎么用還不夠，還需要了解 Electron 是如何實(shí)現(xiàn)這兩種通信方法的，以及 Electron 為什么要實(shí)現(xiàn)兩種通信方法，這兩種通信方法的有什么不同的地方。弄清楚這些開發(fā)起來(lái)才會(huì)對(duì)程序的數(shù)據(jù)流比較清晰。

ipcMain 和 ipcRenderer

The ipcMain module is an instance of the EventEmitter class. When used in the main process, it handles asynchronous and synchronous messages sent from a renderer process (web page). Messages sent from a renderer will be emitted to this module.

ipcMain 和 ipcRenderer 都是 EventEmitter 類的一個(gè)實(shí)例。而 EventEmitter 類由 NodeJS 中的 events 模塊導(dǎo)出。

events.EventEmitter

EventEmitter 類是 NodeJS 事件的基礎(chǔ)，實(shí)現(xiàn)了事件模型需要的接口， 包括 addListener，removeListener, emit 及其它工具方法. 同原生 JavaScript 事件類似， 采用了發(fā)布/訂閱(觀察者)的方式， 使用內(nèi)部 _events 列表來(lái)記錄注冊(cè)的事件處理器。

我們通過(guò) ipcMain和ipcRenderer 的 on、send 進(jìn)行監(jiān)聽和發(fā)送消息都是 EventEmitter 定義的相關(guān)接口。

那么 ipcMain 和 ipcRenderer 是如何實(shí)現(xiàn)這些接口的呢？

ipc-renderer.js

const binding = process.atomBinding('ipc')

...

// Created by init.js.

const ipcRenderer = v8Util.getHiddenValue(global, 'ipc')

ipcRenderer.send = function (...args){

return binding.send('ipc-message', args)

}

....

module.exports = ipcRenderer

調(diào)用了 atomBinding('ipc') 得到的 binding 對(duì)象的 send 方法。能力有限，就分析到這。后面 binding.send 應(yīng)該就是 IPC 相關(guān)的實(shí)現(xiàn)了：對(duì)傳送的數(shù)據(jù)進(jìn)行序列化和反序列化。

// 主進(jìn)程

ipcMain.on('test1', (e) => {

const obj = {};

obj.toJSON = () => 'call toJSON';

e.returnValue = obj;

})

ipcMain.on('test2', (e) => {

const obj = { name: '123' };

e.returnValue = obj;

})

// 渲染進(jìn)程

let returnValue = ipcRenderer.sendSync('test1');

console.log(typeof returnValue, returnValue); // 'string call toJSON'

returnValue = ipcRenderer.sendSync('test2');

console.log(typeof returnValue, returnValue); // 'object Object name: "123"__proto__: Object'

從渲染進(jìn)程輸出的消息可以看到，主進(jìn)程將返回值調(diào)用 toJSON 后傳遞給渲染進(jìn)程。渲染進(jìn)程再對(duì)傳輸過(guò)來(lái)的內(nèi)容進(jìn)行反序列化。

remote 遠(yuǎn)程對(duì)象

通過(guò) remote 對(duì)象，我們可以不必發(fā)送進(jìn)程間消息來(lái)進(jìn)行通信。但實(shí)際上，我們?cè)谡{(diào)用遠(yuǎn)程對(duì)象的方法、函數(shù)或者通過(guò)遠(yuǎn)程構(gòu)造函數(shù)創(chuàng)建一個(gè)新的對(duì)象，實(shí)際上都是在發(fā)送一個(gè)同步的進(jìn)程間消息(官方文檔 上說(shuō)這類似于 JAVA 中的 RMI)。

也就是說(shuō)，remote 方法只是不用讓我們顯式的寫發(fā)送進(jìn)程間的消息的方法而已。在上面通過(guò) remote 模塊創(chuàng)建 BrowserWindow 的例子里。我們?cè)阡秩具M(jìn)程中創(chuàng)建的 BrowserWindow 對(duì)象其實(shí)并不在我們的渲染進(jìn)程中，它只是讓主進(jìn)程創(chuàng)建了一個(gè) BrowserWindow 對(duì)象，并返回了這個(gè)相對(duì)應(yīng)的遠(yuǎn)程對(duì)象給了渲染進(jìn)程。

參考資料

總結(jié)

以上是生活随笔為你收集整理的electron监听网页_Electron 进程通信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。