রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করতে WebSocket ব্যবহার করা সবচেয়ে ভালো পদ্ধতি। WebSocket ক্লায়েন্ট এবং সার্ভারের মধ্যে পূর্ণ-ডুপ্লেক্স (full-duplex) যোগাযোগ সক্ষম করে, যা চ্যাট অ্যাপ্লিকেশনকে দ্রুত এবং ইন্টারেক্টিভ করে তোলে। এই টিউটোরিয়ালে, আমরা কীভাবে একটি মৌলিক রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করতে পারি, তা দেখব। আমরা এখানে Node.js, WebSocket, এবং HTML/JavaScript ব্যবহার করব।
১. প্রয়োজনীয় টুলস এবং লাইব্রেরি
- Node.js: সার্ভার সাইড প্রোগ্রামিংয়ের জন্য ব্যবহৃত হবে।
- ws (WebSocket লাইব্রেরি): Node.js এর জন্য WebSocket সমর্থন প্রদান করবে।
- HTML/CSS/JavaScript: ক্লায়েন্ট সাইডের জন্য ব্যবহৃত হবে।
২. Node.js এবং WebSocket সার্ভার সেটআপ
প্রথমে, আপনাকে Node.js এবং WebSocket সার্ভার সেটআপ করতে হবে। আপনার প্রজেক্ট ফোল্ডারে ws লাইব্রেরি ইনস্টল করতে হবে।
২.১ Node.js প্রকল্প তৈরি করা
প্রথমে একটি নতুন ডিরেক্টরি তৈরি করুন এবং সেখানে Node.js প্রজেক্ট শুরু করুন।
mkdir realtime-chat
cd realtime-chat
npm init -y
এরপর, WebSocket লাইব্রেরি ইনস্টল করুন:
npm install ws
২.২ WebSocket সার্ভার তৈরি
এখন একটি server.js ফাইল তৈরি করুন এবং নিচের কোডটি লিখুন:
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('A new client connected!');
// ক্লায়েন্ট থেকে বার্তা গ্রহণ করা
ws.on('message', (message) => {
console.log('Received: ' + message);
// সমস্ত ক্লায়েন্টকে বার্তা পাঠানো
wss.clients.forEach((client) => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
// ক্লায়েন্ট সংযোগ বিচ্ছিন্ন হলে
ws.on('close', () => {
console.log('A client disconnected!');
});
});
এই কোডে, আমরা একটি WebSocket সার্ভার তৈরি করেছি যা 8080 পোর্টে চলবে। সার্ভার যখন নতুন ক্লায়েন্ট সংযোগ পায়, তখন সে বার্তা গ্রহণ করে এবং সমস্ত সংযুক্ত ক্লায়েন্টকে সেই বার্তা পাঠিয়ে দেয়।
৩. ক্লায়েন্ট সাইড তৈরি
এখন আমরা HTML, CSS, এবং JavaScript ব্যবহার করে ক্লায়েন্ট সাইড তৈরি করব।
৩.১ 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>Real-Time Chat</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
#messages { height: 300px; border: 1px solid #ccc; overflow-y: scroll; padding: 10px; }
#input { width: 80%; padding: 10px; }
#sendBtn { padding: 10px 20px; cursor: pointer; }
</style>
</head>
<body>
<h2>Real-Time Chat</h2>
<div id="messages"></div>
<input type="text" id="input" placeholder="Type a message..."/>
<button id="sendBtn">Send</button>
<script>
// WebSocket কানেকশন তৈরি
const socket = new WebSocket('ws://localhost:8080');
// সার্ভারের সাথে সংযোগ স্থাপনের পর
socket.onopen = function() {
console.log('Connected to WebSocket server');
};
// সার্ভার থেকে বার্তা আসলে
socket.onmessage = function(event) {
const messageDiv = document.createElement('div');
messageDiv.textContent = event.data;
document.getElementById('messages').appendChild(messageDiv);
};
// বার্তা পাঠানোর জন্য
document.getElementById('sendBtn').addEventListener('click', function() {
const input = document.getElementById('input');
const message = input.value;
socket.send(message); // WebSocket মাধ্যমে বার্তা পাঠানো
input.value = ''; // ইনপুট ফিল্ড পরিষ্কার করা
});
// Enter key দিয়ে বার্তা পাঠানো
document.getElementById('input').addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
document.getElementById('sendBtn').click();
}
});
</script>
</body>
</html>
এখানে, আমরা একটি HTML পেজ তৈরি করেছি যার মধ্যে একটি messages ডিভ রয়েছে, যেখানে চ্যাট বার্তাগুলি প্রদর্শিত হবে, এবং একটি ইনপুট ফিল্ড ও বাটন দিয়ে বার্তা পাঠানো যাবে। JavaScript দিয়ে WebSocket সার্ভারের সাথে কানেকশন স্থাপন করা হয়েছে এবং সার্ভার থেকে বার্তা গ্রহণ করা হয়েছে। ক্লায়েন্ট যখন "Send" বাটনে ক্লিক করবে, তখন বার্তা সার্ভারে পাঠানো হবে এবং সার্ভার ঐ বার্তা সব ক্লায়েন্টে পাঠিয়ে দেবে।
৪. অ্যাপ্লিকেশন চালানো
প্রথমে, Node.js সার্ভার চালু করুন:
node server.js
এখন আপনার index.html ফাইলটি একটি ব্রাউজারে খুলুন। আপনি যদি একই ওয়েব পেজে একাধিক ট্যাব খুলে রাখেন, তাহলে দেখবেন যে এক ট্যাব থেকে পাঠানো বার্তা অন্য ট্যাবেও তৎক্ষণাৎ প্রদর্শিত হচ্ছে।
৫. উন্নত বৈশিষ্ট্য যোগ করা
এটি একটি বেসিক চ্যাট অ্যাপ্লিকেশন। আপনি এতে আরও কিছু উন্নত বৈশিষ্ট্য যোগ করতে পারেন:
- ব্যবহারকারীর নাম: ব্যবহারকারীরা তাদের নাম প্রবেশ করতে পারবেন এবং সেই নাম সহ বার্তা পাঠাতে পারবেন।
- স্টাইলিং: CSS ব্যবহার করে আরও উন্নত ডিজাইন যোগ করতে পারেন।
- ডেটাবেস সংযোগ: চ্যাটের ইতিহাস সংরক্ষণের জন্য একটি ডেটাবেস (যেমন MongoDB) ব্যবহার করতে পারেন।
- এনক্রিপশন: নিরাপত্তার জন্য চ্যাট বার্তাগুলি এনক্রিপ্ট করতে পারেন।
সারাংশ
এই টিউটোরিয়ালে, আমরা একটি মৌলিক রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করেছি যা WebSocket ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের মধ্যে পূর্ণ-ডুপ্লেক্স (full-duplex) যোগাযোগ স্থাপন করে। এই অ্যাপ্লিকেশনটি ব্যবহারকারীদের দ্রুত এবং সঠিকভাবে বার্তা পাঠানোর সুযোগ প্রদান করে, এবং এতে WebSocket সার্ভার এবং ক্লায়েন্ট সাইডের JavaScript কোডের মাধ্যমে চ্যাট ফিচার কার্যকরী করা হয়েছে।
Read more
