Comunicación entre procesos

En las versiones actuales de electron para poder usar estos procesos en especial ipcRenderer, es necesario crear un puente con contextBridge.exposeInMainWorld, es la nueva forma segura de exponer estos procesos para ser usados en el renderer.
Les dejo la documentación

Actualización 2023

Repositorio de esta clase:

https://github.com/joseluis1061/imagepics/tree/c18_comunicacionEntreProcesos

Notas del curso:

https://alert-creator-660.notion.site/Electron-Image-Filters-5d101b019b264d1eb3adb95e33f28a21

Resumen de la clase:

• Electron corre sobre dos hilos
• El renderizado corre sobre su propio browser embebido de Chrome
• El main process que es su backend se ejecuta sobre node

Para ver como se envia y recibe información entre el frontend y el backend construiremos dos funciones que nos muestren esta interacción.

ipcMain

https://www.electronjs.org/es/docs/latest/api/ipc-main

Se comunica de forma asincrónica desde el proceso principal a los procesos de renderizado.

El módulo ipcMain es un Event Emitter. Cuando se utiliza en el proceso principal, maneja mensajes asincrónicos y sincrónicos enviados desde el proceso de renderizado (página web). Los mensajes enviados desde el renderizador serán emitidos a este módulo.

Ejemplo: IPC tutorial.

ipcRenderer

https://www.electronjs.org/es/docs/latest/api/ipc-renderer

Comunica asincrónicamente desde un proceso de renderizado al proceso principal.

Proceso: Renderer

El módulo ipcRenderer es un EventEmitter. Proporciona un par de métodos para enviar mensajes sincrónicos y asincrónicos desde el proceso de renderizado (página web) al proceso principal. También puede recibir respuestas del proceso principal.

Ejemplo IPC tutorial

Comunicando nuestro render y main

Objetivo: Crear dos funciones de tipo ipcRender y ipcMain para comunicar nuestro frontend y nuestro backend.

Archivos y cambios necesarios

1. Crearemos un modulo ipcRendererEvents.js con funcionalidades ipcRender para que detecten dos eventos ‘pink’ que indica que se envía información y pong para indicar que lo recibimos. Para ello tenemos dos funciones dentro del modulo:
   a. sendIpc ⇒ Envía un mensaje al backend con la fecha como dato adicional (Fecha)
   b. setIpc ⇒ Recibe un mensaje desde el backend de node JS con datos (Fecha)

   //import { ipcRenderer } from "electron";
   
   const { contextBridge, ipcRenderer } = require('electron')
   
   // Recibe un mensaje desde el backend de node JS
   function setIpc () {
       // Si se produce un evento pong recibira el evento y un argumento
       // El argumento esperado es la fecha desde el backend
       ipcRenderer.on('pong', (event, arg) => {
           console.log(`pong recibido en el frontend \n${arg}`);
       })
   }
   
   // Envia un mensaje al backend con la fecha como dato adicional
   function sendIpc () {
       console.log('sendIpc')
   
       // Al ejecutar esta función enviamos un mensaje y la fecha cuando se produjo
       ipcRenderer.send('ping', new Date());
   }
   
   module.exports={
       setIpc: setIpc,
       sendIpc: sendIpc
   }
   

2. El modulo renderer lo vamos a ligar a la ventana html de tal forma que al dar click sobre un botón open-directory me des encadene los eventos de envió y recepción de información.

<button **id="open-directory"** class="btn btn-default">
  <span class="icon icon-folder icon-text"></span>
  Abrir ubicación
</button>

1. Como el evento lo des encadenamos desde el html debemos crear una función que escuche el evento click. Esta función llamara las funciones sendIpc() que enviara nuestro mensaje y datos al backend. Por ahora estos eventos los hemos creado en el script frontend.js

// Comunicación entre procesos frontend a backend
function openDirectory () {
  // Detectamos el botón
  const openDirectory = document.getElementById('open-directory')
  // Si damos click sobre el 
  openDirectory.addEventListener('click', () => {
    // Enviamos un mensaje al backend
    sendIpc();
  })
}

1. Es necesario agregar el evento setIpc() en primer lugar cuando la ventana este cargada. Esto con la finalidad que este activo siempre que la pagina se cargue.

window.addEventListener('load', () => {
  setIpc(); //Comunicación entre eventos
  addImagesEvents();
  serchImagesEvent();
  selectEvent();
  openDirectory();
})

1. En nuestro archivo index.js tenemos las acciones del backend de nuestra aplicación.
2. Vamos a llamar el modulo ipcMain de electron para poder hacer la transmisión de información hacia nuestro proceso renderer.

const { app, BrowserWindow, ipcMain } = require('electron');

1. Vamos a crear un evento que escucha si desde el frontend nos envían información. Para ello lo hacemos detectando un evento llamado ping ipcMain.on(’pink’, () ⇒{acciones})

// Evento desde el backend
// Si desde el backend detecto un evento ping en el front
ipcMain.on('ping', (event, arg) => {
  // Verifico la información que me llego desde el frontend
  console.log(`ping recibido en el backend: \n ${arg}`);

  // Envia una respuesta del backend al frontend
  event.sender.send('pong', new Date());
})

1. El evento se llama pink porque es el evento que creamos en nuestro frontend y se des encadena por el click de un botón.
   a. La función lee el mensaje y de el toma los argumentos
   b. Y retorna una respuesta. Pong

El main process es el que siempre se está ejecutando en background (ipcMain), y el render process es la ventana (ipcRender).