ExpressJS দিয়ে আপনি একটি রিয়েল-টাইম Chat অ্যাপ্লিকেশন এবং Live Notification System খুব সহজেই তৈরি করতে পারেন। এর জন্য আমরা WebSocket প্রযুক্তি ব্যবহার করব, যা রিয়েল-টাইম ডেটা ট্রান্সফারের জন্য উপযুক্ত। WebSocket ক্লায়েন্ট এবং সার্ভারের মধ্যে স্থায়ী কানেকশন তৈরি করে, যা দিয়ে দুজন ব্যবহারকারী রিয়েল-টাইম চ্যাট করতে পারে বা সিস্টেমের কোন নির্দিষ্ট ইভেন্টের উপর লাইভ নোটিফিকেশন পেতে পারে।
এখানে আমরা Socket.io নামক একটি লাইব্রেরি ব্যবহার করব, যা WebSocket-এর উপরে কাজ করে এবং ExpressJS এর সাথে সহজে একত্রিত করা যায়।
১. Socket.io পরিচিতি
Socket.io হল একটি লাইব্রেরি যা WebSocket ও অন্যান্য প্রযুক্তি (যেমন: HTTP long-polling) ব্যবহার করে রিয়েল-টাইম, দুই-দিকের যোগাযোগ (two-way communication) সক্ষম করে। এটি ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম ইভেন্ট চালনা করতে ব্যবহৃত হয়, যেমন চ্যাট মেসেজ, লাইভ নোটিফিকেশন ইত্যাদি।
২. ExpressJS এবং Socket.io সেটআপ
ExpressJS অ্যাপ্লিকেশন তৈরি করার পর Socket.io ইনস্টল এবং সেটআপ করতে হবে।
২.১. Socket.io ইনস্টল করা
Socket.io ইনস্টল করতে npm ব্যবহার করুন:
npm install socket.io
২.২. Socket.io সাথে ExpressJS সেটআপ
এখন, ExpressJS অ্যাপ্লিকেশনটি Socket.io এর সাথে কনফিগার করা হবে। এর জন্য, ExpressJS অ্যাপ্লিকেশনটি HTTP সার্ভার হিসেবে কাজ করবে এবং Socket.io সেই সার্ভারের সাথে যুক্ত হবে।
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
// ক্লায়েন্টকে HTML ফাইল পাঠানো
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// Socket.io কানেকশন এবং ইভেন্ট হ্যান্ডলিং
io.on('connection', (socket) => {
console.log('A user connected');
// চ্যাট মেসেজ রিসিভ করার ইভেন্ট
socket.on('chat message', (msg) => {
io.emit('chat message', msg); // সব ক্লায়েন্টে মেসেজ পাঠানো
});
// ডিসকানেক্ট হওয়ার ইভেন্ট
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
// সার্ভার শুরু
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
এখানে, আমরা HTTP সার্ভার তৈরি করেছি এবং সেই সার্ভারের সাথে Socket.io যুক্ত করেছি। io.on('connection') ইভেন্টটি যখন কোন ক্লায়েন্ট কানেক্ট হবে তখন ট্রিগার হয়। পরে, আমরা chat message নামে একটি ইভেন্ট গ্রহণ করছি, যা ক্লায়েন্টের চ্যাট মেসেজ গ্রহণ করবে এবং সব ক্লায়েন্টে সেই মেসেজ পাঠিয়ে দিবে।
৩. ক্লায়েন্ট সাইড (HTML ও JavaScript)
এখন, index.html নামক একটি HTML ফাইল তৈরি করি যাতে ব্যবহারকারীরা চ্যাট করতে পারে। এখানে, আমরা Socket.io এর ক্লায়েন্ট সাইড লাইব্রেরি ব্যবহার করব।
<!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>
<style>
#messages { list-style-type: none; padding: 0; }
#messages li { padding: 8px; background-color: #f3f3f3; margin-bottom: 4px; }
input { padding: 10px; width: 80%; }
button { padding: 10px; }
</style>
</head>
<body>
<ul id="messages"></ul>
<input id="m" autocomplete="off" /><button>Send</button>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io(); // Socket.io এর সাথে কানেক্ট
// চ্যাট মেসেজ পাঠানোর ইভেন্ট
var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // পেজ রিফ্রেশ এড়ানো
socket.emit('chat message', document.getElementById('m').value); // মেসেজ সার্ভারে পাঠানো
document.getElementById('m').value = ''; // ইনপুট ফিল্ড ক্লিয়ার করা
});
// চ্যাট মেসেজ রিসিভ করা এবং UI-তে দেখানো
socket.on('chat message', function(msg) {
var li = document.createElement('li');
li.textContent = msg;
document.getElementById('messages').appendChild(li);
});
</script>
</body>
</html>
এখানে, Socket.io এর ক্লায়েন্ট সাইড লাইব্রেরি (socket.io.js) ব্যবহার করা হয়েছে এবং JavaScript-এ চ্যাট মেসেজ সার্ভারে পাঠানো ও রিসিভ করা হচ্ছে। যখন মেসেজ পাঠানো হয়, তখন এটি সার্ভারে গিয়ে সবার কাছে পৌঁছে যায়।
৪. লাইভ নোটিফিকেশন সিস্টেম
এখন, আমরা একটি লাইভ নোটিফিকেশন সিস্টেম তৈরি করব। ধরুন, আপনি যখন একটি চ্যাট মেসেজ পাঠান, তখন অন্য ব্যবহারকারীকে নোটিফিকেশন পাঠানো হবে।
৪.১. নোটিফিকেশন পাঠানো
আমরা একই Socket.io কানেকশনের মধ্যে একটি নতুন ইভেন্ট যোগ করব, যার মাধ্যমে চ্যাট মেসেজ পাঠানোর পরে একাধিক ব্যবহারকারীকে নোটিফিকেশন পাঠানো হবে।
io.on('connection', (socket) => {
console.log('A user connected');
// চ্যাট মেসেজ রিসিভ করা এবং সবার কাছে পাঠানো
socket.on('chat message', (msg) => {
io.emit('chat message', msg); // মেসেজ সকল ক্লায়েন্টকে পাঠানো
socket.broadcast.emit('notification', 'New message received!'); // শুধু অন্যদের নোটিফিকেশন পাঠানো
});
// ডিসকানেক্ট হওয়ার ইভেন্ট
socket.on('disconnect', () => {
console.log('A user disconnected');
});
});
এখন, ক্লায়েন্ট সাইডে আমরা নোটিফিকেশন ইভেন্টটি গ্রহণ করব এবং ইউজারের কাছে দেখাবো।
৪.২. নোটিফিকেশন দেখানো ক্লায়েন্ট সাইডে
<script>
var socket = io(); // Socket.io এর সাথে কানেক্ট
// চ্যাট মেসেজ পাঠানোর ইভেন্ট
var form = document.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
socket.emit('chat message', document.getElementById('m').value); // মেসেজ সার্ভারে পাঠানো
document.getElementById('m').value = '';
});
// চ্যাট মেসেজ রিসিভ করা এবং UI-তে দেখানো
socket.on('chat message', function(msg) {
var li = document.createElement('li');
li.textContent = msg;
document.getElementById('messages').appendChild(li);
});
// নোটিফিকেশন রিসিভ করা
socket.on('notification', function(msg) {
alert(msg); // সিম্পল এলার্ট নোটিফিকেশন
});
</script>
এখানে, যখন একজন ব্যবহারকারী একটি মেসেজ পাঠায়, অন্য ব্যবহারকারীদের স্ক্রীনে একটি পপ-আপ এলার্ট নোটিফিকেশন দেখানো হবে।
৫. সারাংশ
ExpressJS এবং Socket.io এর মাধ্যমে একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন এবং লাইভ নোটিফিকেশন সিস্টেম তৈরি করা সম্ভব। Socket.io ব্যবহার করে, ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম দুই-দিকের যোগাযোগ স্থাপন করা হয়। এটি চ্যাট মেসেজ পাঠানো এবং গ্রহণ করার পাশাপাশি, ব্যবহারকারীদের নোটিফিকেশন পাঠানোর জন্যও ব্যবহৃত হয়। ExpressJS এবং Socket.io একসাথে ব্যবহার করে খুব সহজেই আপনি রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে পারবেন।
Read more
