کار با Electron IPC

ایجاد برنامه های دسکتاپ با استفاده از Electron IPC – بخش دوم از آموزش کار با Http (مشاهده بخش اول)
ما در مسیر خود بسیار پیشرفت کرده ایم و اپلیکیشن رمزنگاری شده ما درحال شکل گیری است. دراین صورت نیاز داریم تا به کاربران اجازه تعیین چهارچوبی برای ارزش گذاری از یک ویندوز ثانویه به ویندوز اصلی اپلیکیشن بدهیم.
به این منظور، از Electron IPC استفاده میکنیم که داده JSON را بین دو فرایند اصلی و رندرر ارسال می کند.

IPC Main

IPC فرایند اصلی می تواند پیام های همزمان و غیر همزمان که از یک فرایند رندرر فرستاده می شود را دریافت کند (مثل add.html ویندوز ما). همچنین می تواند پیام ها را ارسال و به آنها پاسخ دهد.
برای شروع میخواهیم IPC فرایند اصلی را در /main.js معین کنیم :

// Other const's removed for brevity

const ipc = require('electron').ipcMain

سپس در پایین این فایل، اضافه میکنیم:

ipc.on('update-notify-value', function (event, arg) {
  win.webContents.send('targetPriceVal', arg)
})

ما از ماژول ipc.on() برای تعیین نام یک پیام که از پنجره add.html فرستاده می شود استفاده و به محض دریافت میزان موفقیت را ارزیابی میکنیم، که به پنجره index.html ما و .webContents.send() برای ارسال میزان انتقال داده شده، محدود می شود. آن را targetPriceVal می نامیم و به مقدار arg است.
نکته: IPC فرایند اصلی روش های دیگری نیز دارد که به شما اجازه میدهد تا IPC فرایند رندرر که پیام فرستاده را پاسخ دهید. مشاهده

IPC Renderer

اجازه دهید IPC فرایند رندرر را در فایل /src/add.js تکمیل کنیم:

// Other const's removed for brevity

const ipc = electron.ipcRenderer

سپس در پایان این فایل اضافه کنید:

const updateBtn = document.getElementById('updateBtn')

updateBtn.addEventListener('click', function () {
  ipc.send('update-notify-value', document.getElementById('notifyVal').value)

  // Close this window
  var window = remote.getCurrentWindow();
  window.close();
})

وقتی دکمه اپدیت زده شد، از ipc.send()ابتدا برای قرار دادن نام پیام، و سپس ارزش ورودی استفاده میکنیم.
سپس add.html پنجره جاری را می بندیم.
همچنین باید IPC فرایند رندرر را در /src/index.html برای دریافت و تنظیم پیام فرستاده شده از main.js، IPC فرایند اصلی تکمیل کنیم.

// Other const's removed for brevity
const ipc = electron.ipcRenderer

var price = document.querySelector('h1')

// Add these two variables
var targetPriceVal;
var targetPrice = document.getElementById('targetPrice')

پایین همان فایل اضافه کنید:

ipc.on('targetPriceVal', function (event, arg) {
    targetPriceVal = Number(arg);
    targetPrice.innerHTML = '$'+targetPriceVal.toLocaleString('en')
})

و تمام، حالا می توانید npm start را اجرا کنید، روی notify کلیک کرده، ارزش جدیدی تنظیم کنید، روی دکمه اپدیت کلیک کرده و ارزش معین شده ماننده نمونه منعکس خواهد شد:


همانطور که می بینید، داده ها مانند نمونه درحال جریان است:
IPC Renderer -> IPC Main -> IPC Renderer
..یا.. add.html -> IPC Main -> index.html
حالا که یک ارزش هشدار تعیین کردیم، اجازه دهید وقتی ارزش فعلی از ارزش تعین شده توسط کاربر تجاوز کرد، (پیام) هشدار دسکتاپ بومی ظاهر شود.


مجموعه: Electron
1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5٫00 out of 5)
Loading...
counter customizable free hit