Electron桌面應(yīng)用中有兩個進(jìn)程，分別是Main主進(jìn)程和Renderer渲染進(jìn)程。兩個進(jìn)程間有多種方法進(jìn)行通信。

一、主進(jìn)程和渲染進(jìn)程

1、主進(jìn)程Main

main.js在啟動應(yīng)用后就創(chuàng)建了一個主進(jìn)程main process，它可以通過electron中的一些模塊直接與原生GUI（在你的應(yīng)用窗口）交互。

2、渲染進(jìn)程Renderer

僅啟動主進(jìn)程并不能給你的應(yīng)用創(chuàng)建應(yīng)用窗口。窗口是通過main文件里的主進(jìn)程調(diào)用叫BrowserWindow的模塊創(chuàng)建的。每個頁面都是運行在自己的進(jìn)程里，這些進(jìn)程我們稱之為渲染進(jìn)程。渲染進(jìn)程會在窗口中渲染出web頁面（引用了CSS，JavaScript，圖片等的HTML文件）。web頁面是Chromium渲染的，因為各系統(tǒng)下標(biāo)準(zhǔn)是統(tǒng)一的的，所以兼容性很好。

3、主進(jìn)程于渲染進(jìn)程的關(guān)系

主進(jìn)程通過構(gòu)造BrowserWindow實例來創(chuàng)建頁面。每個 BrowserWindow實例都在自己的渲染進(jìn)程里運行頁面。當(dāng)一個 BrowserWindow 實例被銷毀后，相應(yīng)的渲染進(jìn)程也會被終止。
主進(jìn)程管理所有頁面和與之對應(yīng)的渲染進(jìn)程。每個渲染進(jìn)程都是相互隔離的，并且只知道運行在該進(jìn)程里的頁面。
在頁面里調(diào)用本地GUI是不允許的，因為在Web頁面里管理本地GUI資源是非常危險而且容易造成資源泄露。如果你想在網(wǎng)頁里進(jìn)行GUI操作，該頁面的渲染進(jìn)程必須與主進(jìn)程進(jìn)行通訊，請求主進(jìn)程進(jìn)行相關(guān)的 GUI 操作。

二、幾種通信方式

1、ipc模塊

• ipcMain模塊
• ipcRenderer模塊
  ipcMain模塊和ipcRenderer是類EventEmitter的實例。
  在Electron項目中，使用require來引入這個模塊，而在Electron-vue中，由于使用了webpack，可以使用import引入。

1.1、ipcMain

• ipcMain.on(channel, listener)

監(jiān)聽 channel，當(dāng)接收到新的消息時 listener 會以 listener(event, args...) 的形式被調(diào)用。

• ipcMain.once(channel, listener)

添加一次性的 listener。當(dāng)且僅當(dāng)下一個消息發(fā)送到 channel 時 listener 才會被調(diào)用，隨后listener會被移除。

• ipcMain.removeListener(channel, listener)

從監(jiān)聽器數(shù)組中移除監(jiān)聽 channel 的指定 listener。

• ipcMain.removeAllListeners([channel])

刪除所有監(jiān)聽者，或特指的 channel 的所有監(jiān)聽者。

1.2、ipcRenderer

• ipcRenderer.on(channel, listener)

監(jiān)聽 channel, 當(dāng)新消息到達(dá)，將通過 listener(event, args...) 調(diào)用 listener

• ipcRenderer.once(channel, listener)

• ipcRenderer.removeListener(channel, listener)

• ipcRenderer.removeAllListeners(channel)

• ipcRenderer.send(channel[, arg1][, arg2][, ...])

通過 channel 發(fā)送異步消息到主進(jìn)程，可以攜帶任意參數(shù)。 在內(nèi)部，參數(shù)會被序列化為 JSON，因此參數(shù)對象上的函數(shù)和原型鏈不會被發(fā)送。
主進(jìn)程可以使用 ipcMain 監(jiān)聽channel來接收這些消息。

• ipcRenderer.sendSync(channel[, arg1][, arg2][, ...])

通過 channel 發(fā)送同步消息到主進(jìn)程，可以攜帶任意參數(shù)。 在內(nèi)部，參數(shù)會被序列化為 JSON，因此參數(shù)對象上的函數(shù)和原型鏈不會被發(fā)送。

主進(jìn)程可以使用 ipcMain 監(jiān)聽channel來接收這些消息，并通過 event.returnValue設(shè)置回復(fù)消息。

• ipcRenderer.sendTo(webContentsId, channel, [, arg1][, arg2][, ...])

通過channel向具有WebContentSid的窗口發(fā)送消息

• ipcRenderer.sendToHost(channel[, arg1][, arg2][, ...])

就像 ipcRenderer.send，不同的是消息會被發(fā)送到 host 頁面上的 <webview> 元素，而不是主進(jìn)程。

1.3、Renderer進(jìn)程向Main進(jìn)程發(fā)送消息，Main進(jìn)程進(jìn)行回復(fù)（ipc模塊沒有Main進(jìn)程向Renderer模塊發(fā)送的方法）

• 發(fā)送消息時，事件名稱為channel（如例子中的asynchronous-message）

1.3.1、異步消息

• 主進(jìn)程將異步消息發(fā)送回發(fā)件人，需要使用event.sender.send(...)

// Renderer進(jìn)程（為Vue頁面或main.js頁面）
import {ipcRenderer} from 'electron';
import Vue from 'vue';

<template>
  <div>{{this.msg}}</div>
</template>

<script>
ipcRender.on('asynchronous-reply', function (event, arg) { // 接收到Main進(jìn)程返回的消息
  const message = `異步消息回復(fù): ${arg}`
})
export default{
  mounted(){
   ipcRenderer.send('asynchronous-message', 'ping') //給主進(jìn)程發(fā)送消息“ping”
  }
}

//Main進(jìn)程(為js文件)
import {ipcMain} from 'electron';

ipcMain.on('asynchronous-message',(event, arg) => { // arg為接受到的消息
  event.sender.send('asynchronous-reply', 'pong'); // 返回一個'pong'
})

1.3.2、同步消息

可以使用ipc 模塊在進(jìn)程之間發(fā)送同步消息. 但請注意, 此方法的同步特性意味著它在完成任務(wù)時會阻止其他操作

• 主進(jìn)程回復(fù)同步信息時，需要設(shè)置event.returnValue

// Renderer進(jìn)程
import {ipcRenderer} from 'electron';
import Vue from 'vue';

<template>
  <div>{{this.msg}}</div>
</template>

<script>
ipcRender.on('synchronous-reply', function (event, arg) { // 接收到Main進(jìn)程返回的消息
  const message = `異步消息回復(fù): ${arg}`
})
export default{
  mounted(){
   ipcRenderer.sendSync('synchronous-message', 'ping') //給主進(jìn)程發(fā)送消息“ping”
  }
}

//Main進(jìn)程
mport {ipcMain} from 'electron';

ipcMain.on('synchronous-message',(event, arg) => { // arg為接受到的消息
  event.returnValue = 'pong' // 返回一個'pong'
})

2、webContents.send方法（Main進(jìn)程主動向Renderer進(jìn)程發(fā)送消息）

webContents.send是BrowserWindow類的一個方法，BrowserWindow類用于創(chuàng)建一個程序窗口，實例化之后，設(shè)置窗口寬高，并設(shè)置其loadURL(加載的頁面)，一個窗口就創(chuàng)建成功并開始顯示。通信方法如下

mainWindow.webContents.send('list', res.data);
// mainWindow是一個BrowserWindow實例

在渲染進(jìn)程中，依舊是使用ipcRenderer對消息進(jìn)行接收

ipcRenderer.on('list', (e, msg) => {
  console.log(msg);
  });
}

3、remote模塊

remote模塊支持RPC風(fēng)格的通信，在渲染進(jìn)程中獲取主進(jìn)程創(chuàng)建的一些全局對象和應(yīng)用信息，還可以調(diào)用主進(jìn)程所提供的一些方法，如重啟應(yīng)用、操作渲染進(jìn)程等。
在Electron中, GUI 相關(guān)的模塊 (如 dialog、menu 等) 僅在主進(jìn)程中可用, 在渲染進(jìn)程中不可用。 為了在渲染進(jìn)程中使用它們, 必須使用 remote 模塊,。你可以調(diào)用 main 進(jìn)程對象的方法, 而不必顯式發(fā)送進(jìn)程間消息, 類似于 Java 的 RMI 。

• 從渲染進(jìn)程創(chuàng)建瀏覽器窗口的一個例子

const { BrowserWindow } = require('electron').remote;
let win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://github.com');

注意: 反向操作（ 從主進(jìn)程訪問渲染進(jìn)程） ，可以使用webContents.executeJavascript

3.1遠(yuǎn)程對象

remote 模塊返回的每個對象 (包括函數(shù)) 表示主進(jìn)程中的一個對象 (我們稱它為遠(yuǎn)程對象或遠(yuǎn)程函數(shù))。 當(dāng)調(diào)用遠(yuǎn)程對象的方法時, 調(diào)用遠(yuǎn)程函數(shù), 或者使用遠(yuǎn)程構(gòu)造函數(shù) (函數(shù)) 創(chuàng)建新對象時, 實際上是在發(fā)送同步進(jìn)程消息。
在上面的示例中, BrowserWindow 和 win (browser-window. md) 都是遠(yuǎn)程對象, new BrowserWindow 在渲染過程中沒有創(chuàng)建 BrowserWindow 對象。 取而代之的是，它在主進(jìn)程中創(chuàng)建了一個 BrowserWindow對象，并且在渲染進(jìn)程中返回相應(yīng)的遠(yuǎn)程對象，即win對象。
請注意只有可枚舉屬性才能通過 remote 進(jìn)行訪問。

3.2遠(yuǎn)程對象的生命周期

Electron 確保在渲染進(jìn)程中的遠(yuǎn)程對象存在（換句話說，沒有被垃圾收集），那主進(jìn)程中的對應(yīng)對象也不會被釋放。當(dāng)遠(yuǎn)程對象被垃圾收集之后，主進(jìn)程中的對應(yīng)對象才會被取消關(guān)聯(lián)。如果遠(yuǎn)程對象在渲染進(jìn)程泄露了（即，存在某個表中但永遠(yuǎn)不會釋放），那么主進(jìn)程中的對應(yīng)對象也一樣會泄露，所以你必須小心不要泄露了遠(yuǎn)程對象。
但是，字符串和數(shù)字等主要值的類型是通過復(fù)制發(fā)送的。

3.3給主進(jìn)程傳遞回調(diào)函數(shù)

在主進(jìn)程中的代碼可以從渲染進(jìn)程——remote模塊——中接受回調(diào)函數(shù)，但是使用這個功能的時候必須非常非常小心。
首先，為了避免死鎖，傳遞給主進(jìn)程的回調(diào)函數(shù)會進(jìn)行異步調(diào)用。所以不能期望主進(jìn)程來獲得傳遞過去的回調(diào)函數(shù)的返回值。
其次，傳遞給主進(jìn)程的回調(diào)將持續(xù)到主進(jìn)程垃圾回收。主進(jìn)程會一直保持對這個回調(diào)函數(shù)的引用，除非明確的卸載它。如果不卸載，每次重新載入窗口都會再次綁定，這樣每次重啟就會泄露一個回調(diào)函數(shù)。為了避免這個問題，請確保清除對傳遞給主進(jìn)程的渲染器回調(diào)的引用。 這涉及到清理事件處理程序, 或者確保主進(jìn)程被明確告知取消引用來自正在退出的渲染程序的回調(diào)。

3.4訪問主進(jìn)程中的內(nèi)置模塊

主過程中的內(nèi)置模塊被添加為 remote 模塊中的獲取器，因此可以像 electron 模塊一樣直接使用它們

const app = require('electron').remote.app
console.log(app)

3.5remote的幾個方法及屬性

• remote.require(module)

返回主進(jìn)程中require(module) 返回的對象。 由其相對路徑指定的模塊將相對于主進(jìn)程的入口點來解析。

• remote.getCurrentWindow()

返回 BrowserWindow 即此網(wǎng)頁所屬的窗口

• remote.getCurrentWebContents()

返回 WebContents 即此網(wǎng)頁的 web 內(nèi)容

• remote.getGlobal(name)

返回主進(jìn)程中 name (例如 global[name]) 的全局變量。

• remote.process

主進(jìn)程中的 process 對象。這與 remote.getGlobal('process') 相同, 但已被緩存。