ma première application nodejs electron

Avec electron nous pouvons faire des applications multi-os écrites en javascript.

Sur le site de Github nous avons le dépôt Quick start, malheureusement il n’y a rien sur la communication entre notre page html et l’application dans cet exemple, autant dire que l’intérêt en devient très minime. Nous allons donc y remédier en intégrant ce dispositif.

Dans un premier temps nous installons en local le dépot :

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies and run the app
npm install && npm start

Nous avons les fichiers index.html et renderer.js qui seront utilisés coté client (chromium) et de l’autre coté nous avons le fichier main.js le code source de l’application.
Nous allons faire dialoguer le client (renderer.js) avec l’application (main.js). Pour cela nous allons utiliser ipc qui va nous aider a faire une liaison asynchrone entre les deux.

Coté client :

Nous allons utiliser ipcRenderer
Ce module va nous servir à envoyer au messages au serveur mais aussi à réceptionner des messages venant du serveur.

Premièrement nous devons le charger dans notre fichier renderer.js, ensuite nous avons 2 méthodes. send pour envoyer et on pour récupérer le retour de l’application.

'use strict';
var ipcRenderer = require('electron').ipcRenderer;

// envoyer le message au serveur
ipcRenderer.send('test');

// reception du message retour venant du serveur
ipcRenderer.on('test-reply', (event, response) => {
    console.log(`client: test-reply: ${response}`);
});

Coté serveur :

nous allons utiliser ipcMain
Ce module va nous servir à réceptionner des messages venant du client mais aussi à envoyer des messages de retour au client.

Premièrement nous devons le charger dans notre fichier main.js, ensuite nous avons 2 méthodes. send pour envoyer une réponse et on pour récupérer le message du client.

// modification de la ligne de code existante de quick-start
const {Menu, Tray, ipcMain} = require('electron')

// réception du message du client
ipcMain.on('test', (event,query) => {
  console.log('application: test',event,query);
  event.sender.send('test-reply');
})

Maintenant nous avons dans notre quick-start de quoi faire un dialogue asynchrone entre notre interface html et notre application.

Un exemple

Pour illustrer cette communication, nous allons ajouter un formulaire à notre interface qui va envoyer une commande système à notre application. Le retour de cette commande sera affichée dans le navigateur.

1) Dans notre fichier index.html ajoutons un petit formulaire avec une zone pour la réception (#content) :

commande système : <input id="macommande-input" value="dir" />
<button id="submit-btn">Executer coté "serveur"</button>
<hr />
<div id="content">le retour serveur ...</div>

2) Dans notre fichier renderer.js (ou éventuellement dans index.html), récupérons la valeur de notre formulaire pour l’envoyée à l’application

'use strict';

var ipcRenderer = require('electron').ipcRenderer;

// envoyer le message au serveur
document.getElementById('submit-btn').addEventListener('click', () => {
    ipcRenderer.send('macommande', {
        'command':document.getElementById('grep-input').value
    });
    console.log('client send: macommande');
});

// reception du message retour venant du serveur
ipcRenderer.on('macommande-reply', (event, response) => {
    let html=`<code>${response.txt}</code><div><b>${response.error}</b></i></div>`;
    document.getElementById('content').innerHTML =html;
    console.log('client: macommande-reply: ' + response.txt);
});

Le premier bloc envoi à l’application la valeur dans le formulaire
Le deuxième récupère le retour de l’application et l’affiche dans l’interface

3) Dans notre fichier main.js, nous récupérons la valeur du formulaire, nous exécutons la commande coté application et retournons un message à l’interface

ipcMain.on('runcommande', (event,query) => {
  console.log('macommande-reply',event,query);
  let child = exec(query.command,{shell: '/bin/bash'}, (err, stdout, stderr) =>     {
    console.log(`commande shell ${query.command}:\n`,stdout, stderr);
    // envoi du retour de la commande
    event.sender.send('macommande-reply',{
      "txt":stdout,
      "error":stderr
    });
  });
})

Pour lancer l’application, utiliser la commande

electron .

Notre application électron va maintenant exécuter des commandes système et retourner le résultat dans son interface en utilisant un système de communication asynchrone.

Share Button