ارتباط بین فرآیند (IPC) در الکترون – آموزش Electron

چهارشنبه ۱۷ بهمن ۱۳۹۷
بازدید ۱,۷۴۶ نفر
سعید سیفی زاده
(5 امتیاز از 1 رای)
Loading...

تصویر electron-inter-process-communication_5808 ارتباط بین فرآیند (IPC) در الکترون - آموزش Electron

ارتباط بین فرآیند (IPC) در الکترون

الکترون دو ماژول IPC (Inter Process Communication) به نام های ipcMain و ipcRenderer را برای ما فراهم می کند. ماژول ipcMain برای برقراری ارتباط ناهمگام (Asynchronous) بین فرآیند اصلی (Main Process) و فرآیند های رندر کننده (Renderer Processes) استفاده می شود. زمانی که این ماژول در فرآیند اصلی مورد استفاده قرار گیرد، پیام هایی که به صورت همگام و ناهمگام از فرآیند رندر کننده (صفحه وب) دریافت می شوند را هندل می کند. پیام های ارسال شده از یک رندر کننده در این ماژول منتشر می شود.

ماژول ipcRenderer به منظور برقراری ارتباط ناهمگام (Asynchronous) بین فرآیند رندر کننده (Renderer Process) و فرآیند اصلی (Main Process) در الکترون استفاده می شود. این ماژول متدهایی دارد که می توان از آن ها برای ارسال پیام به صورت همگام و ناهمگام از فرآیند رندر کننده (صفحه وب) به فرآیند اصلی (Main Process) استفاده کرد. همچنین امکان دریافت پاسخ های ارسال شده از طرف فرآیند اصلی نیز وجود دارد.

در ادامه ما یک فرآیند اصلی و یک فرآیند رندر کننده ایجاد خواهیم کرد که با استفاده از ماژول های فوق پیام هایی به یکدیگر ارسال می کنند.

یک فایل جدید با نام 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)

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>

<!DOCTYPE html>

<html>

<head>

<title>Hello World!</title>

</head>

<body>

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

1	$ electron ./main_process.js

برنامه بالا خروجی زیر را تولید خواهد کرد:

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

// On your app console

Sync Pong

Async Pong

// On your terminal where you ran the app

Sync Ping

Async Ping

توصیه می شود که محاسبات، وظایف سنگین و مسدود کننده را در فرآیند رندر کننده انجام ندهید. همیشه از IPC برای سپردن این وظایف به فرآیند اصلی استفاده کنید. این موضوع باعث می شود تا سرعت برنامه نوشته شده با الکترون بهتر شود.

الکترون - System Dialogs الکترون - کتابخانه های Node.js