- [A][A]
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.
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');
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: {} };
});
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».