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 একে অপরের সাথে সুনির্দিষ্টভাবে যোগাযোগ করতে সক্ষম হয়, যা অ্যাপ্লিকেশনকে আরও কার্যকরী করে তোলে।
Read more
