Electronjs comunicación entre el back y el front

Las aplicaciones Electron trabajan en dos áreas o zonas separadas, el back o comunicación con el sistema operativo y el front o interacción del usuario y presentación de información, desde un área no se puede acceder a las variables y métodos de la otra directamente, pero necesitamos muchas veces pasarnos valores y ejecutar acciones.

Con esa finalidad en Electronjs tenemos dos utilidades remote e ipc.

Remote

La primera remote nos permite recoger variables globales del back en el front, esas variables llegan con el valor que tienen al iniciar la aplicación y no reconocen cambios en la misma después de ese momento, para poder manejarlas en el front, primero tenemos que cargar la librería:

const remote = require('electron').remote;

En el back podemos crear una variable global:

global.basepath = basepath;

Y en el front la recogeremos:

const basepath = remote.getGlobal('basepath');

IPC

La forma más útil de comunicación entre las dos áreas es la librería IPC que provee de un sistema de comunicación bidireccional a las dos áreas de la aplicación Electron.

Desde el front hacemos peticiones al back usando ipcRenderer, pasandole un string (en el ejemplo: «delinm») que se utiliza para identificar en el back la llamada y retornar el valor que se haya programado, pasamos también un objeto de datos que puede ser un json o un string. Por ejemplo:

let result = ipcRenderer.sendSync('delinm'), { usu:usu, dato:inm } };

Detrás escribimos el código que se dispara cuando el back nos devuelve una respuesta:

if (result.result == "ok") {
 inmus = result.dato;
cerrarEditorInmu();
 }else{
console.log("cambios en el inmueble no guardados");               
}

En el back usamos ipcMain que identifica el valor de conexión (en el ejemplo: delinm) que tiene que ser el mismo que se usa en el front, declara un evento que sera el que dispara la acción y recibe unos argumentos, una vez ejecutado su código devuelve una respuesta mediante (event.returnValue), devolviendo un string o json :

ipcMain.on('delinm', (event, arg) => {
// ejecutamos el código que queramos
event.returnValue = { result: ’ok’, dato: {} };
});

Pasar un archivo seleccionado en el front al back

Otra tarea de comunicación entre las áreas que nos podemos encontrar es que el usuario selecciona un archivo mediante un campo file de un formulario y necesitamos que el back proceso el archivo o algo de su contenido, usamos también en el front ipcRenderer y le pasamos al back el path total del archivo:

var file = evt.target.files[0];
let result = ipcRenderer.sendSync("leearchivo", { path: file.path } );

En el back usando la librería de npm fs (que previamente la habremos instanciado), leemos el contenido del archivo identificado por el path:

ipcMain.on(' leearchivo ', (event, arg) => {
let content = fs.readFileSync(arg.dato.path); 
event.returnValue = { result: ’ok’, dato: {} };
});

---

El artículo anterior fue «Iniciar un proyecto Electron» y el siguiente artículo «manejo de archivos en Electron mediante fs».