Electron - Comunicazione tra processi
Electron ci fornisce 2 moduli IPC (Inter Process Communication) chiamati ipcMain e ipcRenderer.
Il ipcMainviene utilizzato per comunicare in modo asincrono dal processo principale ai processi di rendering. Quando viene utilizzato nel processo principale, il modulo gestisce i messaggi asincroni e sincroni inviati da un processo di rendering (pagina web). I messaggi inviati da un renderer verranno emessi in questo modulo.
Il ipcRendererviene utilizzato per comunicare in modo asincrono da un processo di rendering al processo principale. Fornisce alcuni metodi in modo da poter inviare messaggi sincroni e asincroni dal processo di rendering (pagina web) al processo principale. Puoi anche ricevere risposte dal processo principale.
Creeremo un processo principale e un processo di rendering che si invieranno messaggi a vicenda utilizzando i moduli di cui sopra.
Crea un nuovo file chiamato main_process.js con i seguenti contenuti -
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)Ora crea un nuovo file index.html file e aggiungi il seguente codice in esso.
<!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>Esegui l'app utilizzando il seguente comando:
$ electron ./main_process.jsIl comando precedente genererà il seguente output:
// On your app console
Sync Pong
Async Pong
// On your terminal where you ran the app
Sync Ping
Async PingSi consiglia di non eseguire calcoli di attività pesanti / bloccanti sul processo di rendering. Utilizzare sempre IPC per delegare queste attività al processo principale. Questo aiuta a mantenere il ritmo della tua applicazione.