Electron - Communication Inter Process
Electron nous fournit 2 modules IPC (Inter Process Communication) appelés ipcMain et ipcRenderer.
le ipcMainLe module est utilisé pour communiquer de manière asynchrone entre le processus principal et les processus de rendu. Lorsqu'il est utilisé dans le processus principal, le module gère les messages asynchrones et synchrones envoyés à partir d'un processus de rendu (page Web). Les messages envoyés depuis un moteur de rendu seront émis vers ce module.
le ipcRendererLe module est utilisé pour communiquer de manière asynchrone entre un processus de rendu et le processus principal. Il fournit quelques méthodes pour que vous puissiez envoyer des messages synchrones et asynchrones du processus de rendu (page Web) au processus principal. Vous pouvez également recevoir des réponses du processus principal.
Nous allons créer un processus principal et un processus de rendu qui s'enverront mutuellement des messages en utilisant les modules ci-dessus.
Créez un nouveau fichier appelé main_process.js avec le contenu suivant -
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)Maintenant, créez un nouveau index.html fichier et ajoutez-y le code suivant.
<!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>Exécutez l'application à l'aide de la commande suivante -
$ electron ./main_process.jsLa commande ci-dessus générera la sortie suivante -
// On your app console
Sync Pong
Async Pong
// On your terminal where you ran the app
Sync Ping
Async PingIl est recommandé de ne pas effectuer de calcul de tâches lourdes / bloquantes sur le processus de rendu. Utilisez toujours IPC pour déléguer ces tâches au processus principal. Cela aide à maintenir le rythme de votre application.