এখানে একটি বেসিক Chat Application তৈরি করা হবে যেখানে Node.js এবং Socket.IO ব্যবহার করা হবে। এই অ্যাপ্লিকেশনটি একটি real-time চ্যাট সিস্টেম হবে, যেখানে ব্যবহারকারীরা একে অপরের সাথে সরাসরি বার্তা পাঠাতে পারবেন।
Step 1: Install Dependencies
প্রথমে, আপনাকে একটি নতুন Node.js প্রজেক্ট তৈরি করতে হবে এবং প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করতে হবে। নিচে সেই কমান্ডগুলি দেওয়া হলো:
Node.js প্রজেক্ট তৈরি করা:
mkdir chat-app cd chat-app npm init -yExpress এবং Socket.IO ইনস্টল করা:
npm install express socket.io
Step 2: Server Side Code (Node.js with Express and Socket.IO)
এখানে একটি বেসিক Express সার্ভার তৈরি করা হচ্ছে যা Socket.IO এর মাধ্যমে রিয়েল-টাইম চ্যাট সিস্টেম পরিচালনা করবে।
server.js:
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
// Express app এবং HTTP সার্ভার তৈরি করা
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
// স্ট্যাটিক ফাইল সার্ভ করা (HTML, CSS, JS)
app.use(express.static('public'));
// রিয়েল-টাইম চ্যাটের জন্য 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('User disconnected');
});
});
// সার্ভার চালু করা
server.listen(3000, () => {
console.log('Server is running on http://localhost:3000');
});Step 3: Client Side Code (HTML, CSS, JavaScript)
এখন আমরা ক্লায়েন্ট সাইডে একটি বেসিক চ্যাট ইন্টারফেস তৈরি করবো। Socket.IO ক্লায়েন্ট সাইড লাইব্রেরি ব্যবহার করে চ্যাট বার্তা পাঠানো এবং গ্রহণ করা হবে।
public/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Chat</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
ul { list-style-type: none; padding: 0; }
li { padding: 8px; margin-bottom: 4px; background-color: #f0f0f0; border-radius: 4px; }
input { padding: 8px; width: 80%; margin-right: 10px; }
button { padding: 8px 12px; }
</style>
</head>
<body>
<h2>Real-Time Chat Application</h2>
<ul id="messages"></ul>
<input id="message" autocomplete="off" placeholder="Type a message..." />
<button onclick="sendMessage()">Send</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
// চ্যাট বার্তা পাঠানোর ফাংশন
function sendMessage() {
const message = document.getElementById('message').value;
if (message) {
socket.emit('chat message', message);
document.getElementById('message').value = ''; // ইনপুট ক্লিয়ার করা
}
}
// চ্যাট বার্তা গ্রহণ এবং UI-তে যোগ করা
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
document.getElementById('messages').appendChild(li);
});
</script>
</body>
</html>Step 4: Run the Application
এখন আপনার সব কিছু তৈরি হয়ে গেছে। চলুন অ্যাপ্লিকেশনটি চালু করি।
Server চালু করুন:
node server.js- Browser-এ অ্যাপ্লিকেশন খুলুন:
- আপনার ব্রাউজারে গিয়ে http://localhost:3000 এ গিয়ে চ্যাট অ্যাপ্লিকেশনটি দেখুন।
How It Works:
- Server:
- Express server রিকোয়েস্ট হ্যান্ডল করে এবং Socket.IO দিয়ে রিয়েল-টাইম চ্যাটের জন্য কানেকশন পরিচালনা করে।
- যখন একটি ব্যবহারকারী chat message ইভেন্ট পাঠায়, সার্ভার সেই বার্তা সমস্ত কানেক্টেড ক্লায়েন্টদের কাছে ব্রডকাস্ট (emit) করে।
- Client:
- ক্লায়েন্ট সাইডে একটি message input field এবং একটি button আছে। ব্যবহারকারী বার্তা টাইপ করে Send বাটনে ক্লিক করলে, সেই বার্তা chat message ইভেন্টের মাধ্যমে সার্ভারে পাঠানো হয়।
- সার্ভার থেকে আসা বার্তাগুলি ক্লায়েন্ট সাইডে ul এলিমেন্টে দেখানো হয়।
Key Features:
- Real-time communication: Socket.IO ব্যবহারের মাধ্যমে ক্লায়েন্ট এবং সার্ভারের মধ্যে real-time বার্তা আদান-প্রদান করা সম্ভব হয়।
- Broadcasting messages: সার্ভারটি io.emit ব্যবহার করে সমস্ত কানেক্টেড ক্লায়েন্টদের বার্তা ব্রডকাস্ট করে।
- Dynamic message display: ক্লায়েন্ট সাইডে নতুন বার্তা আসলে তা সাথেসাথেইতালিকায় দেখানো হয়।
Conclusion:
এটি একটি বেসিক real-time chat application যা Node.js এবং Socket.IO ব্যবহার করে তৈরি করা হয়েছে। আপনি এখানে আরও ফিচার যেমন user authentication, private messages, user typing notifications এবং chat history যোগ করতে পারেন। Socket.IO ব্যবহারের মাধ্যমে আপনি দ্রুত এবং কার্যকরভাবে real-time ডেটা সিঙ্কিং এবং চ্যাট সিস্টেম তৈরি করতে পারবেন।
Read more
