Ajax (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি যা ওয়েব পেজকে পুনরায় রিফ্রেশ না করেই সার্ভারের সাথে ডেটা আদান-প্রদান করতে সক্ষম করে। এটি ওয়েব অ্যাপ্লিকেশনগুলিকে আরও ইন্টারঅ্যাকটিভ এবং দ্রুত করে তোলে। ExpressJS এর সাথে Ajax ইন্টিগ্রেশন করলে, আপনি সার্ভার থেকে ডেটা asynchronously (অবিচ্ছিন্নভাবে) পেতে পারেন এবং ইউজার ইন্টারফেসে তা রেন্ডার করতে পারেন।
এখানে আমরা দেখব কিভাবে ExpressJS সার্ভারের সাথে Ajax কল করা যায়, এবং কিভাবে ডাইনামিক ওয়েব পেজ তৈরি করা যায়।
১. Ajax কি এবং কেন ব্যবহার করবেন?
Ajax ওয়েব পেজে asynchronous (অবিচ্ছিন্ন) ডেটা লোড করার একটি পদ্ধতি, যা ইউজার ইন্টারফেসকে পুনরায় লোড না করে সার্ভার থেকে ডেটা নিয়ে আসে। এটি ওয়েব অ্যাপ্লিকেশনগুলিকে দ্রুত এবং আরো ইন্টারঅ্যাকটিভ করে তোলে।
Ajax ব্যবহার করে, আপনি সহজে:
- ইউজারের ইন্টারঅ্যাকশনের পরে ডেটা লোড করতে পারবেন।
- পেজ রিফ্রেশ না করেই ডেটা আপডেট করতে পারবেন।
- ওয়েব অ্যাপ্লিকেশনকে আরো স্মুথ এবং রেসপন্সিভ করতে পারবেন।
২. ExpressJS এর সাথে Ajax ব্যবহার করা
ExpressJS এবং Ajax একত্রে ব্যবহারের মাধ্যমে আপনি ওয়েব অ্যাপ্লিকেশনটিকে আরও গতিশীল করতে পারবেন। এখানে একটি উদাহরণ দেখানো হবে, যেখানে Ajax কলের মাধ্যমে সার্ভার থেকে ডেটা লোড করা হবে এবং তা পেজে দেখানো হবে।
৩. প্রকল্পের জন্য ফাইল স্ট্রাকচার
my-express-app/
│
├── node_modules/ # ইনস্টল হওয়া প্যাকেজ
├── public/ # স্ট্যাটিক ফাইল (HTML, CSS, JS)
│ ├── index.html # HTML পেজ
│ └── app.js # Ajax কল করার JavaScript ফাইল
├── app.js # Express অ্যাপ্লিকেশন ফাইল
├── package.json # প্যাকেজ কনফিগারেশন
└── package-lock.json # নির্দিষ্ট সংস্করণে প্যাকেজের ডিপেনডেন্সি
৪. ExpressJS সার্ভার তৈরি করা
প্রথমে, ExpressJS সার্ভার তৈরি করতে হবে, যেখানে Ajax রিকোয়েস্ট প্রক্রিয়া করা হবে। আমরা একটি সাধারণ GET API তৈরি করব, যা Ajax রিকোয়েস্টের মাধ্যমে ডেটা প্রদান করবে।
app.js (ExpressJS সার্ভার ফাইল)
const express = require('express');
const app = express();
const port = 3000;
// স্ট্যাটিক ফাইলের জন্য Public ফোল্ডার ব্যবহার
app.use(express.static('public'));
// GET রিকোয়েস্ট হ্যান্ডলিং
app.get('/data', (req, res) => {
const data = {
message: "Hello from ExpressJS!",
time: new Date().toLocaleTimeString()
};
res.json(data);
});
// সার্ভার শুরু
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
এখানে:
/dataরাউটটি Ajax রিকোয়েস্টে JSON ডেটা রিটার্ন করবে। এই ডেটা ইউজার ইন্টারফেসে রেন্ডার করা হবে।
৫. HTML পেজ এবং Ajax কল
এখন, আমরা একটি HTML পেজ তৈরি করব, যেখানে ইউজার ইন্টারফেস থাকবে এবং Ajax কলের মাধ্যমে সার্ভার থেকে ডেটা নেওয়া হবে।
index.html (HTML ফাইল)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExpressJS with Ajax</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Welcome to Ajax with ExpressJS</h1>
<button id="loadData">Load Data</button>
<p id="message"></p>
<p id="time"></p>
<script src="app.js"></script>
</body>
</html>
এখানে:
<button>: একটি বাটন তৈরি করা হয়েছে, যার মাধ্যমে Ajax কল করা হবে।<p>: দুটি প্যারাগ্রাফ (message এবং time) ডেটা শো করার জন্য তৈরি করা হয়েছে।
৬. Ajax কলের জন্য JavaScript কোড
এখন, app.js ফাইলে Ajax কল তৈরি করা হবে, যা ExpressJS সার্ভারের /data রাউটে রিকোয়েস্ট পাঠাবে।
app.js (Ajax কল করার JavaScript ফাইল)
$(document).ready(function() {
$('#loadData').click(function() {
// Ajax GET রিকোয়েস্ট
$.ajax({
url: '/data', // ExpressJS সার্ভারের রাউট
method: 'GET', // HTTP মেথড
success: function(response) {
// রেসপন্সে পাওয়া ডেটা ইউজার ইন্টারফেসে রেন্ডার করা
$('#message').text(response.message);
$('#time').text('Current Time: ' + response.time);
},
error: function() {
alert('Error loading data.');
}
});
});
});
এখানে:
$.ajax(): Ajax রিকোয়েস্ট পাঠানোর জন্য jQuery এর Ajax মেথড ব্যবহার করা হয়েছে।url: '/data': ExpressJS সার্ভারের/dataরাউটে GET রিকোয়েস্ট পাঠানো হচ্ছে।success: রেসপন্স পাওয়ার পর,#messageএবং#timeএলিমেন্টে ডেটা রেন্ডার করা হচ্ছে।error: যদি কোনো সমস্যা হয়, তবে একটি এলার্ট বার্তা দেখানো হবে।
৭. সার্ভার চালু করা
এখন, আপনার ExpressJS সার্ভার চালু করতে হবে:
node app.js
এরপর, ব্রাউজারে http://localhost:3000 URL এ গিয়ে আপনার ওয়েব পেজ দেখতে পারবেন।
এখানে, আপনি "Load Data" বাটনটি ক্লিক করলে Ajax কল সার্ভারে যাবে এবং সার্ভার থেকে প্রাপ্ত ডেটা পেজে রেন্ডার হবে।
৮. সারাংশ
ExpressJS এবং Ajax একত্রে ব্যবহার করলে আপনি ওয়েব অ্যাপ্লিকেশনকে আরও দ্রুত, ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি করতে পারেন। Ajax কলের মাধ্যমে সার্ভার থেকে ডেটা asynchronously লোড করা সম্ভব হয়, যা পেজ রিফ্রেশ ছাড়াই ওয়েব পেজের কন্টেন্ট আপডেট করতে সাহায্য করে।
এই গাইডে আমরা দেখেছি কিভাবে ExpressJS সার্ভারে Ajax রিকোয়েস্ট পরিচালনা করা যায় এবং সেই ডেটা ক্লায়েন্ট সাইডে রেন্ডার করা যায়।
Ajax (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি যা ওয়েব পেজগুলোকে সিঙ্ক্রোনাস না হয়ে asynchronousভাবে ডেটা লোড করার সুবিধা দেয়। Ajax ব্যবহারের মাধ্যমে ব্যবহারকারী পৃষ্ঠাটি রিফ্রেশ না করেই ডেটা পাঠাতে বা গ্রহণ করতে পারে, যার ফলে ইউজার এক্সপিরিয়েন্স উন্নত হয়।
ExpressJS ব্যবহার করে Ajax এর মাধ্যমে ডেটা রিকোয়েস্ট করার প্রক্রিয়া খুবই সহজ এবং সাধারণ। এই প্রক্রিয়াতে সাধারণত HTTP Requests যেমন GET, POST, PUT, বা DELETE ব্যবহার করা হয়।
Ajax কি?
Ajax একটি ওয়েব ডেভেলপমেন্ট কৌশল যা JavaScript এবং XMLHttpRequest অবজেক্ট ব্যবহার করে ওয়েব পেজের মধ্যে ডেটা পাঠানো এবং গ্রহণ করার জন্য ব্যবহৃত হয়, যাতে পেজটি রিফ্রেশ না হয়। সাধারণত, Ajax এর মাধ্যমে JSON ফরম্যাটে ডেটা আদান প্রদান করা হয়।
Ajax এর সুবিধা
- পেজ রিফ্রেশ ছাড়াই ডেটা লোড করা।
- ব্যবহারকারীর ইন্টারঅ্যাকশনের পরিমাণ কমানো।
- সিস্টেম পারফরম্যান্স উন্নত করা, কারণ শুধুমাত্র প্রয়োজনীয় ডেটাই সার্ভার থেকে লোড হয়।
- ওয়েব অ্যাপ্লিকেশনকে আরও গতিশীল এবং ইন্টারঅ্যাকটিভ বানানো।
ExpressJS-এ Ajax রিকোয়েস্ট হ্যান্ডলিং
ExpressJS-এ Ajax রিকোয়েস্ট হ্যান্ডলিং করার জন্য, ক্লায়েন্ট সাইডে JavaScript ব্যবহার করা হয়, এবং সার্ভার সাইডে Express রাউটারের মাধ্যমে রিকোয়েস্ট গুলি হ্যান্ডল করা হয়।
১. ExpressJS সার্ভার সেটআপ করা
প্রথমে, Express অ্যাপ্লিকেশন তৈরি করতে হবে এবং তারপরে HTTP রিকোয়েস্ট গুলি হ্যান্ডল করতে হবে।
১.১. প্যাকেজ ইনস্টল করা
npm install express
১.২. Express অ্যাপ্লিকেশন সেটআপ করা
const express = require('express');
const app = express();
const PORT = 3000;
// JSON রিকোয়েস্ট বডি পার্স করার জন্য Middleware
app.use(express.json());
// স্ট্যাটিক ফাইল সার্ভ করার জন্য (যেমন HTML, CSS, JS)
app.use(express.static('public'));
// রুট তৈরি করা
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
// Ajax রিকোয়েস্ট হ্যান্ডলিং
app.post('/data', (req, res) => {
const userData = req.body; // ক্লায়েন্ট থেকে আসা ডেটা
console.log(userData);
res.json({ message: 'Data received successfully', data: userData });
});
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}`);
});
এখানে, আমরা Express অ্যাপ্লিকেশন তৈরি করেছি, যেখানে /data রাউটটি POST রিকোয়েস্ট গ্রহণ করবে এবং ক্লায়েন্ট থেকে আসা ডেটা রেসপন্স হিসেবে ফিরিয়ে দিবে।
২. ক্লায়েন্ট সাইড: Ajax রিকোয়েস্ট করা
এখন আমরা ক্লায়েন্ট সাইডে JavaScript দিয়ে Ajax রিকোয়েস্ট পাঠাব। এখানে আমরা fetch API ব্যবহার করবো, যা আধুনিক ব্রাউজারে Ajax রিকোয়েস্ট করার জন্য সবচেয়ে জনপ্রিয় এবং সহজ পদ্ধতি।
২.১. HTML ফাইল তৈরি
এটি public/index.html ফাইল হবে যেখানে ক্লায়েন্ট সাইডের HTML এবং JavaScript কোড থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ExpressJS Ajax Example</title>
</head>
<body>
<h1>Ajax Example in ExpressJS</h1>
<form id="dataForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<script>
// Ajax রিকোয়েস্ট পাঠানোর জন্য ফর্ম সাবমিট হ্যান্ডলার
document.getElementById('dataForm').addEventListener('submit', function(event) {
event.preventDefault(); // ফর্মের ডিফল্ট সাবমিট প্রতিরোধ
const name = document.getElementById('name').value;
// Fetch API ব্যবহার করে Ajax রিকোয়েস্ট
fetch('/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: name })
})
.then(response => response.json())
.then(data => {
// সার্ভার থেকে পাওয়া রেসপন্স দেখানো
document.getElementById('response').innerHTML = `
<h3>Server Response:</h3>
<p>${data.message}</p>
<pre>${JSON.stringify(data.data, null, 2)}</pre>
`;
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>
এখানে, যখন ব্যবহারকারী ফর্মটি সাবমিট করবে, তখন fetch() API ব্যবহার করে একটি POST রিকোয়েস্ট /data রাউটে পাঠানো হবে। সার্ভার থেকে পাওয়া রেসপন্স তারপর HTML পৃষ্ঠায় প্রদর্শন করা হবে।
৩. কিভাবে কাজ করবে?
- ক্লায়েন্ট সাইড: ব্যবহারকারী যখন নাম ইনপুট করবে এবং ফর্মটি সাবমিট করবে, তখন fetch() API একটি POST রিকোয়েস্ট
/dataরাউটে পাঠাবে। রিকোয়েস্টের মধ্যে JSON ডেটা পাঠানো হবে। - সার্ভার সাইড (ExpressJS): ExpressJS সার্ভার
/dataরাউটে POST রিকোয়েস্ট গ্রহণ করবে এবং সেই ডেটা প্রসেস করে রেসপন্স পাঠাবে। রেসপন্স হিসেবে সার্ভার একটি JSON অবজেক্ট পাঠাবে, যা ক্লায়েন্ট সাইডে প্রদর্শিত হবে।
৪. এক্সপ্রেস অ্যাপ্লিকেশন এবং Ajax রিকোয়েস্টের কাজের সারাংশ
- ExpressJS সার্ভার তৈরি করা হয়েছে যেখানে রিকোয়েস্ট হ্যান্ডলিংয়ের জন্য বিভিন্ন রাউট রয়েছে।
- Ajax রিকোয়েস্ট ক্লায়েন্ট সাইডে
fetch()API ব্যবহার করে করা হয়েছে। এতে asynchronousভাবে ডেটা আদান প্রদান করা হচ্ছে। - ক্লায়েন্টের কাছে রেসপন্স পাঠানোর সময় JSON ফরম্যাট ব্যবহার করা হয়েছে।
সারাংশ
ExpressJS-এর মাধ্যমে Ajax রিকোয়েস্ট করা খুবই সহজ এবং কার্যকরী। fetch() API ব্যবহার করে ক্লায়েন্ট সাইডে Ajax রিকোয়েস্ট পাঠানো হয়, এবং সার্ভার সেই রিকোয়েস্ট হ্যান্ডল করে JSON ফরম্যাটে রেসপন্স পাঠায়। এই পদ্ধতি ব্যবহার করে ওয়েব অ্যাপ্লিকেশনগুলো আরও গতিশীল এবং ইন্টারঅ্যাকটিভ হয়ে ওঠে।
ExpressJS-এ JSON রেসপন্স তৈরি করা একটি সাধারণ কাজ এবং এটি ওয়েব অ্যাপ্লিকেশন বা API-তে ক্লায়েন্টদের তথ্য পাঠানোর জন্য ব্যাপকভাবে ব্যবহৃত হয়। JSON (JavaScript Object Notation) হল একটি হালকা ও স্বচ্ছ ডেটা ফরম্যাট, যা ব্রাউজার এবং সার্ভারের মধ্যে ডেটা আদান-প্রদানে ব্যবহার করা হয়।
ExpressJS-এ JSON রেসপন্স তৈরি করতে res.json() মেথড ব্যবহার করা হয়, যা একটি জাভাস্ক্রিপ্ট অবজেক্ট বা অ্যারে কে JSON ফরম্যাটে রূপান্তর করে ক্লায়েন্টকে পাঠায়।
১. JSON রেসপন্স তৈরি করা
ExpressJS-এ একটি রাউট তৈরি করে JSON রেসপন্স পাঠানো খুবই সহজ। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো যেখানে একটি GET রিকোয়েস্টের মাধ্যমে JSON রেসপন্স পাঠানো হচ্ছে।
উদাহরণ: JSON রেসপন্স পাঠানো
const express = require('express');
const app = express();
const port = 3000;
// GET রাউট যা JSON রেসপন্স পাঠায়
app.get('/api/data', (req, res) => {
const responseData = {
success: true,
message: 'Data fetched successfully',
data: {
id: 1,
name: 'John Doe',
email: 'john@example.com'
}
};
res.json(responseData); // JSON রেসপন্স পাঠানো
});
app.listen(port, () => {
console.log(`Server running at http://localhost:${port}`);
});
এখানে:
res.json(): এটিresponseDataঅবজেক্টটি JSON ফরম্যাটে রূপান্তর করে ক্লায়েন্টকে পাঠাচ্ছে।responseData: এটি একটি জাভাস্ক্রিপ্ট অবজেক্ট, যা সাফল্য স্ট্যাটাস, বার্তা, এবং ডেটা ধারণ করে।
রেসপন্স:
{
"success": true,
"message": "Data fetched successfully",
"data": {
"id": 1,
"name": "John Doe",
"email": "john@example.com"
}
}
২. Error Handling সহ JSON রেসপন্স
আপনি যদি API তে এরর হ্যান্ডলিং করতে চান, তবে তাও JSON রেসপন্সের মাধ্যমে করা যায়। উদাহরণস্বরূপ, যদি কোনো রিসোর্স পাওয়া না যায় বা কোনো সমস্যা হয়, তাহলে আপনি একটি কাস্টম এরর বার্তা JSON ফরম্যাটে পাঠাতে পারেন।
উদাহরণ: Error Handling সহ JSON রেসপন্স
app.get('/api/user/:id', (req, res) => {
const userId = req.params.id;
// যদি ব্যবহারকারী না পাওয়া যায়
if (userId !== '1') {
return res.status(404).json({
success: false,
message: 'User not found'
});
}
// ব্যবহারকারী পাওয়া গেলে
const user = {
id: 1,
name: 'John Doe',
email: 'john@example.com'
};
res.json({
success: true,
message: 'User found',
data: user
});
});
এখানে:
- যদি ব্যবহারকারী
idনা পাওয়া যায়, তাহলে 404 (Not Found) স্ট্যাটাস কোড সহ একটি JSON এরর রেসপন্স পাঠানো হচ্ছে। - যদি ব্যবহারকারী পাওয়া যায়, তবে একটি সফল JSON রেসপন্স পাঠানো হচ্ছে।
404 Error রেসপন্স:
{
"success": false,
"message": "User not found"
}
Success রেসপন্স:
{
"success": true,
"message": "User found",
"data": {
"id": 1,
"name": "John Doe",
"email": "john@example.com"
}
}
৩. স্ট্যাটাস কোড সহ JSON রেসপন্স
ExpressJS-এ আপনি HTTP স্ট্যাটাস কোড সেট করতে পারেন, যা ক্লায়েন্টকে সার্ভারের অবস্থা সম্পর্কে তথ্য দেয়। res.status() মেথড দিয়ে আপনি স্ট্যাটাস কোড সেট করতে পারেন এবং তারপর res.json() বা res.send() দিয়ে JSON রেসপন্স পাঠাতে পারেন।
উদাহরণ: স্ট্যাটাস কোড সহ JSON রেসপন্স
app.post('/api/users', (req, res) => {
const { name, email } = req.body;
// যদি ডেটা ভুল থাকে
if (!name || !email) {
return res.status(400).json({
success: false,
message: 'Name and email are required'
});
}
// নতুন ব্যবহারকারী তৈরি
const newUser = {
id: 2,
name: name,
email: email
};
res.status(201).json({
success: true,
message: 'User created successfully',
data: newUser
});
});
এখানে:
- যদি ইনপুট ডেটা ঠিক না থাকে, 400 (Bad Request) স্ট্যাটাস কোড সহ JSON এরর রেসপন্স পাঠানো হচ্ছে।
- যদি নতুন ব্যবহারকারী তৈরি হয়, 201 (Created) স্ট্যাটাস কোড সহ JSON রেসপন্স পাঠানো হচ্ছে।
400 Error রেসপন্স:
{
"success": false,
"message": "Name and email are required"
}
201 Success রেসপন্স:
{
"success": true,
"message": "User created successfully",
"data": {
"id": 2,
"name": "Jane Doe",
"email": "jane@example.com"
}
}
৪. Query Parameters সহ JSON রেসপন্স
ক্লায়েন্টরা প্রায়ই URL-এ query parameters পাঠিয়ে সার্ভার থেকে নির্দিষ্ট ডেটা চায়। ExpressJS-এ আপনি req.query ব্যবহার করে query parameters অ্যাক্সেস করতে পারেন এবং সেই অনুযায়ী JSON রেসপন্স পাঠাতে পারেন।
উদাহরণ: Query Parameters সহ JSON রেসপন্স
app.get('/api/search', (req, res) => {
const { name, email } = req.query;
if (!name && !email) {
return res.status(400).json({
success: false,
message: 'At least one query parameter (name or email) is required'
});
}
// ফিল্টার করা ডেটা
const users = [
{ id: 1, name: 'John Doe', email: 'john@example.com' },
{ id: 2, name: 'Jane Doe', email: 'jane@example.com' }
];
const filteredUsers = users.filter(user => {
return (name && user.name.includes(name)) || (email && user.email.includes(email));
});
res.json({
success: true,
data: filteredUsers
});
});
এখানে:
req.queryদিয়ে query parameters (nameবাemail) থেকে ইনপুট নেওয়া হচ্ছে।nameবাemailএর ভিত্তিতে ডেটা ফিল্টার করা হচ্ছে এবং JSON রেসপন্স পাঠানো হচ্ছে।
উদাহরণ Query:
GET /api/search?name=John
রেসপন্স:
{
"success": true,
"data": [
{
"id": 1,
"name": "John Doe",
"email": "john@example.com"
}
]
}
সারাংশ
ExpressJS দিয়ে JSON রেসপন্স তৈরি করা খুবই সহজ এবং এটি ওয়েব অ্যাপ্লিকেশন বা API ডেভেলপমেন্টে খুবই গুরুত্বপূর্ণ। res.json() মেথড ব্যবহার করে আপনি JSON ফরম্যাটে ডেটা ক্লায়েন্টে পাঠাতে পারেন। এর মাধ্যমে আপনি ডেটা, এরর মেসেজ, স্ট্যাটাস কোড, এবং অন্যান্য তথ্য সঠিকভাবে ক্লায়েন্টকে পাঠাতে পারবেন। RESTful API তৈরি করার সময় JSON রেসপন্স ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনকে আরও কার্যকর এবং ইন্টারঅ্যাকটিভ করা যায়।
ExpressJS এ Asynchronous Data Handling এবং Live Updates ব্যবস্থাপনা করা ওয়েব অ্যাপ্লিকেশনের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে। এখানে আমরা দুটি গুরুত্বপূর্ণ বিষয় আলোচনা করব:
- Asynchronous Data Handling: নন-ব্লকিং ওয়েব সার্ভার হিসেবে ExpressJS অ্যাপ্লিকেশন সঠিকভাবে কাজ করতে asynchronous (অসিঙ্ক্রোনাস) ডেটা প্রক্রিয়াকরণ ব্যবহার করে, যেখানে অ্যাপ্লিকেশন ইভেন্ট-ড্রিভেন ও কাজগুলো একসাথে সম্পাদন করতে সক্ষম হয়।
- Live Updates: এক্সপ্রেস অ্যাপ্লিকেশনে live updates বা real-time updates এ রিয়েল-টাইম ডেটা ট্রান্সফার, যেমন চ্যাট অ্যাপ্লিকেশন, ফিড আপডেট ইত্যাদি ব্যবহৃত হয়। আমরা এখানে WebSockets এবং Server-Sent Events (SSE) ব্যবহার করে Live Updates কীভাবে তৈরি করা যায় তা দেখব।
১. Asynchronous Data Handling
ExpressJS অসিঙ্ক্রোনাস ডেটা প্রক্রিয়াকরণে Promises এবং async/await ব্যবহার করে, যা অ্যাপ্লিকেশনকে ব্লক না করে দ্রুত প্রতিক্রিয়া প্রদান করতে সক্ষম হয়। এগুলি Node.js এর নেটিভ ফিচার এবং এই ফিচারগুলো ব্যবহার করে আমরা সহজে ডেটাবেস বা API কলের মতো দীর্ঘ প্রসেসিং এড়িয়ে যেতে পারি।
১.১. Asynchronous Data Handling উদাহরণ
এখানে, আমরা MongoDB থেকে ডেটা asynchronously নিয়ে আসব এবং সেটা রেসপন্স হিসেবে পাঠাবো। এজন্য আমরা async/await ব্যবহার করব।
const express = require('express');
const mongoose = require('mongoose');
const app = express();
// MongoDB সংযোগ
mongoose.connect('mongodb://localhost:27017/test', { useNewUrlParser: true, useUnifiedTopology: true });
// ডেটা মডেল
const Item = mongoose.model('Item', { name: String, description: String });
// Asynchronous রাউট
app.get('/items', async (req, res) => {
try {
const items = await Item.find(); // ডেটাবেস থেকে ডেটা asynchronously আনা
res.json(items);
} catch (error) {
res.status(500).send('Error fetching items');
}
});
// সার্ভার চালু
app.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});
কোড ব্যাখ্যা:
- async/await:
Item.find()একটি asynchronous অপারেশন, তাই আমরাawaitব্যবহার করছি এটি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করতে। - try/catch: error handling করা হয়েছে যাতে কোনো সমস্যা হলে সঠিক রেসপন্স পাঠানো যায়।
এটি সিঙ্ক্রোনাস কোডের মতোই দেখতে কিন্তু কার্যকরভাবে অসিঙ্ক্রোনাস কাজ করে।
২. Live Updates: WebSockets এবং Server-Sent Events (SSE)
Live updates বা real-time data ট্রান্সফার অনেক অ্যাপ্লিকেশনে ব্যবহৃত হয়, যেমন:
- চ্যাট অ্যাপ্লিকেশন
- ফিড আপডেট
- নোটিফিকেশন সিস্টেম
এই কাজগুলির জন্য আমরা WebSockets এবং Server-Sent Events (SSE) ব্যবহার করতে পারি।
৩. WebSockets
WebSockets হল একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে দু-দিক রিয়েল-টাইম যোগাযোগ তৈরি করে। WebSockets ব্যবহার করে, সার্ভার এবং ক্লায়েন্টের মধ্যে একবার সংযোগ স্থাপিত হলে, তারা একে অপরকে একযোগভাবে বার্তা পাঠাতে পারে।
ExpressJS-এ WebSockets ব্যবহারের জন্য আমরা socket.io লাইব্রেরি ব্যবহার করব।
৩.১. Socket.IO ইনস্টলেশন
npm install socket.io
৩.২. WebSockets এর মাধ্যমে Live Updates সেটআপ
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
// HTTP সার্ভার তৈরি
const server = http.createServer(app);
// Socket.IO ইনস্টল
const io = socketIo(server);
// WebSocket সংযোগ
io.on('connection', (socket) => {
console.log('A user connected');
// ক্লায়েন্টের কাছ থেকে মেসেজ গ্রহণ
socket.on('chat message', (msg) => {
console.log('Message received: ' + msg);
// সমস্ত ক্লায়েন্টকে মেসেজ পাঠানো
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
// রুট সেটআপ
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// সার্ভার চালু
server.listen(3000, () => {
console.log('Server running at http://localhost:3000');
});
৩.৩. HTML ক্লায়েন্ট (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="m" autocomplete="off">
<button>Send</button>
</form>
<script>
var socket = io();
// নতুন মেসেজ দেখানো
socket.on('chat message', function(msg){
var li = document.createElement('li');
li.textContent = msg;
document.getElementById('messages').appendChild(li);
});
// ফর্ম সাবমিট করলে মেসেজ পাঠানো
document.getElementById('form').onsubmit = function(e) {
e.preventDefault();
socket.emit('chat message', document.getElementById('m').value);
document.getElementById('m').value = '';
};
</script>
</body>
</html>
কোড ব্যাখ্যা:
io.emit('chat message', msg): সার্ভার থেকে সমস্ত ক্লায়েন্টকে মেসেজ পাঠানো হচ্ছে।socket.on('chat message', ...): ক্লায়েন্টে মেসেজটি রিসিভ করা হচ্ছে এবং UI-তে প্রদর্শন করা হচ্ছে।
৪. Server-Sent Events (SSE)
Server-Sent Events (SSE) হল একটি প্রোটোকল যা শুধুমাত্র সার্ভার থেকে ক্লায়েন্টে রিয়েল-টাইম ডেটা পাঠানোর জন্য ব্যবহৃত হয়। এটি একতরফা যোগাযোগের জন্য ব্যবহৃত হয় (সার্ভার → ক্লায়েন্ট), এবং এটি সাধারণত ব্রাউজার সমর্থিত।
৪.১. SSE সেটআপ
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
// প্রতিটি ৫ সেকেন্ডে ক্লায়েন্টে মেসেজ পাঠানো
setInterval(() => {
res.write('data: Hello, this is an update!\n\n');
}, 5000);
});
৪.২. HTML ক্লায়েন্ট (SSE)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSE Example</title>
</head>
<body>
<h2>Server Sent Events</h2>
<div id="message"></div>
<script>
const eventSource = new EventSource('/events');
eventSource.onmessage = function(event) {
document.getElementById('message').innerHTML = event.data;
};
</script>
</body>
</html>
কোড ব্যাখ্যা:
EventSource('/events'): ক্লায়েন্ট একটি SSE কানেকশন শুরু করে, যা সার্ভার থেকে রিয়েল-টাইম ডেটা পাবো।res.write('data: ...'): সার্ভার থেকে ক্লায়েন্টে ডেটা পাঠানো হচ্ছে। প্রতিটি ডেটা একটিdata:লাইনে পাঠানো হয়।
সারাংশ
ExpressJS-এ Asynchronous Data Handling এবং Live Updates ব্যবস্থাপনা করার জন্য WebSockets এবং Server-Sent Events (SSE) ব্যবহার করা যায়। Promises এবং async/await এর মাধ্যমে ডেটা asynchronously পরিচালনা করা হয়, যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে। WebSockets এবং SSE এর মাধ্যমে, আপনি রিয়েল-টাইম ডেটা ট্রান্সফার এবং লাইভ আপডেট সিস্টেম তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে।
Ajax (Asynchronous JavaScript and XML) হল একটি প্রযুক্তি, যা ওয়েব পেজকে সার্ভারের সাথে অ্যাসিঙ্ক্রোনাস (asynchronous) যোগাযোগ করতে সক্ষম করে। এর মাধ্যমে পেজ রিফ্রেশ না করেই সার্ভার থেকে ডেটা নিয়ে আসা বা সার্ভারে ডেটা পাঠানো সম্ভব হয়। ExpressJS অ্যাপ্লিকেশন এবং ক্লায়েন্ট সাইড জাভাস্ক্রিপ্টের মাধ্যমে Ajax রিকোয়েস্টের মাধ্যমে ডেটা ইন্টারঅ্যাক্ট করতে পারে।
এই লেখায়, আমরা দেখব কিভাবে jQuery, Fetch API, এবং Axios ব্যবহার করে ExpressJS অ্যাপে Ajax রিকোয়েস্ট করা যায়।
১. jQuery দিয়ে Ajax রিকোয়েস্ট
jQuery হল একটি জনপ্রিয় জাভাস্ক্রিপ্ট লাইব্রেরি, যা Ajax রিকোয়েস্ট সহজভাবে পরিচালনা করতে সহায়তা করে। ExpressJS অ্যাপে jQuery ব্যবহার করে ডেটা পাঠানোর এবং গ্রহণ করার পদ্ধতি এখানে দেখানো হয়েছে।
১.১. jQuery দিয়ে GET রিকোয়েস্ট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="getData">GET Data</button>
<div id="response"></div>
<script>
$('#getData').click(function() {
$.ajax({
url: '/api/data', // ExpressJS রাউট
type: 'GET',
success: function(data) {
$('#response').html(data); // সার্ভার থেকে প্রাপ্ত ডেটা প্রদর্শন
},
error: function(error) {
console.log('Error:', error);
}
});
});
</script>
</body>
</html>
১.২. ExpressJS রাউট সেটআপ
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from ExpressJS!' });
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
এখানে, jQuery.ajax() মেথড ব্যবহার করা হয়েছে /api/data রাউটে GET রিকোয়েস্ট পাঠানোর জন্য এবং সার্ভার থেকে প্রাপ্ত ডেটা HTML পেজে প্রদর্শন করা হয়েছে।
২. Fetch API দিয়ে Ajax রিকোয়েস্ট
Fetch API হল একটি নতুন ওয়েব API যা Ajax রিকোয়েস্ট করার জন্য ব্যবহৃত হয়। এটি ব্রাউজার সাপোর্ট করে এবং Promise-based, যা কোড লেখার সময় আরও পরিষ্কার এবং সহজ করে তোলে।
২.১. Fetch API দিয়ে GET রিকোয়েস্ট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax with Fetch</title>
</head>
<body>
<button id="getData">GET Data</button>
<div id="response"></div>
<script>
document.getElementById('getData').addEventListener('click', () => {
fetch('/api/data') // ExpressJS রাউট
.then(response => response.json()) // JSON রেসপন্স পার্স করা
.then(data => {
document.getElementById('response').innerHTML = data.message; // ডেটা প্রদর্শন
})
.catch(error => console.error('Error:', error));
});
</script>
</body>
</html>
২.২. ExpressJS রাউট সেটআপ
ExpressJS রাউট সেটআপ আগের মতোই থাকবে:
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from ExpressJS!' });
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
এখানে fetch() ব্যবহার করে /api/data রাউটে GET রিকোয়েস্ট করা হয়েছে এবং তার রেসপন্সকে .json() পদ্ধতি দিয়ে পার্স করা হয়েছে।
৩. Axios দিয়ে Ajax রিকোয়েস্ট
Axios একটি জনপ্রিয় JavaScript লাইব্রেরি যা Promise ভিত্তিক এবং সহজে HTTP রিকোয়েস্ট পাঠানোর সুবিধা দেয়। এটি GET, POST, PUT, DELETE সহ বিভিন্ন HTTP মেথড সাপোর্ট করে এবং ব্যবহারে সহজ।
৩.১. Axios দিয়ে GET রিকোয়েস্ট
প্রথমে Axios ইনস্টল করতে হবে:
npm install axios --save
এরপর, Axios ব্যবহার করে GET রিকোয়েস্ট করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax with Axios</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<button id="getData">GET Data</button>
<div id="response"></div>
<script>
document.getElementById('getData').addEventListener('click', () => {
axios.get('/api/data') // ExpressJS রাউট
.then(response => {
document.getElementById('response').innerHTML = response.data.message; // সার্ভার থেকে প্রাপ্ত ডেটা প্রদর্শন
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
</body>
</html>
৩.২. ExpressJS রাউট সেটআপ
const express = require('express');
const app = express();
const port = 3000;
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from ExpressJS!' });
});
app.listen(port, () => {
console.log(`Server is running at http://localhost:${port}`);
});
এখানে axios.get() মেথড ব্যবহার করে GET রিকোয়েস্ট পাঠানো হয়েছে এবং রেসপন্সের ডেটা প্রদর্শন করা হয়েছে।
৪. POST রিকোয়েস্ট করা
যখন আপনাকে সার্ভারে ডেটা পাঠাতে হয়, তখন GET রিকোয়েস্টের বদলে POST রিকোয়েস্ট ব্যবহার করা হয়। এখানে আমরা দেখব কিভাবে jQuery, Fetch API, এবং Axios দিয়ে POST রিকোয়েস্ট করা যায়।
৪.১. jQuery দিয়ে POST রিকোয়েস্ট
$('#sendData').click(function() {
$.ajax({
url: '/api/data',
type: 'POST',
data: { name: 'John', age: 30 },
success: function(data) {
$('#response').html(data.message);
},
error: function(error) {
console.log('Error:', error);
}
});
});
৪.২. Fetch API দিয়ে POST রিকোয়েস্ট
fetch('/api/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => {
document.getElementById('response').innerHTML = data.message;
})
.catch(error => console.error('Error:', error));
৪.৩. Axios দিয়ে POST রিকোয়েস্ট
axios.post('/api/data', { name: 'John', age: 30 })
.then(response => {
document.getElementById('response').innerHTML = response.data.message;
})
.catch(error => {
console.error('Error:', error);
});
৪.৪. ExpressJS POST রাউট
app.post('/api/data', express.json(), (req, res) => {
console.log(req.body); // ক্লায়েন্ট থেকে প্রাপ্ত ডেটা
res.json({ message: 'Data received successfully!' });
});
সারাংশ
ExpressJS এর সাথে Ajax রিকোয়েস্ট করা বেশ সহজ এবং কার্যকরী। আপনি jQuery, Fetch API, এবং Axios এর মাধ্যমে GET ও POST রিকোয়েস্ট পাঠাতে পারেন এবং সার্ভার থেকে রেসপন্স গ্রহণ করতে পারেন। jQuery যেখানে একটি সহজ লাইব্রেরি হিসেবে ব্যবহৃত হয়, সেখানে Fetch API আধুনিক ব্রাউজারে সরাসরি ব্যবহার করা যায় এবং Axios একটি শক্তিশালী লাইব্রেরি যা Promise-বেসড এবং আরও অনেক ফিচার প্রদান করে। এসবের মাধ্যমে আপনি ক্লায়েন্ট সাইড থেকে অ্যাসিঙ্ক্রোনাস রিকোয়েস্ট এবং রেসপন্স হ্যান্ড
লিং করতে পারবেন।
Read more
