Elektron - Komunikasi Proses Antar
Electron memberi kita 2 modul IPC (Inter Process Communication) yang disebut ipcMain dan ipcRenderer.
Itu ipcMainmodul digunakan untuk berkomunikasi secara asinkron dari proses utama ke proses penyaji. Saat digunakan dalam proses utama, modul menangani pesan asinkron dan sinkron yang dikirim dari proses perender (halaman web). Pesan yang dikirim dari perender akan dikirim ke modul ini.
Itu ipcRenderermodul digunakan untuk berkomunikasi secara asinkron dari proses penyaji ke proses utama. Ini menyediakan beberapa metode sehingga Anda dapat mengirim pesan sinkron dan asinkron dari proses perender (halaman web) ke proses utama. Anda juga dapat menerima balasan dari proses utama.
Kami akan membuat proses utama dan proses renderer yang akan saling mengirim pesan menggunakan modul di atas.
Buat file baru bernama main_process.js dengan konten berikut -
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)Sekarang buat yang baru index.html file dan tambahkan kode berikut di dalamnya.
<!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>Jalankan aplikasi menggunakan perintah berikut -
$ electron ./main_process.jsPerintah di atas akan menghasilkan output berikut -
// On your app console
Sync Pong
Async Pong
// On your terminal where you ran the app
Sync Ping
Async PingDirekomendasikan untuk tidak melakukan komputasi tugas berat / pemblokiran pada proses renderer. Selalu gunakan IPC untuk mendelegasikan tugas ini ke proses utama. Ini membantu dalam menjaga kecepatan aplikasi Anda.