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-এ মেসেজ পাঠায়।
- Renderer Process
- Main Process-এ মেসেজ গ্রহণ:
- Main Process
ipcMain.on()ব্যবহার করে Renderer Process থেকে আসা মেসেজ গ্রহণ করে এবং প্রক্রিয়া সম্পাদন করে।
- Main Process
- Main Process থেকে Renderer Process-এ সাড়া পাঠানো:
- Main Process
event.reply()ব্যবহার করে Renderer Process-এ সাড়া পাঠায়।
- Main Process
- Renderer Process-এ সাড়া গ্রহণ:
- Renderer Process
ipcRenderer.on()ব্যবহার করে Main Process থেকে আসা সাড়া গ্রহণ করে।
- Renderer 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
Read more
