本文作者：IMWeb laynechen

未经同意，禁止转载

Electron 中的进程分类

在 Electron 中，存在两种进程：主进程和渲染进程。

主进程 (Main Process)

一个 Electron 应用只有 一个主进程

当我们执行 electron . 命令后， Electron 会运行当前目录(.)下的 package.json 文件中 main 字段指定的文件。而运行该文件的进程既是主进程。

运行在主进程中的脚本可以通过创建一个窗口，并传入 URL，让这个窗口加载一个网页来展示图形界面。

与创建 GUI 相关的接口只应该由主进程来调用。

渲染进程 (Renderer Process)

在Electron里的每个页面都有它自己的进程，叫作渲染进程。主进程通过实例化 BrowserWindow，每个 BrowserWindow 实例都在它自己的渲染进程内返回一个 web 页面。当 BrowserWindow 实例销毁时，相应的渲染进程也会终止。

渲染进程由主进程进行管理。每个渲染进程都是相互独立的，它们只关心自己所运行的 web 页面。

问题

这篇文章主要要解决的问题是：

Electron 与 View 层(网页)，也就是主进程与渲染进程是如何进行通信的？

不同的通信是如何实现的？

先解决第一个问题。

Electron 与 View 层(网页)是如何进行通信的？

Electron 提供了两种通信方法：

1. 利用 ipcMain 和 ipcRenderer 模块

官方文档 上有使用这两个模块进行进程通信的例子：

// 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')

渲染进程可以通过 ipcRenderer 模块的 send 方法向主进程发送消息。在主进程中，通过 ipcMain 模块设置监听 asynchronous-message 和 synchronous-message 两个事件，当渲染进程发送时就可以针对不同的事件进行处理。

主进程监听事件的回调函数中，会传递 event 对象及 arg 对象。arg 对象中保存渲染进程传递过来的参数。通过 event.sender 对象，主进程可以向渲染进程发送消息。如果主进程执行的是同步方法，还可以通过设置 event.returnValue 来返回信息。

上面说了渲染进程如何向主进程发送消息，但主进程也可以主动向渲染进程发送消息

在主进程中，我们会创建一个 BrowserWindow 对象，这个对象有 webContents 属性。webContets 提供了 send 方法来实现向渲染进程发送消息。当然 webContents 对象远不止这两个通信方法，具体可以看 webContents

下面是官方文档提供的使用 webContents 实现通信的例子：

// 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 监听的是已经定义好的事件，如上面的 did-finish-load。要监听自定义的事件还是通过 ipcMain 和 ipcRenderer。

渲染进程的监听事件回调函数中，也可以通过 event.sender 来向主进程发送消息。这个对象只是 ipcRenderer 的引用(event.sender === ipcRenderer)。因此，event.sender 发送的消息在主进程中还是需要通过 ipcMain.on 方法来监听，而不是通过 webContents.on 方法。

2. 利用 electron.remote 模块

在渲染进程中，可以通过

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

获取到 remote 对象，通过 remote 对象可以让渲染进程访问/使用主进程的模块。例如，通过 remote 在渲染进程中新建一个窗口：

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

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

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

同样的，我们也可以通过 remote 对象访问到 app 对象。这样我们就可以访问到我们在主进程中挂载到 electron.app 对象上的方法。

如：

main.js 文件：

// In main process

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

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

app.utils = utils; // 将在 Electron 层实现的接口绑定到 app 上

index.js 文件(被网页引用的脚本文件)：

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

// In renderer process

function(){

// remote.app.utils 对象与上述文件中的 utils 对象是一样的。

remote.app.utils.test();

}

Electron 的两种进程通信方法是如何实现的？

知道怎么用还不够，还需要了解 Electron 是如何实现这两种通信方法的，以及 Electron 为什么要实现两种通信方法，这两种通信方法的有什么不同的地方。弄清楚这些开发起来才会对程序的数据流比较清晰。

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 类的一个实例。而 EventEmitter 类由 NodeJS 中的 events 模块导出。

events.EventEmitter

EventEmitter 类是 NodeJS 事件的基础，实现了事件模型需要的接口， 包括 addListener，removeListener, emit 及其它工具方法. 同原生 JavaScript 事件类似， 采用了发布/订阅(观察者)的方式， 使用内部 _events 列表来记录注册的事件处理器。

我们通过 ipcMain和ipcRenderer 的 on、send 进行监听和发送消息都是 EventEmitter 定义的相关接口。

那么 ipcMain 和 ipcRenderer 是如何实现这些接口的呢？

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

调用了 atomBinding('ipc') 得到的 binding 对象的 send 方法。能力有限，就分析到这。后面 binding.send 应该就是 IPC 相关的实现了：对传送的数据进行序列化和反序列化。

// 主进程

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

const obj = {};

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

e.returnValue = obj;

})

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

const obj = { name: '123' };

e.returnValue = obj;

})

// 渲染进程

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'

从渲染进程输出的消息可以看到，主进程将返回值调用 toJSON 后传递给渲染进程。渲染进程再对传输过来的内容进行反序列化。

remote 远程对象

通过 remote 对象，我们可以不必发送进程间消息来进行通信。但实际上，我们在调用远程对象的方法、函数或者通过远程构造函数创建一个新的对象，实际上都是在发送一个同步的进程间消息(官方文档 上说这类似于 JAVA 中的 RMI)。

也就是说，remote 方法只是不用让我们显式的写发送进程间的消息的方法而已。在上面通过 remote 模块创建 BrowserWindow 的例子里。我们在渲染进程中创建的 BrowserWindow 对象其实并不在我们的渲染进程中，它只是让主进程创建了一个 BrowserWindow 对象，并返回了这个相对应的远程对象给了渲染进程。

参考资料