এখানে একটি Real-Time Communication App তৈরি করার প্রক্রিয়া দেখানো হবে, যেখানে ব্যবহারকারীরা WebSocket এর মাধ্যমে রিয়েল-টাইমে একে অপরের সাথে যোগাযোগ করতে পারবেন। আমরা এই উদাহরণে Node.js এবং Socket.IO ব্যবহার করবো, কারণ এগুলি রিয়েল-টাইম যোগাযোগের জন্য খুবই জনপ্রিয় এবং শক্তিশালী টুল।
আমরা একটি সিম্পল chat application তৈরি করব যেখানে একাধিক ব্যবহারকারী রিয়েল-টাইমে বার্তা পাঠাতে পারবেন।
Step 1: Node.js এবং Socket.IO ইনস্টল করা
প্রথমে, Node.js এবং Socket.IO ইনস্টল করতে হবে।
- Node.js ইনস্টল করুন:
- Node.js Official Website থেকে Node.js ইনস্টল করুন।
নতুন একটি প্রজেক্ট ফোল্ডার তৈরি করুন এবং সেখানে Node.js ইনিশিয়ালাইজ করুন:
mkdir real-time-chat cd real-time-chat npm init -y # এটি package.json ফাইল তৈরি করবেএখন, Express এবং Socket.IO প্যাকেজ ইনস্টল করুন:
npm install express socket.io
Step 2: Server Setup with Express and Socket.IO
server.js নামক একটি ফাইল তৈরি করুন এবং নিচের কোডটি লিখুন। এখানে, Express সার্ভার তৈরি হবে এবং Socket.IO এর মাধ্যমে রিয়েল-টাইম যোগাযোগ ব্যবস্থাপনা হবে।
server.js:
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);
// Static files (HTML, CSS, JS) serve করা
app.use(express.static('public'));
// When a user connects
io.on('connection', (socket) => {
console.log('A user connected');
// Chat message received
socket.on('chat message', (msg) => {
io.emit('chat message', msg); // Broadcast message to all users
});
// When a user disconnects
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
// Server listening on port 3000
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});- এখানে Express দিয়ে সার্ভার শুরু করা হয়েছে এবং Socket.IO দিয়ে রিয়েল-টাইম চ্যাটের জন্য ইভেন্ট হ্যান্ডলিং করা হচ্ছে। যখন একজন ব্যবহারকারী বার্তা পাঠাবে, তা io.emit এর মাধ্যমে সমস্ত সংযুক্ত ব্যবহারকারীর কাছে পৌঁছাবে।
Step 3: Frontend - HTML, CSS, and JavaScript
এখন public নামে একটি ফোল্ডার তৈরি করুন এবং সেখানে index.html, style.css, এবং script.js ফাইলগুলি তৈরি করুন।
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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chat-box">
<ul id="messages"></ul>
<input id="m" autocomplete="off" placeholder="Type a message..." />
<button>Send</button>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
</body>
</html>- এখানে একটি input field এবং button রাখা হয়েছে, যেখানে ব্যবহারকারী বার্তা লিখে পাঠাতে পারবেন।
public/style.css:
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#chat-box {
background-color: white;
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
input {
width: 100%;
padding: 10px;
margin-top: 10px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
margin-top: 10px;
}
button:hover {
background-color: #45a049;
}- এখানে CSS স্টাইল ব্যবহার করে চ্যাট বক্স, ইনপুট ফিল্ড এবং পাঠানো বাটনের ডিজাইন করা হয়েছে।
public/script.js:
const socket = io(); // Socket.IO client
// Get elements
const inputField = document.getElementById('m');
const button = document.querySelector('button');
const messages = document.getElementById('messages');
// When the 'Send' button is clicked, emit chat message event
button.addEventListener('click', () => {
const msg = inputField.value;
if (msg) {
socket.emit('chat message', msg); // Send message to server
inputField.value = ''; // Clear input field
}
});
// When a new chat message is received, append it to the list
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
messages.appendChild(li);
});- Socket.IO client দিয়ে chat message ইভেন্ট পাঠানো এবং গ্রহণ করা হয়। যখন একটি নতুন বার্তা আসবে, তা
<ul>এর মধ্যে নতুন<li>হিসেবে প্রদর্শিত হবে।
Step 4: Run the Application
এখন সবকিছু সেটআপ হয়ে গেলে, সার্ভার চালানোর জন্য নিচের কমান্ডটি ব্যবহার করুন:
node server.jsএখন আপনার ব্রাউজারে http://localhost:3000 এ গিয়ে রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশনটি ব্যবহার করতে পারবেন। একাধিক ট্যাবে অ্যাপ্লিকেশন খুলে আপনি দেখতে পারবেন, একটি ট্যাব থেকে লেখা বার্তা অন্য ট্যাবগুলিতে স্বয়ংক্রিয়ভাবে আপডেট হবে।
Step 5: Testing the Application
- একাধিক ট্যাব ওপেন করুন: একাধিক ব্রাউজার ট্যাবে বা উইন্ডোতে অ্যাপ্লিকেশনটি খুলুন।
- বার্তা পাঠান: একটি ট্যাবে বার্তা লিখে পাঠালে, তা সবার ট্যাবে রিয়েল-টাইমে প্রদর্শিত হবে।
Conclusion
এই উদাহরণে আমরা Node.js এবং Socket.IO ব্যবহার করে একটি সিম্পল Real-Time Communication App তৈরি করেছি যেখানে ব্যবহারকারীরা রিয়েল-টাইম চ্যাট করতে পারে। Socket.IO ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম কমিউনিকেশন সহজ করে তোলে এবং এটি WebSocket বা অন্যান্য ট্রান্সপোর্ট প্রোটোকলের উপর কাজ করে।
এটি একটি বেসিক উদাহরণ, তবে আপনি আরও উন্নত ফিচার যেমন authentication, private messages, file sharing, user presence ইত্যাদি যোগ করে অ্যাপ্লিকেশনটিকে আরও পরিপূর্ণ করতে পারেন।
Read more
