Модули IPC Electron и способы их использования

Фреймворк Electron от Github - отличный инструмент, позволяющий быстро и легко создавать кроссплатформенные настольные приложения. Он работает на движке Google Chromium и предоставляет нам хорошие возможности клиентских и серверных процессов Javascript. Хотя у него есть свои недостатки, на мой взгляд, хорошее намного перевешивает плохое, поскольку позволяет веб-разработчикам быстро переходить на нативную разработку, сохраняя при этом те веб-технологии, которые им нравятся: HTML, CSS и JavaScript. Существует множество руководств, которые помогут вам настроить очень простое электронное приложение, но когда вы начнете переходить к созданию более глубоких приложений, вам понадобятся знания модулей Ipc.

Давайте начнем

Обычно, когда вы начинаете, у вас есть два файла Javascript в вашем приложении Electron. Сначала у вас есть ваш main.js, который похож, но никоим образом не эквивалентен серверу в веб-коде, и у вас есть ваш app.js, который похож на код на стороне клиента. Что делают модули IPC, так это отправляют информацию между вашим main.js и вашими различными файлами на стороне клиента, которыми в нашем случае является просто единственный app.js. Первое, что мы хотим сделать, это включить каждый модуль в наш код. Поскольку Electron работает на узле, нам разрешено запрашивать вещи напрямую, без таких модулей, как browserify. В коде на стороне вашего клиента требуется рендерер ipc:

var ipcRenderer = require(‘electron’).ipcRenderer; 

Затем в файле main.js напишите:

var ipcMain = require(‘electron’).ipcMain;

Мы можем потребовать только ipc в обоих местах, но это упрощает понимание кода.

Отправка и получение данных

Допустим, нам нужно запустить некоторые дочерние процессы в электронном виде на основе случайного ввода пользователя. Нам нужно будет настроить несколько прослушивателей событий на стороне клиента и запустить дочерний процесс в основном файле. В нашем рендерере мы можем настроить своего рода прослушиватель событий, используя ванильный Javaascript, jQuery или что-то еще, а затем написать:

ipc.send(‘user-data’, data);

который будет асинхронно отправлять данные в ваш основной процесс с тегом user-data. Этот тег может быть любым. Если по какой-либо причине вы хотите отправлять информацию синхронно, просто замените ipc.send на ipc.sendSync. Затем в вашем основном процессе вы должны настроить прослушиватель событий, который будет проверять, отправил ли ваш рендерер какую-либо информацию. Ты можешь написать:

ipc.on(‘user-data’, function(event, arg) {
  console.log(arg);
  //do child process or other data manipulation and name it manData
  event.sender.send(‘manipulatedData’, manData);
});

Этот фрагмент прослушивает «пользовательские данные», которые были отправлены вашим средством визуализации, и позволяет вам манипулировать и использовать данные. Во многих случаях этого недостаточно. Мы хотим отправить конечный продукт наших манипуляций с данными или, в данном случае, дочерний процесс, и позволить пользователю увидеть его. Мы делаем это, отправляя эти новые данные обратно нашему рендереру с помощью event.sender.send. Опять же, имя тега не имеет значения. Наконец, мы хотим настроить прослушиватель на рендерере, который будет получать обрабатываемые данные и отображать их для пользователя.

ipc.on(‘manipulatedData’, function(arg) { 
  console.log(arg); 
  //Display data
});

Есть и другие прослушиватели событий, которые немного более детализированы, но каждый из них выполняет несколько иную версию того же, что я подробно описал выше.