Учебники

Электрон — межпроцессное взаимодействие

Февраль 4, 2019

Electron предоставляет нам 2 модуля IPC ( межпроцессное взаимодействие ), которые называются ipcMain и ipcRenderer .

Модуль ipcMain используется для асинхронной связи от основного процесса к процессам визуализации. При использовании в основном процессе модуль обрабатывает асинхронные и синхронные сообщения, отправленные процессом рендерера (веб-страница). Сообщения, отправленные средством визуализации, будут отправляться в этот модуль.

Модуль ipcRenderer используется для асинхронной связи между процессом визуализации и основным процессом. Он предоставляет несколько методов, чтобы вы могли отправлять синхронные и асинхронные сообщения из процесса визуализации (веб-страницы) в основной процесс. Вы также можете получить ответы от основного процесса.

Мы создадим основной процесс и процесс рендеринга, которые будут отправлять друг другу сообщения, используя вышеупомянутые модули.

Создайте новый файл с именем main_process.js со следующим содержимым — 

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

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

// Event handler for asynchronous incoming messages
ipcMain.on('asynchronous-message', (event, arg) => {
   console.log(arg)

   // Event emitter for sending asynchronous messages
   event.sender.send('asynchronous-reply', 'async pong')
})

// Event handler for synchronous incoming messages
ipcMain.on('synchronous-message', (event, arg) => {
   console.log(arg) 

   // Synchronous event emmision
   event.returnValue = 'sync pong'
})

app.on('ready', createWindow)

Теперь создайте новый файл index.html и добавьте в него следующий код. 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
   </head>
   
   <body>
      <script>
         const {ipcRenderer} = require('electron')

         // Synchronous message emmiter and handler
         console.log(ipcRenderer.sendSync('synchronous-message', 'sync ping')) 

         // Async message handler
         ipcRenderer.on('asynchronous-reply', (event, arg) => {
            console.log(arg)
         })

         // Async message sender
         ipcRenderer.send('asynchronous-message', 'async ping')
      </script>
   </body>
</html>

Запустите приложение, используя следующую команду — 

$ electron ./main_process.js

Приведенная выше команда сгенерирует следующий вывод: 

// On your app console
Sync Pong
Async Pong

// On your terminal where you ran the app
Sync Ping
Async Ping

Рекомендуется не выполнять вычисления тяжелых / блокирующих задач в процессе рендеринга. Всегда используйте IPC для делегирования этих задач основному процессу. Это помогает поддерживать темп вашего приложения.

93
Share: