Electron桌面應(yīng)用中有兩個進程蘑秽，分別是Main主進程和Renderer渲染進程。兩個進程間有多種方法進行通信箫攀。
一肠牲、主進程和渲染進程
1、主進程Main
main.js在啟動應(yīng)用后就創(chuàng)建了一個主進程main process靴跛，它可以通過electron中的一些模塊直接與原生GUI（在你的應(yīng)用窗口）交互缀雳。
2、渲染進程Renderer
僅啟動主進程并不能給你的應(yīng)用創(chuàng)建應(yīng)用窗口梢睛。窗口是通過main文件里的主進程調(diào)用叫BrowserWindow的模塊創(chuàng)建的肥印。每個頁面都是運行在自己的進程里，這些進程我們稱之為渲染進程绝葡。渲染進程會在窗口中渲染出web頁面（引用了CSS深碱，JavaScript，圖片等的HTML文件）藏畅。web頁面是Chromium渲染的敷硅，因為各系統(tǒng)下標(biāo)準(zhǔn)是統(tǒng)一的的，所以兼容性很好愉阎。
3绞蹦、主進程于渲染進程的關(guān)系
主進程通過構(gòu)造BrowserWindow實例來創(chuàng)建頁面。每個 BrowserWindow實例都在自己的渲染進程里運行頁面榜旦。當(dāng)一個 BrowserWindow 實例被銷毀后幽七，相應(yīng)的渲染進程也會被終止。
主進程管理所有頁面和與之對應(yīng)的渲染進程溅呢。每個渲染進程都是相互隔離的澡屡，并且只知道運行在該進程里的頁面猿挚。
在頁面里調(diào)用本地GUI是不允許的，因為在Web頁面里管理本地GUI資源是非常危險而且容易造成資源泄露挪蹭。如果你想在網(wǎng)頁里進行GUI操作亭饵，該頁面的渲染進程必須與主進程進行通訊，請求主進程進行相關(guān)的 GUI 操作梁厉。
二辜羊、幾種通信方式
1、ipc模塊
-
ipcMain模塊 -
ipcRenderer模塊
ipcMain模塊和ipcRenderer是類EventEmitter的實例词顾。
在Electron項目中八秃，使用require來引入這個模塊，而在Electron-vue中肉盹，由于使用了webpack昔驱，可以使用import引入。
1.1上忍、ipcMain
監(jiān)聽 channel骤肛，當(dāng)接收到新的消息時 listener 會以 listener(event, args...) 的形式被調(diào)用。
添加一次性的 listener窍蓝。當(dāng)且僅當(dāng)下一個消息發(fā)送到 channel 時 listener 才會被調(diào)用腋颠，隨后listener會被移除。
從監(jiān)聽器數(shù)組中移除監(jiān)聽 channel 的指定 listener吓笙。
刪除所有監(jiān)聽者淑玫，或特指的 channel 的所有監(jiān)聽者。
1.2面睛、ipcRenderer
監(jiān)聽 channel, 當(dāng)新消息到達絮蒿，將通過 listener(event, args...) 調(diào)用 listener
-
ipcRenderer.once(channel, listener) -
ipcRenderer.removeListener(channel, listener) -
ipcRenderer.removeAllListeners(channel) -
ipcRenderer.send(channel[, arg1][, arg2][, ...])
通過 channel 發(fā)送異步消息到主進程，可以攜帶任意參數(shù)叁鉴。 在內(nèi)部土涝，參數(shù)會被序列化為 JSON，因此參數(shù)對象上的函數(shù)和原型鏈不會被發(fā)送幌墓。
主進程可以使用 ipcMain 監(jiān)聽channel來接收這些消息回铛。
-
ipcRenderer.sendSync(channel[, arg1][, arg2][, ...])
通過 channel 發(fā)送同步消息到主進程，可以攜帶任意參數(shù)克锣。 在內(nèi)部茵肃，參數(shù)會被序列化為 JSON，因此參數(shù)對象上的函數(shù)和原型鏈不會被發(fā)送袭祟。
主進程可以使用 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> 元素您没，而不是主進程鸟召。
1.3、Renderer進程向Main進程發(fā)送消息氨鹏，Main進程進行回復(fù)（ipc模塊沒有Main進程向Renderer模塊發(fā)送的方法）
- 發(fā)送消息時欧募，事件名稱為
channel（如例子中的asynchronous-message）
1.3.1、異步消息
- 主進程將異步消息發(fā)送回發(fā)件人仆抵，需要使用event.sender.send(...)
// Renderer進程（為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進程返回的消息
const message = `異步消息回復(fù): ${arg}`
})
export default{
mounted(){
ipcRenderer.send('asynchronous-message', 'ping') //給主進程發(fā)送消息“ping”
}
}
//Main進程(為js文件)
import {ipcMain} from 'electron';
ipcMain.on('asynchronous-message',(event, arg) => { // arg為接受到的消息
event.sender.send('asynchronous-reply', 'pong'); // 返回一個'pong'
})
1.3.2跟继、同步消息
可以使用ipc 模塊在進程之間發(fā)送同步消息. 但請注意, 此方法的同步特性意味著它在完成任務(wù)時會阻止其他操作
- 主進程回復(fù)同步信息時，需要設(shè)置event.returnValue
// Renderer進程
import {ipcRenderer} from 'electron';
import Vue from 'vue';
<template>
<div>{{this.msg}}</div>
</template>
<script>
ipcRender.on('synchronous-reply', function (event, arg) { // 接收到Main進程返回的消息
const message = `異步消息回復(fù): ${arg}`
})
export default{
mounted(){
ipcRenderer.sendSync('synchronous-message', 'ping') //給主進程發(fā)送消息“ping”
}
}
//Main進程
mport {ipcMain} from 'electron';
ipcMain.on('synchronous-message',(event, arg) => { // arg為接受到的消息
event.returnValue = 'pong' // 返回一個'pong'
})
2镣丑、webContents.send方法（Main進程主動向Renderer進程發(fā)送消息）
webContents.send是BrowserWindow類的一個方法舔糖，BrowserWindow類用于創(chuàng)建一個程序窗口，實例化之后莺匠，設(shè)置窗口寬高金吗，并設(shè)置其loadURL(加載的頁面)，一個窗口就創(chuàng)建成功并開始顯示趣竣。通信方法如下
mainWindow.webContents.send('list', res.data);
// mainWindow是一個BrowserWindow實例
在渲染進程中摇庙，依舊是使用ipcRenderer對消息進行接收
ipcRenderer.on('list', (e, msg) => {
console.log(msg);
});
}
3、remote模塊
remote模塊支持RPC風(fēng)格的通信遥缕，在渲染進程中獲取主進程創(chuàng)建的一些全局對象和應(yīng)用信息卫袒，還可以調(diào)用主進程所提供的一些方法，如重啟應(yīng)用通砍、操作渲染進程等玛臂。
在Electron中, GUI 相關(guān)的模塊 (如 dialog烤蜕、menu 等) 僅在主進程中可用, 在渲染進程中不可用封孙。 為了在渲染進程中使用它們, 必須使用 remote 模塊,。你可以調(diào)用 main 進程對象的方法, 而不必顯式發(fā)送進程間消息, 類似于 Java 的 RMI 讽营。
- 從渲染進程創(chuàng)建瀏覽器窗口的一個例子
const { BrowserWindow } = require('electron').remote;
let win = new BrowserWindow({ width: 800, height: 600 });
win.loadURL('https://github.com');
注意: 反向操作（ 從主進程訪問渲染進程） 虎忌，可以使用webContents.executeJavascript
3.1遠程對象
remote 模塊返回的每個對象 (包括函數(shù)) 表示主進程中的一個對象 (我們稱它為遠程對象或遠程函數(shù))。 當(dāng)調(diào)用遠程對象的方法時, 調(diào)用遠程函數(shù), 或者使用遠程構(gòu)造函數(shù) (函數(shù)) 創(chuàng)建新對象時, 實際上是在發(fā)送同步進程消息橱鹏。
在上面的示例中, BrowserWindow 和 win (browser-window. md) 都是遠程對象, new BrowserWindow 在渲染過程中沒有創(chuàng)建 BrowserWindow 對象膜蠢。 取而代之的是，它在主進程中創(chuàng)建了一個 BrowserWindow對象莉兰，并且在渲染進程中返回相應(yīng)的遠程對象挑围，即win對象。
請注意只有可枚舉屬性才能通過 remote 進行訪問糖荒。
3.2遠程對象的生命周期
Electron 確保在渲染進程中的遠程對象存在（換句話說杉辙，沒有被垃圾收集），那主進程中的對應(yīng)對象也不會被釋放捶朵。當(dāng)遠程對象被垃圾收集之后蜘矢，主進程中的對應(yīng)對象才會被取消關(guān)聯(lián)狂男。如果遠程對象在渲染進程泄露了（即，存在某個表中但永遠不會釋放）品腹，那么主進程中的對應(yīng)對象也一樣會泄露岖食，所以你必須小心不要泄露了遠程對象。
但是舞吭，字符串和數(shù)字等主要值的類型是通過復(fù)制發(fā)送的泡垃。
3.3給主進程傳遞回調(diào)函數(shù)
在主進程中的代碼可以從渲染進程——remote模塊——中接受回調(diào)函數(shù)，但是使用這個功能的時候必須非常非常小心镣典。
首先兔毙，為了避免死鎖，傳遞給主進程的回調(diào)函數(shù)會進行異步調(diào)用兄春。所以不能期望主進程來獲得傳遞過去的回調(diào)函數(shù)的返回值澎剥。
其次，傳遞給主進程的回調(diào)將持續(xù)到主進程垃圾回收赶舆。主進程會一直保持對這個回調(diào)函數(shù)的引用哑姚，除非明確的卸載它。如果不卸載芜茵，每次重新載入窗口都會再次綁定叙量，這樣每次重啟就會泄露一個回調(diào)函數(shù)。為了避免這個問題九串，請確保清除對傳遞給主進程的渲染器回調(diào)的引用绞佩。 這涉及到清理事件處理程序, 或者確保主進程被明確告知取消引用來自正在退出的渲染程序的回調(diào)。
3.4訪問主進程中的內(nèi)置模塊
主過程中的內(nèi)置模塊被添加為 remote 模塊中的獲取器猪钮，因此可以像 electron 模塊一樣直接使用它們
const app = require('electron').remote.app
console.log(app)
3.5remote的幾個方法及屬性
返回主進程中require(module) 返回的對象品山。 由其相對路徑指定的模塊將相對于主進程的入口點來解析。
返回 BrowserWindow 即此網(wǎng)頁所屬的窗口
返回 WebContents 即此網(wǎng)頁的 web 內(nèi)容
返回主進程中 name (例如 global[name]) 的全局變量烤低。
主進程中的 process 對象肘交。這與 remote.getGlobal('process') 相同, 但已被緩存。
