Aprende a ejecutar una función del proceso principal dentro de la vista (proceso de renderizado) dentro de Electron.

En algunos casos, necesitará ejecutar funciones que solo son accesibles a nivel del proceso principal, además puede ser útil ejecutar algún código JS que pueda bloquear la interfaz de usuario debido a su costosa ejecución. Esto se puede hacer fácilmente con JavaScript y con algún conocimiento de las funciones de exportación, sin embargo, si desea seguir las pautas de Electron, le recomendamos que utilice el módulo ipcMain  y el módulo ipcRenderer de Electron que le ayudarán a comunicarse asincrónicamente desde el proceso a los procesos del renderizador.

1. Configure el detector de eventos en el proceso principal

Lo primero que debe hacer es crear un detector de eventos en el proceso principal utilizando el módulo ipcMain. Funciona bastante fácil y directo, solo adjunta un detector de eventos cuya devolución de llamada se ejecutará una vez que el módulo ipcRenderer (en la vista) solicite su ejecución.

Por lo tanto, adjunte el detector de eventos dentro de un archivo que se ejecuta en el proceso principal, como main.js:

// In some file from the main process
// like main.js
const {ipcMain} = require('electron');

// Attach listener in the main process with the given ID
ipcMain.on('request-mainprocess-action', (event, arg) => {
    // Displays the object sent from the renderer process:
    //{
    //    message: "Hi",
    //    someData: "Let's go"
    //}
    console.log(
        arg
    );
});

Dentro de la devolución de llamada, el código que desea ejecutar en el proceso principal. En este caso, solo estamos mostrando en la consola (de la consola que inicia la aplicación Electron) los datos enviados en el proceso de renderizado (vista). Para saber cómo activar esta devolución de llamada, consulte el siguiente paso.

2. Activa el evento desde el proceso de renderizado.

Ahora, si está seguro de que ya hay un detector de eventos de IPC en el proceso principal, puede activarlo con su ID en el proceso de representación. Para que quede claro, lo vamos a ejecutar desde el archivo de índice dentro de una etiqueta de script:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Electron Application</title>

        <!-- Use minimum-scale=1 to enable GPU rasterization -->
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, maximum-scale=1, minimum-scale=1">
    </head>
    <body>
        <div id="app"></div>

        <script>
            /**
             * The code can be included in some JS file and included
             * via require or <script> in the renderer process
             */

            const { ipcRenderer } = require('electron');

            // Some data that will be sent to the main process
            let Data = {
                message: "Hi",
                someData: "Let's go"
            };

            // Send information to the main process
            // if a listener has been set, then the main process
            // will react to the request !
            ipcRenderer.send('request-mainprocess-action', Data);
        </script>
    </body>
</html>

Usando en este caso, como estamos en la vista, el módulo ipcRenderer, solo necesitas ejecutar el método de envío desde él, que espera como primer argumento el ID del evento que se disparará y como segundo argumento un objeto, cadena, booleano con la información que desea enviar desde el proceso del renderizador al principal.

3. Solicitud y envío de información

Si desea enviar datos en lugar de solo ejecutar una devolución de llamada, puede seguir el mismo proceso, sin embargo, use el objeto event.sender para enviar información desde el proceso principal al proceso de renderizado y agregue un oyente con el IPCRenderer en la vista:

Proceso principal

// En algún archivo del proceso principal
// como main.js
const {ipcMain} = require('electron');

// Adjuntar oyente en el proceso principal con la ID dada
ipcMain.on('request-mainprocess-action', (event, arg) => {
    // Muestra el objeto enviado desde el proceso de renderizado:
    //{
    //    message: "Hi",
    //    someData: "Let's go"
    //}
    console.log(
        arg
    );

    // Devuelve algunos datos al proceso del renderizador con el ID de respuesta del proceso principal
    event.sender.send('mainprocess-response', "Hello World!");
});

Proceso de renderizado

/**
 * El código puede incluirse en algún archivo JS e incluirse
 * a través de require o <script> en el proceso de renderizado
*/

const { ipcRenderer } = require('electron');

// Algunos datos que se enviarán al proceso principal
let Data = {
    message: "Hi",
    someData: "Let's go"
};

// Agregue el detector de eventos para la respuesta del proceso principal
ipcRenderer.on('mainprocess-response', (event, arg) => {
    console.log(arg); // prints "Hello World!"
});

// Enviar información al proceso principal
// si se ha configurado un oyente, entonces el proceso principal
// ¡reaccionará a la solicitud!
ipcRenderer.send('request-mainprocess-action', Data);

Que te diviertas ❤️!


Ingeniero de Software Senior en EPAM Anywhere. Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores