Как выполнить функцию основного процесса внутри процесса рендеринга в Electron Framework

В некоторых случаях вам нужно будет выполнять функции, которые доступны только на уровне основного процесса, кроме того, может быть полезно выполнить некоторый код JS, который может заблокировать пользовательский интерфейс из-за его дорогостоящего выполнения. Это можно легко сделать с помощью JavaScript и с некоторыми знаниями о функциях экспорта, однако, если вы хотите следовать рекомендациям Electron, мы рекомендуем вам использовать модуль ipcMain и модуль ipcRenderer Электрон, который поможет вам общаться асинхронно от основного процесса к процессам рендеринга.

1. Установите прослушиватель событий в основном процессе

Первое, что вам нужно сделать, это создать прослушиватель событий в главном процессе с помощью модуля ipcMain. Это работает довольно просто и прямо, вы только присоединяете прослушиватель событий, обратный вызов которого будет выполнен, как только модуль ipcRenderer (в представлении) запросит его выполнение.

Итак, подключите прослушиватель событий внутри файла, который выполняется в основном процессе, например 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
);
});

Внутри обратного вызова — код, который вы хотите выполнить в основном процессе. В этом случае мы показываем только в консоли (консоли, которая запускает приложение Electron) данные, отправленные в процессе рендеринга (просмотра). Чтобы узнать, как вызвать этот обратный вызов, проверьте следующий шаг.

2. Запустите событие из процесса визуализации.

Теперь, если вы уверены, что в главном процессе уже есть прослушиватель событий IPC, вы можете запустить его с его идентификатором в процессе визуализации. Чтобы сделать это ясно, мы собираемся выполнить его из индексного файла внутри тега скрипта:

Electron Application
/**
* The code can be included in some JS file and included
* via require or  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);

Используя в этом случае, как мы видим, модуль ipcRenderer, вам нужно только выполнить из него метод send, который ожидает в качестве первого аргумента идентификатор события, которое будет инициировано, а в качестве второго аргумента объект, строку, логическое с информацией, которую вы хотите отправить из процесса рендеринга в основной.

3. Запрос и отправка информации

Если вы хотите отправлять данные, а не только выполнять обратный вызов, вы можете выполнить тот же процесс, однако используя объект event.sender для отправки информации из основного процесса в процесс визуализации и добавив прослушиватель с IPCRenderer в представлении:

Основной процесс

// 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
);
// Return some data to the renderer process with the mainprocess-response ID
event.sender.send('mainprocess-response', "Hello World!");
});

Процесс рендеринга

/**
* The code can be included in some JS file and included
* via require or  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"
};
// Add the event listener for the response from the main process
ipcRenderer.on('mainprocess-response', (event, arg) => {
console.log(arg); // prints "Hello World!"
});
// 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);