[Electron] 學習筆記(2) - IPC 機制

source code @ github

這次來說明一下 Electron 的 IPC 機制

Electron 使用 Chromium multi-process 的機制，由 main process 來創建 application

renderer process 來負責繪製 web page，而 process 之間是無法直接溝通的

那如果想要 web page 和 GUI 有互動，例如可以透過 button 來關閉整個視窗，那該怎麼做？

這時候就必須透過 IPC (inter-process communication) 來做溝通

Electron 的 IPC 溝通的概念，是透過 channel來傳遞訊息

channel 的一方監聽，另一方送訊息進來，示意圖如下

官方的文件在這邊，ipcMain 以及 ipcRenderer

相關 source code 放在 ipc 資料夾下

這個程式會示範如何透過 IPC，讓使用者可以透過在 web page 的 button來關閉整個應用程式

• 先說明一下這次的資料結構

ipc
 |- app
 |     |- index.html
 |     |- index.js
 |
 |- main.js
 |- package.json

• index.html

這邊建立一個按鈕，並用 renderer process 來跑 index.js

• index.js

首先，在 renderer process 拿到 ipcRenderer 的 instance

之後就可以透過這個 instance 來和 main process 做溝通

這邊要注意一點是，在 renderer process 就只能拿 ipcRenderer

如果改寫成

let ipcRenderer = require('electron').ipcMain
會發現 ipcRenderer 會是 undefined

這是因為 electron 會區別是 main process 還是 renderer process 的關係

接著讓按鈕監聽 click 事件

當按鈕被點擊後，透過 ipcRenderer 送訊息到 close-main-window 這個 channel

來和 main process 溝通

• mina.js

在 require electron 的時候，順便拿 ipcMain 這個 instance

然後在最後面，叫 ipcMain 監聽 close-main-window 這個 channel

當從這個 channel 收到訊息的時候，就把視窗關掉

• 執行程式

> npm install
> ./node_modules/.bin/electron .