J’ai déjà parlé du module ipc (inter-process communication) dans les précédents articles pour la création des menus. On a vu qu’une application Electron est séparée en deux parties : le processus principal (main process) et le processus de rendu (render process), et bien souvent on a besoin de les faire communiquer. C’est alors là qu’intervient le module ipc, ou plutôt les modules ipc parce qu’il y en existe pour chaque processus.

On va encore partir de l’application de démarrage rapide :

git clone https://github.com/electron/electron-quick-start electron
cd electron
npm install
npm start

Cette application d’exemple est parfaite pour l’apprentissage mais ne doit pas être utilisée pour créer une application réelle.
On verra qu’il existe des boilerplates bien mieux structurés et efficaces.

Message synchrone

Comme toujours avec Javascript on peut avoir du synchrone ou de l’asynchrone. Voyons dans un premier temps la première possibilité qui est sans doute celle que vous utiliserez le moins parce que c’est rarement une bonne idée de tout bloquer pour attendre une réponse…

Disons qu’on va envoyer un message à partir du processus de rendu et attendre une réponse :

Pour faire simple on va prévoir dans la page Html un bouton pour envoyer le message et une zone pour afficher la réponse :

<button id="envoiSyncMessage">Envoi message au processus principal (main process)</button>
<p id="syncReponse">On attend la réponse...</p>

Processus de rendu

Dans le fichier renderer.js on va charger le module ipcRenderer :

const ipc = require('electron').ipcRenderer

On prend ensuite une référence du bouton :

const btn = document.getElementById('envoiSyncMessage')

Ensuite on va capter le clic du bouton, envoyer le message et attendre la réponse :

btn.addEventListener('click', function () {
    const reponse = ipc.sendSync('message-synchrone', 'Allez hop !')
    document.getElementById('syncReponse').innerHTML = reponse
})

On trouve toute la documentation du module ici. Et en particulier on a une méthode sendSync pour envoyer un message synchrone. On doit prévoir comme premier paramètre un nom de canal et ensuite autant d’arguments qu’on veut.

Processus principal

Il nous faut maintenant mettre en place le code dans le processus principal (main.js).

On charge le module ipcMain :

const ipc = electron.ipcMain

La documentation pour ce module est ici.

On va ensuite attendre la réponse et répondre :

ipc.on('message-synchrone', function (event, arg) {
  console.log(arg)
  event.returnValue = 'Oui voilà je réponds !'
})

On a le canal (message-synchrone) et un listener. On affiche le message qui arrive dans la console (le processus principal ne peut rien afficher) et on envoie la réponse.

Quand on lance l’application et qu’on clique sur le bouton on a :

Et dans la console :

On a bien eu l’aller-retour !

Message asynchrone

On va faire la même chose mais avec un message asynchrone.

Processus de rendu

On va donc prévoir dans la page Html un bouton pour envoyer le message et une zone pour afficher la réponse :

<button id="envoiAsyncMessage">Envoi message au processus principal (main process)</button>
<p id="asyncReponse">On attend la réponse...</p>

On prend ensuite une référence du bouton :

const btn = document.getElementById('envoiAsyncMessage')

Ensuite on va capter le clic du bouton, envoyer le message  :

btn.addEventListener('click', function () {
    ipc.send('message-asynchrone', 'Allez hop !')
})

Cette fois on utilise la méthode send.

Mais cette fois on doit mettre en place une écoute pour la réponse :

ipc.on('reponse-asynchrone', function (event, arg) {
    document.getElementById('asyncReponse').innerHTML = arg
})

Processus principal

Il nous faut maintenant mettre en place le code dans le processus principal (main.js).

On charge le module ipcMain :

const ipc = electron.ipcMain

On va ensuite attendre la réponse et répondre :

ipc.on('message-asynchrone', function (event, arg) {
    console.log(arg)
    event.sender.send('reponse-asynchrone', 'Oui voilà je réponds !')
})

Et on vérifie que ça fonctionne :

Maintenant vous savez faire communiquer les deux processus d’Electron !