อิเล็กตรอน - การสื่อสารระหว่างกระบวนการ
Electron ให้โมดูล IPC (Inter Process Communication) 2 โมดูลที่เรียกว่า ipcMain และ ipcRenderer.
ipcMainโมดูลใช้เพื่อสื่อสารแบบอะซิงโครนัสจากกระบวนการหลักไปยังกระบวนการแสดงผล เมื่อใช้ในกระบวนการหลักโมดูลจะจัดการข้อความแบบอะซิงโครนัสและซิงโครนัสที่ส่งจากกระบวนการแสดงผล (หน้าเว็บ) ข้อความที่ส่งจากเครื่องแสดงผลจะถูกส่งไปยังโมดูลนี้
ipcRendererโมดูลถูกใช้เพื่อสื่อสารแบบอะซิงโครนัสจากกระบวนการแสดงผลไปยังกระบวนการหลัก มีวิธีการสองสามวิธีเพื่อให้คุณสามารถส่งข้อความซิงโครนัสและอะซิงโครนัสจากกระบวนการ renderer (หน้าเว็บ) ไปยังกระบวนการหลัก คุณยังสามารถรับการตอบกลับจากกระบวนการหลัก
เราจะสร้างกระบวนการหลักและกระบวนการแสดงผลที่จะส่งข้อความถึงกันโดยใช้โมดูลข้างต้น
สร้างไฟล์ใหม่ชื่อ main_process.js โดยมีเนื้อหาดังต่อไปนี้ -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
const {ipcMain} = require('electron')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
// Event handler for asynchronous incoming messages
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg)
// Event emitter for sending asynchronous messages
event.sender.send('asynchronous-reply', 'async pong')
})
// Event handler for synchronous incoming messages
ipcMain.on('synchronous-message', (event, arg) => {
console.log(arg)
// Synchronous event emmision
event.returnValue = 'sync pong'
})
app.on('ready', createWindow)ตอนนี้สร้างไฟล์ index.html ไฟล์และเพิ่มรหัสต่อไปนี้ในนั้น
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Hello World!</title>
</head>
<body>
<script>
const {ipcRenderer} = require('electron')
// Synchronous message emmiter and handler
console.log(ipcRenderer.sendSync('synchronous-message', 'sync ping'))
// Async message handler
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg)
})
// Async message sender
ipcRenderer.send('asynchronous-message', 'async ping')
</script>
</body>
</html>เรียกใช้แอปโดยใช้คำสั่งต่อไปนี้ -
$ electron ./main_process.jsคำสั่งดังกล่าวจะสร้างผลลัพธ์ต่อไปนี้ -
// On your app console
Sync Pong
Async Pong
// On your terminal where you ran the app
Sync Ping
Async Pingขอแนะนำว่าอย่าทำการคำนวณงานหนัก / บล็อกในกระบวนการแสดงผล ใช้ IPC เพื่อมอบหมายงานเหล่านี้ให้กับกระบวนการหลักเสมอ ซึ่งจะช่วยในการรักษาความเร็วของแอปพลิเคชันของคุณ