Main Process এবং Renderer Process

ইলেকট্রন (Electron) - Web Development

359

Electron অ্যাপ্লিকেশন দুইটি প্রধান প্রক্রিয়া (Processes) নিয়ে কাজ করে: Main Process এবং Renderer Process। এই দুইটি প্রক্রিয়া একসঙ্গে কাজ করে পুরো অ্যাপ্লিকেশন পরিচালনা করে।

Main Process

সংজ্ঞা

Main Process হলো Electron অ্যাপ্লিকেশনের কেন্দ্রীয় নিয়ন্ত্রক। এটি অ্যাপ্লিকেশনের জীবনচক্র (Lifecycle) এবং উইন্ডো ম্যানেজমেন্ট পরিচালনা করে।

বৈশিষ্ট্য

এক অ্যাপ্লিকেশনে কেবল একটি Main Process থাকে।
এটি Node.js API পুরোপুরি ব্যবহার করতে পারে।
Main Process অ্যাপ্লিকেশনের BrowserWindow তৈরি করে এবং নিয়ন্ত্রণ করে।
এটি Renderer Process এর সাথে যোগাযোগ করে IPC (Inter-Process Communication) এর মাধ্যমে।

কাজ

অ্যাপের শুরু এবং বন্ধ করার কাজ পরিচালনা।
উইন্ডো তৈরি এবং কন্ট্রোল করা।
ফাইল সিস্টেম এবং অন্যান্য সিস্টেম লেভেল কাজ পরিচালনা করা।

উদাহরণ

main.js:

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  mainWindow.loadFile('index.html');
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

Renderer Process

সংজ্ঞা

Renderer Process হলো Electron অ্যাপ্লিকেশনের ভিজ্যুয়াল ইন্টারফেস রেন্ডার করার জন্য দায়ী। এটি প্রতিটি উইন্ডোতে আলাদা প্রক্রিয়া হিসেবে কাজ করে।

বৈশিষ্ট্য

প্রতিটি BrowserWindow এর জন্য একটি Renderer Process তৈরি হয়।
এটি Chromium ব্যবহার করে UI রেন্ডার করে।
Renderer Process সীমিত Node.js ফিচার ব্যবহার করতে পারে (কনফিগারেশন অনুযায়ী)।
এটি Main Process এর সাথে IPC (Inter-Process Communication) এর মাধ্যমে যোগাযোগ করে।

কাজ

HTML, CSS, এবং JavaScript ব্যবহার করে UI তৈরি এবং প্রদর্শন।
ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা।
Main Process থেকে ডেটা গ্রহণ এবং প্রদর্শন।

উদাহরণ

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Renderer Process</title>
</head>
<body>
  <h1>Welcome to Renderer Process</h1>
  <script>
    console.log("Renderer Process চলছে!");
  </script>
</body>
</html>

Main Process এবং Renderer Process এর মধ্যে পার্থক্য

বৈশিষ্ট্য	Main Process	Renderer Process
কাজের ধরন	অ্যাপ্লিকেশনের লাইফসাইকেল এবং উইন্ডো ম্যানেজমেন্ট।	UI রেন্ডার এবং ব্যবহারকারীর ইন্টারঅ্যাকশন।
সংখ্যা	একটিমাত্র।	একাধিক হতে পারে (প্রতি উইন্ডোর জন্য)।
API অ্যাক্সেস	Node.js API পুরোপুরি অ্যাক্সেস।	সীমিত Node.js API (কনফিগারেশন নির্ভর)।
যোগাযোগ	Renderer Process এর সাথে IPC এর মাধ্যমে।	Main Process এর সাথে IPC এর মাধ্যমে।
উদাহরণ	BrowserWindow তৈরি এবং নিয়ন্ত্রণ।	HTML এবং CSS ব্যবহার করে UI তৈরি।

Main Process এবং Renderer Process এর সমন্বয়

Main Process এবং Renderer Process এর মধ্যে যোগাযোগের জন্য Electron IPC (Inter-Process Communication) ব্যবহার করে।

উদাহরণ

Main Process:

const { ipcMain } = require('electron');

ipcMain.on('message-from-renderer', (event, args) => {
  console.log('Renderer থেকে বার্তা:', args);
  event.reply('reply-from-main', 'Main Process থেকে বার্তা পাঠানো হলো!');
});

Renderer Process:

const { ipcRenderer } = require('electron');

ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');

ipcRenderer.on('reply-from-main', (event, args) => {
  console.log(args);
});

Main Process অ্যাপ্লিকেশনের ব্যাকএন্ড এবং লাইফসাইকেল পরিচালনার জন্য দায়ী, যেখানে Renderer Process UI এবং ব্যবহারকারীর ইন্টারঅ্যাকশন রেন্ডার করে। এই দুটি প্রক্রিয়া একসঙ্গে সমন্বয় করে একটি Electron অ্যাপ্লিকেশন কার্যকর করে।

Content added By

Azizar Rahman Aziz

Main Process কি এবং এর ভূমিকা

272

Main Process হলো Electron অ্যাপ্লিকেশনের কেন্দ্রীয় প্রক্রিয়া (central process), যা পুরো অ্যাপ্লিকেশনের জীবনচক্র (lifecycle) নিয়ন্ত্রণ করে। এটি Electron অ্যাপ্লিকেশনের মূল স্ক্রিপ্ট হিসেবে কাজ করে এবং Node.js API পুরোপুরি ব্যবহার করতে সক্ষম।

Main Process Electron অ্যাপ্লিকেশনের ব্যাকএন্ড কাজগুলো পরিচালনা করে এবং অ্যাপের বিভিন্ন উইন্ডো তৈরি ও নিয়ন্ত্রণ করে।

Main Process এর বৈশিষ্ট্য

একক প্রক্রিয়া: একটি Electron অ্যাপ্লিকেশনে শুধুমাত্র একটি Main Process থাকে।
Node.js API ব্যবহার: এটি Node.js এর সমস্ত ক্ষমতা ব্যবহার করতে পারে, যেমন ফাইল সিস্টেম অ্যাক্সেস, নেটওয়ার্ক অপারেশন ইত্যাদি।
BrowserWindow নিয়ন্ত্রণ: Main Process অ্যাপ্লিকেশনের জন্য উইন্ডো তৈরি এবং তাদের বৈশিষ্ট্য নিয়ন্ত্রণ করে।
IPC (Inter-Process Communication): Main Process এবং Renderer Process এর মধ্যে যোগাযোগের জন্য IPC ব্যবহার করা হয়।
ইভেন্ট-ড্রিভেন আর্কিটেকচার: Main Process ইভেন্ট-ভিত্তিক কাজ সম্পাদন করে।

Main Process এর ভূমিকা

১. অ্যাপ্লিকেশনের জীবনচক্র নিয়ন্ত্রণ

Main Process Electron অ্যাপ্লিকেশনের শুরু (startup), বন্ধ (shutdown), এবং ব্যাকগ্রাউন্ড কার্যক্রম পরিচালনা করে। উদাহরণস্বরূপ:

অ্যাপ চালু হলে উইন্ডো তৈরি করা।
উইন্ডো বন্ধ হলে অ্যাপ সম্পূর্ণ বন্ধ করা।

const { app } = require('electron');

app.on('ready', () => {
  console.log('অ্যাপ চালু হয়েছে!');
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

২. BrowserWindow তৈরি এবং নিয়ন্ত্রণ

Main Process অ্যাপ্লিকেশনের জন্য BrowserWindow তৈরি করে এবং সেটির বৈশিষ্ট্য নিয়ন্ত্রণ করে। প্রতিটি BrowserWindow এর জন্য একটি আলাদা Renderer Process চালু হয়।

const { BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  mainWindow.loadFile('index.html');
});

৩. সিস্টেম লেভেল কাজ পরিচালনা

Main Process Node.js এর ক্ষমতা ব্যবহার করে সিস্টেম লেভেলের কাজগুলো সম্পাদন করে। যেমন:

ফাইল সিস্টেমে পড়া-লেখা করা।
নেটওয়ার্কের সাথে যোগাযোগ।
সিস্টেম মেনু এবং নোটিফিকেশন পরিচালনা।

const fs = require('fs');

fs.writeFile('example.txt', 'Hello, Electron!', (err) => {
  if (err) throw err;
  console.log('ফাইল সফলভাবে লেখা হয়েছে!');
});

৪. IPC (Inter-Process Communication)

Main Process এবং Renderer Process এর মধ্যে ডেটা আদান-প্রদানের জন্য IPC ব্যবহৃত হয়।

Main Process:

const { ipcMain } = require('electron');

ipcMain.on('message', (event, args) => {
  console.log('Renderer থেকে বার্তা:', args);
  event.reply('reply', 'Main Process থেকে উত্তর!');
});

Renderer Process:

const { ipcRenderer } = require('electron');

ipcRenderer.send('message', 'Hello from Renderer!');

ipcRenderer.on('reply', (event, args) => {
  console.log(args);
});

৫. অ্যাপ্লিকেশনের মেনু এবং শর্টকাট তৈরি

Main Process অ্যাপ্লিকেশনের মেনু এবং কীবোর্ড শর্টকাট পরিচালনা করে।

const { Menu } = require('electron');

const menu = Menu.buildFromTemplate([
  {
    label: 'File',
    submenu: [
      { label: 'Open' },
      { label: 'Save' },
    ],
  },
]);
Menu.setApplicationMenu(menu);

Main Process এর গুরুত্বপূর্ণ বৈশিষ্ট্য সারসংক্ষেপ

Lifecycle Management: অ্যাপ শুরু এবং বন্ধ করা।
Window Management: একাধিক উইন্ডো তৈরি এবং পরিচালনা।
System Integration: ফাইল সিস্টেম, নেটওয়ার্ক, এবং অন্যান্য সিস্টেম অপারেশন পরিচালনা।
Inter-Process Communication: Renderer Process এর সাথে IPC ব্যবহার করে যোগাযোগ।

Main Process অ্যাপ্লিকেশনের কেন্দ্রীয় অংশ, যা ব্যাকএন্ড কাজ এবং Renderer Process এর কার্যক্রম সমন্বয় করে। এটি পুরো Electron অ্যাপ্লিকেশন কার্যকর করার মূল দায়িত্বে থাকে।

Content added By

Azizar Rahman Aziz

Renderer Process কি এবং এর ভূমিকা

323

Renderer Process হল Electron অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ যা UI (User Interface) রেন্ডার করে এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন পরিচালনা করে। এটি Chromium ইঞ্জিন ব্যবহার করে HTML, CSS, এবং JavaScript দিয়ে UI তৈরি এবং রেন্ডার করে।

প্রতিটি BrowserWindow এর জন্য একটি আলাদা Renderer Process তৈরি হয়। মূলত, Main Process অ্যাপ্লিকেশনের জীবনচক্র এবং উইন্ডো ম্যানেজমেন্ট পরিচালনা করে, আর Renderer Process ব্যবহারকারীর ইন্টারফেস রেন্ডার এবং ব্যবহারের সাথে সম্পর্কিত সকল কাজ করে।

Renderer Process এর বৈশিষ্ট্য

HTML, CSS, এবং JavaScript ব্যবহার:
- Renderer Process HTML, CSS, এবং JavaScript ব্যবহার করে UI তৈরি ও রেন্ডার করে। এটি ওয়েব পেজের মতোই কাজ করে।
একাধিক Renderer Process:
- প্রতিটি BrowserWindow এর জন্য আলাদা একটি Renderer Process থাকে। তাই একাধিক উইন্ডো থাকলে প্রতিটি উইন্ডোর জন্য আলাদা Renderer Process তৈরি হয়।
Web APIs এর সমর্থন:
- Renderer Process DOM, Web APIs এবং অন্যান্য ওয়েব ভিত্তিক ফিচার সমর্থন করে। তবে, এতে Node.js এর কিছু সীমাবদ্ধতা থাকে (যদি nodeIntegration বন্ধ করা থাকে)।
Node.js সীমিত অ্যাক্সেস:
- Renderer Process সীমিত Node.js ফিচার ব্যবহার করতে পারে, যদি nodeIntegration সক্রিয় না থাকে। তবে যদি nodeIntegration: true করা হয়, তখন Node.js এর সব ফিচার ব্যবহারের সুযোগ পাওয়া যায়।
প্রতিটি উইন্ডোর জন্য আলাদা প্রক্রিয়া:
- Electron অ্যাপ্লিকেশন চালু হলে, প্রতিটি নতুন উইন্ডো তৈরি হওয়ার সাথে সাথে একটি নতুন Renderer Process তৈরি হয়।

Renderer Process এর ভূমিকা

UI রেন্ডারিং:
- Renderer Process অ্যাপ্লিকেশনের ইউজার ইন্টারফেস রেন্ডার করে। এটি মূলত সেই অংশ, যা ব্যবহারকারীর কাছে দৃশ্যমান এবং তাদের সাথে সরাসরি ইন্টারঅ্যাক্ট করে।
- HTML, CSS এবং JavaScript ব্যবহার করে ওয়েব পেজের মতো UI ডিজাইন করা হয়।
ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা:
- এটি ব্যবহারকারীর ক্লিক, স্ক্রল, কীবোর্ড ইনপুট ইত্যাদির মতো ইন্টারঅ্যাকশনের জন্য দায়ী। Renderer Process এসব ইনপুট গ্রহণ করে এবং প্রক্রিয়াজাত করে।
Main Process এর সাথে যোগাযোগ:
- Renderer Process এর মধ্যে থাকা স্ক্রিপ্টগুলি Main Process এর সাথে যোগাযোগ করার জন্য IPC (Inter-Process Communication) ব্যবহার করে।
- Renderer Process থেকে Main Process এ মেসেজ পাঠানো এবং সেখান থেকে সাড়া গ্রহণ করার জন্য ipcRenderer এবং ipcMain ব্যবহার করা হয়।
ডাইনামিক কনটেন্ট রেন্ডার:
- JavaScript এর মাধ্যমে ডাইনামিক কনটেন্ট রেন্ডার করতে Renderer Process ব্যবহৃত হয়। উদাহরণস্বরূপ, ব্যবহারকারীর ইনপুট অনুসারে ডেটা আপডেট করা এবং UI রিফ্রেশ করা।

উদাহরণ: Renderer Process এবং Main Process এর মধ্যে যোগাযোগ

Renderer Process থেকে Main Process এর সাথে যোগাযোগ করার জন্য IPC (Inter-Process Communication) ব্যবহৃত হয়।

১. Main Process (main.js)

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    },
  });

  mainWindow.loadFile('index.html');
  
  // Renderer থেকে মেসেজ গ্রহণ
  ipcMain.on('message-from-renderer', (event, arg) => {
    console.log('Renderer থেকে বার্তা:', arg);
    // Main Process থেকে Renderer Process-এ উত্তর পাঠানো
    event.reply('reply-from-main', 'Main Process থেকে উত্তর!');
  });
});

২. Renderer Process (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Renderer Process</title>
</head>
<body>
  <h1>Renderer Process থেকে Main Process এর সাথে যোগাযোগ</h1>
  <button id="sendMessageBtn">Main Process এ বার্তা পাঠাও</button>
  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('sendMessageBtn').addEventListener('click', () => {
      // Main Process-এ বার্তা পাঠানো
      ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');
    });

    // Main Process থেকে উত্তর গ্রহণ
    ipcRenderer.on('reply-from-main', (event, arg) => {
      console.log('Main Process থেকে উত্তর:', arg);
    });
  </script>
</body>
</html>

Renderer Process এর সীমাবদ্ধতা

Node.js এর সীমিত অ্যাক্সেস:
- যদি nodeIntegration বন্ধ থাকে, তবে Renderer Process Node.js এর API বা ফিচার ব্যবহার করতে পারে না। তবে, Renderer Process এর জন্য এটি নিরাপত্তার দৃষ্টিকোণ থেকে গুরুত্বপূর্ণ হতে পারে।
প্রতিটি উইন্ডো জন্য আলাদা প্রক্রিয়া:
- প্রতিটি BrowserWindow এর জন্য একটি আলাদা Renderer Process তৈরি হওয়ায়, একাধিক উইন্ডো বা ট্যাব ব্যবহার করলে এটি কিছুটা অতিরিক্ত রিসোর্স ব্যবহার করতে পারে।

সারাংশ

Renderer Process হল Electron অ্যাপ্লিকেশনের UI রেন্ডারিং এবং ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনাকারী প্রক্রিয়া। এটি HTML, CSS এবং JavaScript ব্যবহার করে UI তৈরি করে এবং Main Process এর সাথে IPC ব্যবহার করে যোগাযোগ করে। Renderer Process ব্যবহারকারীর সঙ্গে সরাসরি ইন্টারঅ্যাকশন করে, যখন Main Process অ্যাপ্লিকেশনের মূল কাজগুলো পরিচালনা করে।

Content added By

Azizar Rahman Aziz

Main Process এবং Renderer Process এর মধ্যে পার্থক্য

258

Electron অ্যাপ্লিকেশন মূলত দুইটি প্রধান প্রক্রিয়া (Main Process এবং Renderer Process) ব্যবহার করে কাজ করে। তাদের ভূমিকা এবং কার্যক্রম আলাদা হলেও একসঙ্গে সমন্বয় করে অ্যাপ্লিকেশন পরিচালনা করে। নিচে Main Process এবং Renderer Process এর মধ্যে পার্থক্য বিস্তারিতভাবে দেখানো হয়েছে।

পার্থক্যের তালিকা

বৈশিষ্ট্য	Main Process	Renderer Process
কাজের ধরন	অ্যাপ্লিকেশনের জীবনচক্র এবং উইন্ডো নিয়ন্ত্রণ।	UI রেন্ডারিং এবং ব্যবহারকারীর ইন্টারঅ্যাকশন।
সংখ্যা	একটি অ্যাপ্লিকেশনে শুধুমাত্র একটি।	একাধিক হতে পারে (প্রতি উইন্ডোর জন্য একটি)।
Node.js অ্যাক্সেস	পুরোপুরি Node.js API ব্যবহার করতে পারে।	সীমিত Node.js API ব্যবহার করতে পারে।
যোগাযোগ পদ্ধতি	Renderer Process এর সাথে IPC (Inter-Process Communication) ব্যবহার করে।	Main Process এর সাথে IPC ব্যবহার করে।
উইন্ডো তৈরি	BrowserWindow তৈরি এবং পরিচালনা করে।	UI রেন্ডার এবং ব্যবহারকারীর ইনপুট গ্রহণ করে।
API অ্যাক্সেস	Node.js এবং Electron API সম্পূর্ণরূপে সমর্থন।	DOM এবং Web API সমর্থন।
ব্যবহার	ব্যাকএন্ড কাজ (ফাইল সিস্টেম, মেনু, নেটওয়ার্ক)।	ফ্রন্টএন্ড কাজ (UI এবং ইন্টারঅ্যাকশন)।
রেন্ডারিং	কোনো UI রেন্ডার করে না।	UI রেন্ডারিং এবং ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন।

Main Process

বৈশিষ্ট্য

অ্যাপ্লিকেশনের জীবনচক্র পরিচালনা করে।
একক প্রক্রিয়া হিসেবে কাজ করে।
Node.js API সম্পূর্ণরূপে ব্যবহার করতে পারে।
BrowserWindow তৈরি এবং পরিচালনা করে।

উদাহরণ

const { app, BrowserWindow } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  mainWindow.loadFile('index.html');
});

Renderer Process

বৈশিষ্ট্য

প্রতিটি উইন্ডোর জন্য একটি পৃথক Renderer Process থাকে।
HTML, CSS, এবং JavaScript ব্যবহার করে UI রেন্ডার করে।
DOM এবং Web API সম্পূর্ণরূপে সমর্থন করে।
Main Process এর সাথে IPC এর মাধ্যমে যোগাযোগ করে।

উদাহরণ

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Renderer Process</title>
</head>
<body>
  <h1>Renderer Process চলছে!</h1>
</body>
</html>

Main Process এবং Renderer Process এর মধ্যে যোগাযোগ

IPC (Inter-Process Communication) ব্যবহার করে Main Process এবং Renderer Process এর মধ্যে তথ্য আদান-প্রদান করা হয়।

উদাহরণ

Main Process:

const { ipcMain } = require('electron');

ipcMain.on('message', (event, args) => {
  console.log('Renderer থেকে বার্তা:', args);
  event.reply('reply', 'Main Process থেকে উত্তর!');
});

Renderer Process:

const { ipcRenderer } = require('electron');

ipcRenderer.send('message', 'Hello from Renderer!');
ipcRenderer.on('reply', (event, args) => {
  console.log('Main Process থেকে বার্তা:', args);
});

পার্থক্যের মূল সারাংশ

Main Process:
- ব্যাকএন্ড কাজ পরিচালনা করে।
- একটিমাত্র থাকে।
- Node.js এবং Electron API পুরোপুরি ব্যবহার করে।
- Renderer Process এর সাথে সমন্বয় করে অ্যাপ্লিকেশন কার্যকর করে।
Renderer Process:
- UI রেন্ডারিং এবং ব্যবহারকারীর ইন্টারঅ্যাকশন পরিচালনা করে।
- একাধিক থাকতে পারে।
- Web API এবং DOM ব্যবহারের জন্য দায়ী।
- Main Process এর সাথে IPC ব্যবহার করে যোগাযোগ করে।

Main Process এবং Renderer Process এর এই আলাদা কার্যক্রম Electron অ্যাপ্লিকেশনকে সহজে এবং কার্যকরভাবে পরিচালনা করতে সাহায্য করে।

Content added By

Azizar Rahman Aziz

Main Process থেকে Renderer Process এর সাথে যোগাযোগ

297

Electron অ্যাপ্লিকেশনে Main Process এবং Renderer Process এর মধ্যে যোগাযোগ স্থাপনের জন্য IPC (Inter-Process Communication) ব্যবহার করা হয়। এটি দুইটি আলাদা প্রক্রিয়ার মধ্যে তথ্য আদান-প্রদান করতে সাহায্য করে। Main Process এবং Renderer Process এর মধ্যে কমিউনিকেশন পরিচালনার জন্য ipcMain এবং ipcRenderer মডিউল ব্যবহার করা হয়।

১. ipcMain (Main Process এর জন্য)

ipcMain হলো Main Process-এ ব্যবহৃত মডিউল, যা Renderer Process থেকে প্রাপ্ত মেসেজ গ্রহণ করে এবং তার সাড়া পাঠায়।

উদাহরণ: Main Process (main.js)

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');
  
  // Renderer থেকে মেসেজ গ্রহণ
  ipcMain.on('message-from-renderer', (event, arg) => {
    console.log('Renderer থেকে বার্তা:', arg);
    // Main Process থেকে Renderer Process-এ উত্তর পাঠানো
    event.reply('reply-from-main', 'Main Process থেকে উত্তর!');
  });
});

২. ipcRenderer (Renderer Process এর জন্য)

ipcRenderer হলো Renderer Process-এ ব্যবহৃত মডিউল, যা Main Process-এ মেসেজ পাঠায় এবং সেখান থেকে উত্তর গ্রহণ করে।

উদাহরণ: Renderer Process (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Renderer Process</title>
</head>
<body>
  <h1>Renderer Process থেকে Main Process এর সাথে যোগাযোগ</h1>
  <button id="sendMessageBtn">Main Process এ বার্তা পাঠাও</button>
  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('sendMessageBtn').addEventListener('click', () => {
      // Main Process-এ বার্তা পাঠানো
      ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');
    });

    // Main Process থেকে উত্তর গ্রহণ
    ipcRenderer.on('reply-from-main', (event, arg) => {
      console.log('Main Process থেকে উত্তর:', arg);
    });
  </script>
</body>
</html>

৩. Main Process থেকে Renderer Process এর সাথে যোগাযোগের স্টেপস

Renderer Process থেকে মেসেজ পাঠানো:
- ipcRenderer.send() ব্যবহার করে Main Process-এ মেসেজ পাঠানো হয়।
Main Process-এ মেসেজ গ্রহণ:
- ipcMain.on() ব্যবহার করে Renderer Process থেকে আসা মেসেজ গ্রহণ করা হয়।
- event.reply() এর মাধ্যমে Main Process থেকে Renderer Process-এ সাড়া পাঠানো হয়।
Renderer Process-এ সাড়া গ্রহণ:
- ipcRenderer.on() ব্যবহার করে Main Process থেকে আসা সাড়া গ্রহণ করা হয়।

৪. একটি সাধারণ সিস্টেম উদাহরণ

ধরা যাক, একটি অ্যাপ্লিকেশনে ব্যবহারকারী একটি বোতামে ক্লিক করলে Main Process থেকে কিছু তথ্য গ্রহণ করবে এবং সেই তথ্যের উপর ভিত্তি করে কিছু কাজ করবে। এর জন্য Main Process এবং Renderer Process এর মধ্যে যোগাযোগের জন্য ipcMain এবং ipcRenderer ব্যবহৃত হবে।

উদাহরণ:

Main Process (main.js):

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');
  
  ipcMain.on('request-data', (event) => {
    // Main Process কিছু ডেটা ফেরত পাঠাচ্ছে
    event.reply('response-data', { message: 'এই ডেটা Main Process থেকে এসেছে!' });
  });
});

Renderer Process (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Renderer Process</title>
</head>
<body>
  <h1>Renderer Process থেকে Main Process এর সাথে যোগাযোগ</h1>
  <button id="requestDataBtn">Main Process থেকে ডেটা চাই</button>
  <p id="response"></p>
  
  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('requestDataBtn').addEventListener('click', () => {
      // Main Process থেকে ডেটা চাওয়া
      ipcRenderer.send('request-data');
    });

    // Main Process থেকে আসা ডেটা গ্রহণ
    ipcRenderer.on('response-data', (event, data) => {
      document.getElementById('response').textContent = data.message;
    });
  </script>
</body>
</html>

সারাংশ

Main Process এবং Renderer Process এর মধ্যে যোগাযোগ করার জন্য IPC ব্যবহৃত হয়।
ipcMain ব্যবহার করে Main Process Renderer Process থেকে মেসেজ গ্রহণ করে এবং ipcRenderer ব্যবহার করে Renderer Process মেসেজ পাঠায়।
এই পদ্ধতিতে, Main Process এবং Renderer Process একে অপরের সাথে সুনির্দিষ্টভাবে যোগাযোগ করতে সক্ষম হয়, যা অ্যাপ্লিকেশনকে আরও কার্যকরী করে তোলে।

Content added By

Azizar Rahman Aziz

Electron পরিচিতি Electron সেটআপ এবং ইনস্টলেশন Electron এর বেসিক কনফিগারেশন Electron এর API এবং মডিউলস Main এবং Renderer Process এর মধ্যে যোগাযোগ

Main Process এবং Renderer Process

Main Process

সংজ্ঞা

বৈশিষ্ট্য

কাজ

উদাহরণ

Renderer Process

সংজ্ঞা

বৈশিষ্ট্য

কাজ

উদাহরণ

Main Process এবং Renderer Process এর মধ্যে পার্থক্য

Main Process এবং Renderer Process এর সমন্বয়

উদাহরণ

Main Process কি এবং এর ভূমিকা

Main Process এর বৈশিষ্ট্য

Main Process এর ভূমিকা

১. অ্যাপ্লিকেশনের জীবনচক্র নিয়ন্ত্রণ

২. BrowserWindow তৈরি এবং নিয়ন্ত্রণ

৩. সিস্টেম লেভেল কাজ পরিচালনা

৪. IPC (Inter-Process Communication)

৫. অ্যাপ্লিকেশনের মেনু এবং শর্টকাট তৈরি

Main Process এর গুরুত্বপূর্ণ বৈশিষ্ট্য সারসংক্ষেপ

Renderer Process কি এবং এর ভূমিকা

Renderer Process এর বৈশিষ্ট্য

Renderer Process এর ভূমিকা

উদাহরণ: Renderer Process এবং Main Process এর মধ্যে যোগাযোগ

১. Main Process (main.js)

২. Renderer Process (index.html)

Renderer Process এর সীমাবদ্ধতা

সারাংশ

Main Process এবং Renderer Process এর মধ্যে পার্থক্য

পার্থক্যের তালিকা

Main Process

বৈশিষ্ট্য

উদাহরণ

Renderer Process

বৈশিষ্ট্য

উদাহরণ

Main Process এবং Renderer Process এর মধ্যে যোগাযোগ

উদাহরণ

পার্থক্যের মূল সারাংশ

Main Process থেকে Renderer Process এর সাথে যোগাযোগ

১. ipcMain (Main Process এর জন্য)

উদাহরণ: Main Process (main.js)

২. ipcRenderer (Renderer Process এর জন্য)

উদাহরণ: Renderer Process (index.html)

৩. Main Process থেকে Renderer Process এর সাথে যোগাযোগের স্টেপস

৪. একটি সাধারণ সিস্টেম উদাহরণ

উদাহরণ:

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!