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

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

336

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

Main Process এবং Renderer Process এর মধ্যে যোগাযোগের জন্য Electron দুটি মডিউল প্রদান করে:

ipcMain (Main Process এর জন্য)
ipcRenderer (Renderer Process এর জন্য)

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

এখানে, ipcMain.on() ব্যবহার করে Main Process Renderer Process থেকে আসা মেসেজ গ্রহণ করছে এবং event.reply() ব্যবহার করে Renderer Process-এ সাড়া পাঠাচ্ছে।

২. Renderer Process থেকে Main 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>

এখানে, ipcRenderer.send() ব্যবহার করে Renderer Process Main Process-এ মেসেজ পাঠাচ্ছে এবং ipcRenderer.on() ব্যবহার করে Main Process থেকে আসা সাড়া গ্রহণ করছে।

৩. কীভাবে Main Process এবং Renderer Process একে অপরের সাথে যোগাযোগ করে

Main Process এবং Renderer Process একে অপরের সাথে IPC (Inter-Process Communication) এর মাধ্যমে যোগাযোগ করে, যা তাদের মধ্যে ডেটা আদান-প্রদান করতে সাহায্য করে। মূলত, ipcMain এবং ipcRenderer একে অপরের মধ্যে বার্তা পাঠানোর এবং গ্রহণের কাজ করে।

প্রক্রিয়া:

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

৪. সিম্পল প্রক্রিয়া উদাহরণ

ধরা যাক, আমরা একটি অ্যাপ তৈরি করতে চাই যেখানে Renderer Process একটি বাটনে ক্লিক করার পর Main Process থেকে কিছু তথ্য পাবে এবং সেটি UI তে দেখাবে। নিচে এই কনফিগারেশনটির উদাহরণ দেওয়া হলো।

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('get-info', (event) => {
    const info = { message: 'Hello from Main Process!' };
    // Main Process থেকে Renderer Process-এ তথ্য পাঠানো
    event.reply('info-from-main', info);
  });
});

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="getInfoBtn">Main Process থেকে তথ্য নাও</button>
  <p id="info"></p>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('getInfoBtn').addEventListener('click', () => {
      // Main Process-এ তথ্য চাওয়া
      ipcRenderer.send('get-info');
    });

    // Main Process থেকে তথ্য গ্রহণ
    ipcRenderer.on('info-from-main', (event, info) => {
      document.getElementById('info').textContent = info.message;
    });
  </script>
</body>
</html>

এই উদাহরণে, Renderer Process থেকে একটি বাটনে ক্লিক করার মাধ্যমে Main Process থেকে তথ্য চাওয়া হচ্ছে এবং Main Process সেই তথ্য Renderer Process এ পাঠাচ্ছে।

সারাংশ

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

Content added By

Azizar Rahman Aziz

ipcMain এবং ipcRenderer এর মাধ্যমে ডেটা আদান-প্রদান

285

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

`ipcMain` (Main Process এ ব্যবহৃত)

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

`ipcRenderer` (Renderer Process এ ব্যবহৃত)

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

১. `ipcMain` এবং `ipcRenderer` এর মাধ্যমে ডেটা আদান-প্রদান

ধাপ ১: Main Process (main.js)

Main Process মেসেজ গ্রহণ করতে ipcMain ব্যবহার করে এবং সাড়া পাঠাতে event.reply() ব্যবহার করা হয়।

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 থেকে উত্তর!');
  });
});

ipcMain.on() ব্যবহার করে Renderer Process থেকে আসা মেসেজ গ্রহণ করা হয় এবং event.reply() এর মাধ্যমে সাড়া পাঠানো হয়।

ধাপ ২: Renderer Process (index.html)

Renderer Process এ ipcRenderer ব্যবহার করে Main Process-এ মেসেজ পাঠানো হয় এবং তার উত্তর গ্রহণ করা হয়।

<!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>

ipcRenderer.send() ব্যবহার করে Main Process-এ মেসেজ পাঠানো হয় এবং ipcRenderer.on() এর মাধ্যমে Main Process থেকে উত্তর গ্রহণ করা হয়।

২. ডেটা আদান-প্রদান উদাহরণ

ধরা যাক, Renderer Process থেকে Main Process-এ ডেটা পাঠানো হচ্ছে এবং Main Process সেই ডেটার উপর ভিত্তি করে একটি কাজ করছে। এর পরে, Main 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('request-data', (event) => {
    // Main Process থেকে Renderer 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>

৩. বিভিন্ন ডেটা টাইপ পাঠানো

ipcMain এবং ipcRenderer এর মাধ্যমে আপনি বিভিন্ন ধরনের ডেটা পাঠাতে পারেন, যেমন স্ট্রিং, অবজেক্ট, অ্যারে ইত্যাদি।

উদাহরণ: একটি অবজেক্ট পাঠানো

// Renderer থেকে Object পাঠানো
ipcRenderer.send('message-from-renderer', { name: 'John', age: 30 });

এবং Main Process এ সেই অবজেক্ট গ্রহণ করা:

ipcMain.on('message-from-renderer', (event, arg) => {
  console.log(arg.name); // John
  console.log(arg.age);  // 30
});

সারাংশ

ipcMain (Main Process): Renderer Process থেকে মেসেজ গ্রহণ করে এবং সাড়া পাঠায়।
ipcRenderer (Renderer Process): Main Process এ মেসেজ পাঠায় এবং সাড়া গ্রহণ করে।
ডেটা আদান-প্রদান করার জন্য ipcMain এবং ipcRenderer ব্যবহৃত হয়।
ডেটা যেমন স্ট্রিং, অবজেক্ট, অ্যারে ইত্যাদি পাঠানো সম্ভব।

এভাবে Main Process এবং Renderer Process এর মধ্যে ডেটা আদান-প্রদান করে, অ্যাপ্লিকেশনটি আরো কার্যকরী এবং ইন্টারঅ্যাকটিভ হয়ে ওঠে।

Content added By

Azizar Rahman Aziz

Main Process থেকে Renderer Process এ মেসেজ পাঠানো

291

Electron এ Main Process এবং Renderer Process এর মধ্যে মেসেজ পাঠানোর জন্য IPC (Inter-Process Communication) ব্যবহৃত হয়। এটি ipcMain এবং ipcRenderer মডিউল ব্যবহার করে করা হয়।

এখানে Main Process থেকে Renderer Process এ মেসেজ পাঠানোর প্রক্রিয়া বিস্তারিতভাবে দেখানো হচ্ছে।

১. Main Process থেকে Renderer Process এ মেসেজ পাঠানো

Main Process থেকে Renderer 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');

  // Main Process থেকে Renderer Process এ মেসেজ পাঠানো
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.send('message-from-main', 'Hello from Main Process!');
  });

  // Renderer থেকে আসা মেসেজ গ্রহণ (এটি শুধু উদাহরণের জন্য)
  ipcMain.on('message-from-renderer', (event, arg) => {
    console.log('Renderer থেকে বার্তা:', arg);
  });
});

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

২. Renderer Process (index.html)

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

উদাহরণ: 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');

    // Main Process থেকে মেসেজ গ্রহণ
    ipcRenderer.on('message-from-main', (event, message) => {
      console.log('Main Process থেকে বার্তা:', message);
      alert(message);  // Main Process থেকে পাওয়া বার্তা UI তে দেখানো
    });

    document.getElementById('sendMessageBtn').addEventListener('click', () => {
      // Main Process এ মেসেজ পাঠানো
      ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');
    });
  </script>
</body>
</html>

৩. ব্যবহার

Main Process থেকে মেসেজ পাঠানো:
- mainWindow.webContents.send('message-from-main', 'Hello from Main Process!'); — এটি Main Process থেকে Renderer Process এ মেসেজ পাঠানোর জন্য ব্যবহৃত হয়।
- মেসেজটি message-from-main নামে একটি ইভেন্টে পাঠানো হয়।
Renderer Process থেকে মেসেজ গ্রহণ:
- ipcRenderer.on('message-from-main', (event, message) => { ... }); — এটি Renderer Process এ Main Process থেকে আসা মেসেজ গ্রহণ করতে ব্যবহৃত হয়।
Renderer Process থেকে মেসেজ পাঠানো:
- ipcRenderer.send('message-from-renderer', 'Hello from Renderer!'); — এটি Renderer Process থেকে Main Process এ মেসেজ পাঠানোর জন্য ব্যবহৃত হয়।
- মেসেজটি message-from-renderer নামে একটি ইভেন্টে পাঠানো হয়।

সারাংশ

Main Process থেকে Renderer Process এ মেসেজ পাঠাতে webContents.send() ব্যবহৃত হয়।
Renderer Process এ মেসেজ গ্রহণ করতে ipcRenderer.on() ব্যবহার করা হয় এবং মেসেজ পাঠাতে ipcRenderer.send() ব্যবহার করা হয়।
এই প্রক্রিয়ার মাধ্যমে, Main Process এবং Renderer Process এর মধ্যে সহজে তথ্য আদান-প্রদান করা সম্ভব হয়।

Content added By

Azizar Rahman Aziz

Renderer Process থেকে Main Process এ মেসেজ পাঠানো

262

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

এখানে Renderer Process থেকে Main Process এ মেসেজ পাঠানোর পুরো প্রক্রিয়া বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে।

১. Main Process (main.js)

Main Process-এ ipcMain ব্যবহার করে 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  // Renderer Process-এ Node.js ইন্টিগ্রেশন সক্রিয় করা
    }
  });

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

এখানে ipcMain.on() ব্যবহার করা হয়েছে যাতে Main Process Renderer Process থেকে মেসেজ গ্রহণ করতে পারে।
event.reply() ব্যবহৃত হচ্ছে Renderer Process-এ একটি উত্তর পাঠানোর জন্য।

২. Renderer Process (index.html)

Renderer Process-এ ipcRenderer মডিউল ব্যবহার করে 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>

এখানে ipcRenderer.send() ব্যবহার করে Renderer Process থেকে Main Process-এ মেসেজ পাঠানো হয়।
ipcRenderer.on() ব্যবহৃত হয় Main Process থেকে আসা উত্তর গ্রহণ করার জন্য।

৩. সম্পূর্ণ প্রক্রিয়া

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

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

ধরা যাক, একটি অ্যাপ্লিকেশনে ব্যবহারকারী একটি বোতামে ক্লিক করলে Main 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 Process থেকে ডেটা গ্রহণ
  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>

সারাংশ

Renderer Process থেকে Main Process-এ মেসেজ পাঠানোর জন্য ipcRenderer মডিউল ব্যবহার করা হয়।
Main Process মেসেজ গ্রহণের জন্য ipcMain মডিউল ব্যবহার করে এবং মেসেজের উত্তর পাঠায় event.reply() এর মাধ্যমে।
IPC (Inter-Process Communication) এর মাধ্যমে Main Process এবং Renderer Process একে অপরের সাথে যোগাযোগ করতে পারে।

Content added By

Azizar Rahman Aziz

Asynchronous এবং Synchronous মেসেজিং

352

Electron অ্যাপ্লিকেশনটি Main Process এবং Renderer Process এর মধ্যে যোগাযোগের জন্য IPC (Inter-Process Communication) ব্যবহার করে। এই মেসেজিংয়ের মাধ্যমে, আপনি Asynchronous (অসিঙ্ক্রোনাস) এবং Synchronous (সিঙ্ক্রোনাস) দুই ধরনের মেসেজিং ব্যবহার করতে পারেন।

আসুন এখন Asynchronous এবং Synchronous মেসেজিং এর মধ্যে পার্থক্য এবং ব্যবহার দেখে নিই।

Asynchronous মেসেজিং

Asynchronous মেসেজিং এর মাধ্যমে, Main Process এবং Renderer Process এর মধ্যে মেসেজ পাঠানোর পর, পাঠানো মেসেজের সাড়া আসার জন্য অপেক্ষা করতে হয় না। এর ফলে, অ্যাপের অন্যান্য কাজ চলতে থাকে এবং পরে যখন সাড়া আসে, তখন তা প্রাপ্ত হয়। এটি অ্যাপের কার্যকারিতা আরও দ্রুত এবং ফ্লুয়েন্ট (smooth) করে তোলে।

Asynchronous মেসেজিং উদাহরণ:

Main Process (main.js):

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

ipcMain.on('async-message', (event, arg) => {
  console.log('Renderer Process থেকে আসা বার্তা:', arg);
  
  // Asynchronous সাড়া পাঠানো
  setTimeout(() => {
    event.reply('async-reply', 'Main Process থেকে আসা asynchronous সাড়া!');
  }, 2000);  // 2 সেকেন্ড পর সাড়া পাঠানো
});

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>Asynchronous Messaging</title>
</head>
<body>
  <h1>Asynchronous Messaging উদাহরণ</h1>
  <button id="sendAsyncBtn">Asynchronous মেসেজ পাঠাও</button>
  <p id="response"></p>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('sendAsyncBtn').addEventListener('click', () => {
      // Asynchronous মেসেজ পাঠানো
      ipcRenderer.send('async-message', 'Hello from Renderer!');
    });

    // Asynchronous সাড়া গ্রহণ
    ipcRenderer.on('async-reply', (event, message) => {
      document.getElementById('response').textContent = message;
    });
  </script>
</body>
</html>

ব্যাখ্যা:

Main Process: Renderer থেকে আসা মেসেজ গ্রহণ করে এবং 2 সেকেন্ড পরে একটি সাড়া পাঠায়।
Renderer Process: সাড়া আসার পর তা UI-তে প্রদর্শিত হয়।
এই প্রক্রিয়ায়, Renderer Process মেসেজ পাঠানোর পর আর অপেক্ষা করে না, এবং সাড়া আসলে তা গ্রহণ করা হয়।

Synchronous মেসেজিং

Synchronous মেসেজিং এর মাধ্যমে, Main Process এবং Renderer Process এর মধ্যে মেসেজ পাঠানোর পর, Renderer Process সাড়া পাওয়ার আগে আর কোনো কাজ করতে পারে না। এটি ব্লকিং (Blocking) মেসেজিং হিসেবে কাজ করে, যার অর্থ যে পর্যন্ত সাড়া না পাওয়া যায়, তখন পর্যন্ত Renderer Process থেমে থাকে।

Synchronous মেসেজিং উদাহরণ:

Main Process (main.js):

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

ipcMain.on('sync-message', (event, arg) => {
  console.log('Renderer Process থেকে আসা বার্তা:', arg);
  
  // Synchronous সাড়া পাঠানো
  event.returnValue = 'Main Process থেকে আসা synchronous সাড়া!';
});

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>Synchronous Messaging</title>
</head>
<body>
  <h1>Synchronous Messaging উদাহরণ</h1>
  <button id="sendSyncBtn">Synchronous মেসেজ পাঠাও</button>
  <p id="response"></p>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('sendSyncBtn').addEventListener('click', () => {
      // Synchronous মেসেজ পাঠানো এবং সাড়া গ্রহণ
      const response = ipcRenderer.sendSync('sync-message', 'Hello from Renderer!');
      document.getElementById('response').textContent = response;
    });
  </script>
</body>
</html>

ব্যাখ্যা:

Main Process: Renderer Process থেকে আসা মেসেজ গ্রহণ করে এবং সাড়া প্রদান করে।
Renderer Process: সাড়া পাওয়ার আগে অন্যান্য কাজ করতে পারে না, এটি ব্লক হয়ে থাকে।

Asynchronous এবং Synchronous মেসেজিং এর মধ্যে পার্থক্য

বৈশিষ্ট্য	Asynchronous (অসিঙ্ক্রোনাস) মেসেজিং	Synchronous (সিঙ্ক্রোনাস) মেসেজিং
প্রক্রিয়া	মেসেজ পাঠানো পর অপেক্ষা করার প্রয়োজন নেই।	মেসেজ পাঠানোর পর সাড়া পাওয়ার আগে কিছু করা যায় না।
ব্লকিং	ব্লকিং নয়।	ব্লকিং হয়।
উদাহরণ	`event.reply()` বা `setTimeout()` দিয়ে সাড়া।	`event.returnValue` দিয়ে সাড়া।
ব্যবহার	ব্যাকগ্রাউন্ডে কাজ চলতে থাকে, সাড়া পরে পাওয়া যায়।	শুধুমাত্র সাড়া পাওয়ার পরে পরবর্তী কাজ করা হয়।

সারাংশ

Asynchronous মেসেজিং একটি দক্ষ উপায় যখন আপনি চাইবেন আপনার অ্যাপ্লিকেশন সাড়া আসার সময় অন্যান্য কাজ করতে সক্ষম হোক। এটি ব্যাকগ্রাউন্ডে কাজ করার সুযোগ দেয়।
Synchronous মেসেজিং ব্যবহার করা হয় যখন আপনি নিশ্চিত করতে চান যে, সাড়া পাওয়ার আগে পরবর্তী কোনো কাজ না হয়ে থাকুক। এটি সাধারণত ছোট অ্যাপ্লিকেশনে ব্যবহৃত হয়, যেখানে দ্রুত সাড়া পাওয়ার প্রয়োজন হয়।

এটি আপনাকে আপনার অ্যাপ্লিকেশনের কার্যকারিতা এবং প্রয়োজন অনুযায়ী মেসেজিং ব্যবহারের জন্য সিদ্ধান্ত নিতে সাহায্য করবে।

Content added By

Azizar Rahman Aziz

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

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

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

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

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

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

৩. কীভাবে Main Process এবং Renderer Process একে অপরের সাথে যোগাযোগ করে

প্রক্রিয়া:

৪. সিম্পল প্রক্রিয়া উদাহরণ

Main Process (main.js)

Renderer Process (index.html)

সারাংশ

ipcMain এবং ipcRenderer এর মাধ্যমে ডেটা আদান-প্রদান

ipcMain (Main Process এ ব্যবহৃত)

ipcRenderer (Renderer Process এ ব্যবহৃত)

১. ipcMain এবং ipcRenderer এর মাধ্যমে ডেটা আদান-প্রদান

ধাপ ১: Main Process (main.js)

ধাপ ২: Renderer Process (index.html)

২. ডেটা আদান-প্রদান উদাহরণ

Main Process (main.js)

Renderer Process (index.html)

৩. বিভিন্ন ডেটা টাইপ পাঠানো

উদাহরণ: একটি অবজেক্ট পাঠানো

সারাংশ

Main Process থেকে Renderer Process এ মেসেজ পাঠানো

১. Main Process থেকে Renderer Process এ মেসেজ পাঠানো

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

২. Renderer Process (index.html)

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

৩. ব্যবহার

সারাংশ

Renderer Process থেকে Main Process এ মেসেজ পাঠানো

১. Main Process (main.js)

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

২. Renderer Process (index.html)

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

৩. সম্পূর্ণ প্রক্রিয়া

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

উদাহরণ:

সারাংশ

Asynchronous এবং Synchronous মেসেজিং

Asynchronous মেসেজিং

Asynchronous মেসেজিং উদাহরণ:

ব্যাখ্যা:

Synchronous মেসেজিং

Synchronous মেসেজিং উদাহরণ:

ব্যাখ্যা:

Asynchronous এবং Synchronous মেসেজিং এর মধ্যে পার্থক্য

সারাংশ

All Notifications

Promotion

Satt AI

Hi, আমি SATT AI!

`ipcMain` (Main Process এ ব্যবহৃত)

`ipcRenderer` (Renderer Process এ ব্যবহৃত)

১. `ipcMain` এবং `ipcRenderer` এর মাধ্যমে ডেটা আদান-প্রদান