এই ব্লগ পোস্টে, আমরা একটি সাধারণ রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করব যা ব্যবহারকারীদের একটি চ্যাট গ্রুপে যোগদান করতে এবং রিয়েল-টাইমে যোগাযোগ করতে দেয়৷
আমরা কম লেটেন্সি সহ ব্যবহারকারীদের মধ্যে রিয়েল-টাইম মেসেজিংয়ের জন্য Ably-এর শক্তি, অবিরামভাবে বার্তাগুলি সংরক্ষণের জন্য Upstash Redis এবং অ্যাপ্লিকেশন তৈরি করার জন্য Node.js-এর শক্তি ব্যবহার করব৷
সাধ্য
Ably একটি বাস্তব-সময়ের অভিজ্ঞতার প্ল্যাটফর্ম যা ব্যবহারকারীদের মধ্যে দ্বিমুখী যোগাযোগ সক্ষম করে।
এই চ্যাট অ্যাপ্লিকেশনটির জন্য, আমরা Ably-এর Pub/Sub চ্যানেলগুলি ব্যবহার করব যাতে ব্যবহারকারীরা একটি Ably চ্যানেলে বার্তা "প্রকাশ" করে বার্তা পাঠাতে এবং ব্যবহারকারীদের "সাবস্ক্রাইব করে" চ্যানেলে পাঠানো বার্তাগুলি পেতে দেয়৷
Ably অতিরিক্ত বৈশিষ্ট্য সহ ওয়েব সকেটের উপরে একটি বিমূর্ত স্তর যোগ করে এই পাব/সাব চ্যানেলগুলি সরবরাহ করে। তাদের মধ্যে কিছু নিম্নরূপ:
-
গ্রাহকদের উপস্থিতি
-
প্রমাণীকরণ
-
হার্টবিট মেকানিজম
-
সারি
-
বার্তাগুলি যে ক্রমে প্রকাশিত হয়েছিল সে অনুযায়ী বিতরণ করার ক্ষমতা
-
Ably
-এ যেকোন ইভেন্টের মাধ্যমে ফাংশন আহ্বান করতে ইন্টিগ্রেশন -
কাফকার কাছে বার্তা/উপস্থিতি/মেটাডেটা স্ট্রিম করুন
আপনি আরও জানতে তাদের ওয়েবসাইট দেখতে পারেন!
এই শক্তিশালী রিয়েল-টাইম এক্সপেরিয়েন্স হাবটি ব্যবহার করার জন্য, আমাদের Ably-এ একটি অ্যাপ্লিকেশন তৈরি করতে হবে।
প্রথমে একটি Ably অ্যাকাউন্ট তৈরি করা যাক।
তারপর, আমরা "লাইভ চ্যাট" নির্বাচন করে একটি অ্যাপ্লিকেশন তৈরি করতে পারি।
এটাই!
আমাদের এখানে এখন আর কিছু করার দরকার নেই। API কী পেতে আমরা পরে Ably ড্যাশবোর্ডে ফিরে যাব।
Upstash Redis
আমরা চ্যাট বার্তাগুলিকে অবিচ্ছিন্নভাবে সংরক্ষণ করতে Upstash Redis ব্যবহার করতে যাচ্ছি৷
এই স্টোরেজ ব্যবহারকারীদের যোগদানের সময় চ্যাট ইতিহাস পুনরুদ্ধার করার অনুমতি দেবে৷
Upstash Redis আমাদের চ্যাট বার্তাগুলিকে একটি সাজানো তালিকা হিসাবে সংরক্ষণ করার অনুমতি দেবে। এটি আমাদের ডাটাবেস থেকে ক্লায়েন্টদের কাছে বার্তাগুলিকে পুনরায় সাজানোর প্রয়োজন ছাড়াই পাঠাতে সাহায্য করবে৷
Upstash Redis ডাটাবেস তৈরি করতে, Upstash Console এ যান, লগ ইন করুন এবং একটি Redis ডাটাবেস তৈরি করুন।
পরিকাঠামো প্রস্তুত। এখন, অ্যাপ্লিকেশনটির আর্কিটেকচারে যাওয়া যাক।
চ্যাট অ্যাপ আর্কিটেকচার
এই চ্যাট অ্যাপ্লিকেশানটির ডিজাইনটি বেশ সহজবোধ্য হতে চলেছে৷
৷
এই ডেমো প্রজেক্টে, আমরা এটি সহজ রাখার জন্য শুধুমাত্র একটি Ably চ্যানেল তৈরি করব। ক্লায়েন্টরা সেই চ্যানেলে যে বার্তা পাঠায় তা প্রকাশ করতে চলেছে। একবার একজন ক্লায়েন্ট একটি বার্তা প্রকাশ করলে, অন্য ক্লায়েন্টরা অবিলম্বে তাদের চ্যানেল সাবস্ক্রিপশনের মাধ্যমে বার্তাটি পাবে৷
৷ক্লায়েন্টদের মধ্যে রিয়েল-টাইম মেসেজিং ছাড়াও, আমাদের বার্তাগুলিকে Upstash Redis-এ সংরক্ষণ করতে হবে। এটি করতে সক্ষম হওয়ার জন্য, Ably চ্যানেলে আরও একজন সাবস্ক্রাইবার থাকবে, যা আমাদের সার্ভার। এই সার্ভারটি ক্লায়েন্টদের পাঠানো বার্তাগুলি গ্রহণ করবে, সেগুলিকে Upstash Redis-এ পাঠাবে এবং সেগুলিকে সেখানে সংরক্ষণ করবে৷
সবশেষে, আমরা সার্ভারের সাহায্যে Upstash Redis-এ সংরক্ষিত চ্যাট ইতিহাস ব্যবহার করব। আমরা সার্ভার সাইডে একটি এন্ডপয়েন্ট "/history" তৈরি করব, যা Redis থেকে চ্যাট হিস্ট্রি ফেরত দেয়। ক্লায়েন্টরা এই এন্ডপয়েন্টে কল করে অ্যাপটি লোড করার সময় চ্যাটের ইতিহাস পুনরুদ্ধার করতে সক্ষম হবে।
আপনি দেখতে পাচ্ছেন, এটি প্রদর্শনের উদ্দেশ্যে একটি সাধারণ চ্যাট অ্যাপ। এই ব্লগ পোস্টে পূর্বে উল্লিখিত Ably-এর অন্যান্য বৈশিষ্ট্যগুলি ব্যবহার করে এই চ্যাট অ্যাপ্লিকেশনটি সংশোধন এবং প্রসারিত করা যেতে পারে৷
চলুন শুরু করা যাক...
ক্লায়েন্ট সাইড
প্রথমত, আমাদের ব্যবহারকারীদের জন্য একটি মৌলিক চ্যাট UI তৈরি করতে হবে। আমরা একটি সহজবোধ্য index.html তৈরি করব এটি করার জন্য ওয়েব পৃষ্ঠা৷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="index.css">
<title>Chat App</title>
</head>
<body>
<div class="container">
<p class="msg">Messages:</p>
<div id="messages" class="messages"></div>
<form id="msgForm" class="msgForm">
<input type="text" placeholder="Send message" class="input" id="inputBox" />
<input type="submit" class="btn" value="Send">
</form>
</div>
<script src="https://cdn.ably.io/lib/ably.min-1.js"></script>
<script src="app.js"></script>
</body>
</html>ব্যবহারকারীদের ব্রাউজারে, আমরা একটি বার্তা টাইপ করার জন্য একটি ইনপুট ক্ষেত্র, বার্তা পাঠানোর জন্য একটি জমা বোতাম এবং পূর্ববর্তী বার্তাগুলি প্রদর্শন করে এমন বার্তা বাক্সগুলি দেখতে পাব৷
এখন, আমরা লিখব “app.js”, যা জাভাস্ক্রিপ্ট ফাইল যা ওয়েব পৃষ্ঠার অংশ হিসাবে কার্যকর করা হবে।
আমরা প্রথমে Ably চ্যানেল তৈরি করতে যাচ্ছি। এটি করার জন্য, আমাদের Ably ড্যাশবোর্ডে ফিরে যেতে হবে এবং "API কী" এর অধীনে একটি নতুন API কী তৈরি করতে হবে৷
আসুন এই API-এর ক্ষমতা হিসাবে "প্রকাশ করুন" এবং "সাবস্ক্রাইব করুন" নির্বাচন করি৷
এখন আমরা Ably ড্যাশবোর্ডে দেওয়া কী ব্যবহার করে জাভাস্ক্রিপ্ট ফাইলে Ably ক্লায়েন্ট তৈরি করতে পারি।
const ably = new Ably.Realtime(‘<Ably API Key>’);সতর্কতা
ক্লায়েন্টদের API কী দেওয়া নিরাপত্তাহীন। Ably "TokenRequest" নামে একটি প্রক্রিয়া প্রদান করে। যেহেতু এটি একটি ডেমো অ্যাপ্লিকেশন, তাই আমরা সরাসরি জাভাস্ক্রিপ্ট ফাইলে API কী দেব। Ably-এর জন্য ক্লায়েন্ট প্রমাণীকরণ সম্পর্কে আরও তথ্যের জন্য, অনুগ্রহ করে Ably-এর টোকেন ডক্স চেক করুন।
এখন, আসুন Ably চ্যানেলটি পাই যার মাধ্যমে ক্লায়েন্ট যোগাযোগ করবে।
const channel = ably.channels.get('chat');আমাদের চ্যানেল তৈরি করার দরকার নেই। একটি চ্যানেল তৈরি হয় যখন কেউ এতে কিছু প্রকাশ করে।
মেসেজিং কার্যকারিতা প্রয়োগ করার আগে একটি পূর্ববর্তী পদক্ষেপ হিসাবে, আমাদের ব্যবহারকারীর কাছ থেকে একটি ব্যবহারকারীর নাম পেতে হবে। আমরা এটিকে খুব সহজ করে দেব কারণ প্রমাণীকরণ এই ব্লগের ফোকাস নয়৷
৷let name = window.prompt("Please enter your name.", "Anonymous");এখন আমরা বার্তা প্রেরণ বাস্তবায়ন করতে পারি৷
const form = document.getElementById('msgForm');
form.addEventListener('submit', (event) => {
event.preventDefault();
const message = document.getElementById('inputBox').value;
if (message.trim() !== '') {
const messageData = {
name: name,
message: message
}
channel.publish('message', messageData);
document.getElementById('inputBox').value = '';
}
});একটি বার্তা পাঠানো খুব সহজ! আমাদের একটি অবজেক্ট তৈরি করতে হবে যাতে একটি ব্যবহারকারীর নাম এবং বার্তা রয়েছে এবং এটিকে অ্যাবলি চ্যানেলে প্রকাশ করতে হবে৷
ব্যবহারকারীদের বার্তা গ্রহণ করতে সক্ষম করার জন্য, আমাদের সেই চ্যানেলে একটি সদস্যতা তৈরি করতে হবে এবং একটি বার্তা বাক্স যুক্ত করতে হবে যাতে ব্যবহারকারীর নাম এবং বার্তা থাকে৷
channel.subscribe('message', (message) => {
console.log("Client received: ", message);
displayMessage(message.data);
});
function displayMessage(message) {
const incomingName = message.name;
const incomingMessage = message.message;
const messageElement = document.createElement('div');
const messageValue = document.createElement('div');
const messageWriter = document.createElement('div');
if(incomingName !== name){
messageElement.classList.add('msgSent');
}
else {
messageElement.classList.add('msgReceived');
}
messageWriter.classList.add('msgWriter');
messageValue.classList.add('msgValue');
messageWriter.textContent = incomingName;
messageValue.textContent = incomingMessage;
messageElement.appendChild(messageWriter);
messageElement.appendChild(messageValue);
const list = document.getElementById('messages');
list.appendChild(messageElement);
}অবশেষে, পৃষ্ঠাটি প্রথম লোড হলে আমরা চ্যাটের ইতিহাস পুনরুদ্ধার করব।
document.addEventListener("DOMContentLoaded", function() {
fetchChatHistory();
});
function fetchChatHistory() {
fetch('/history')
.then((response) => {
if (!response.ok) {
throw new Error('Failed to fetch chat history');
} return response.json();
})
.then((data) => {
const history = data.history;
console.log(history);
if (history && history.length > 0) {
history.forEach((message) => {
displayMessage(JSON.parse(message));
});
}
})
.catch((error) => {
console.error('Error fetching chat history:', error);
});
}সার্ভার সাইড
এই ডেমো অ্যাপ্লিকেশনের সার্ভারটি Ably চ্যানেলে সাবস্ক্রাইব করবে, এটিকে Upstash Redis ডাটাবেসে পুশ করবে এবং ক্লায়েন্টের অনুরোধের সময় Upstash Redis থেকে চ্যাট ইতিহাস ফিরিয়ে দেবে।
আমরা প্রথমে “app.js” ফাইলে সার্ভার কনফিগার করব।
var express = require('express'); var path = require('path');
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'ChatApp' });
});
app.use('/', router);
module.exports = app;এরপর, আমরা আমাদের সার্ভার তৈরি করব “server.js”-এ, Ably চ্যানেলে সাবস্ক্রাইব করব এবং Upstash Redis-এর সাথে কানেক্ট করব।
var app = require('../app');
var http = require('http');
const redis = require('redis');
const Ably = require('ably');
const port = process.env.PORT || '3000';
app.set('port', port);
var server = http.createServer(app);
server.listen(port);
const redisClient = redis.createClient({ url : "<Upstash Redis Endpoint>" });
redisClient.on("error", function(err) {
throw err;
});
redisClient.connect().then(r => {
console.log("Connected to Redis.")
})
// Ably configuration
const ably = new Ably.Realtime({
key: '<Ably API Key>',
});
// Define a channel
const channel = ably.channels.get('chat');পরবর্তী ধাপ হল আপস্ট্যাশ রেডিস ডাটাবেসে আগত বার্তাগুলিকে ঠেলে দেওয়া। আমরা Ably চ্যানেল সাবস্ক্রিপশন দিয়ে এই অপারেশনটি করব৷
৷// Handle incoming messages
channel.subscribe('message', async (message) => {
const convertedMessage = JSON.stringify(message.data);
console.log('Received message:', convertedMessage);
// Store the message in Upstash Redis
await redisClient.LPUSH("AblyChatList",convertedMessage);
});সবশেষে, আমরা “/history” এন্ডপয়েন্ট বাস্তবায়ন করব, যা Upstash Redis থেকে চ্যাটের ইতিহাস পুনরুদ্ধার করে এবং ক্লায়েন্টকে ফেরত দেয়।
// Get chat history endpoint
app.get('/history', async (req, res) => {
// Retrieve chat history from Upstash Redis
const messages = await redisClient.LRANGE("AblyChatList", 0, -1);
messages.reverse();
console.log("history api: ", messages);
res.json({ history: messages });
});অ্যাপ চালান
"server.js" ফাইলের ডিরেক্টরিতে যান এবং রান করুন:
node server.js
localhost:3000 খুলুন আপনার ব্রাউজারে। এটি প্রথমে একটি ব্যবহারকারীর নাম জিজ্ঞাসা করবে৷
একবার আপনি আপনার ব্যবহারকারীর নাম লিখলে, এটি আপনাকে চ্যাট খুলতে অনুমতি দেবে৷
আপনি যদি একটি ট্যাব থেকে বার্তা পাঠান এবং localhost:3000 খুলুন অন্য একটি অ্যাপে একটি ভিন্ন ব্যবহারকারীর নাম ব্যবহার করে, আপনি আগের ট্যাব থেকে পাঠানো বার্তাগুলি দেখতে পারেন৷
আপস্ট্যাশ রেডিসকে ধন্যবাদ, আপনি যখনই চ্যাট অ্যাপ্লিকেশন খুলবেন তখন আপনি চ্যাটের ইতিহাস পুনরুদ্ধার করবেন।
উপসংহার
অ্যাবলি অ্যাপ্লিকেশনগুলির মধ্যে রিয়েল-টাইম যোগাযোগ উন্নত করতে বিভিন্ন বৈশিষ্ট্য সরবরাহ করে। এর শক্তিশালী রিয়েল-টাইম ওয়ার্ল্ডকে অনেকগুলি বিভিন্ন ব্যবহারের ক্ষেত্রে ব্যবহার করা যেতে পারে।
এই ব্লগ পোস্টে, আমরা এর পাব/সাব চ্যানেলগুলি ব্যবহার করে একটি রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করতে Ably ব্যবহার করেছি। এটি করার সময়, আমরা Upstash Redis ডাটাবেসে বার্তা সংরক্ষণ করেছি। এই দুটি টুল এই অ্যাপ্লিকেশনটিকে তৈরি করা সহজ এবং দ্রুত করেছে৷
যেহেতু এই প্রজেক্টটি শুধুমাত্র দেখানোর জন্য ছিল কিভাবে Upstash Redis এবং Ably ব্যবহার করতে হয়, তাই আমরা এর সুযোগ খুব সহজ রেখেছি। আপনি যদি আগ্রহী হন, তাহলে আপনি Ably এবং Upstash Redis-এর বৈশিষ্ট্যগুলিকে কাজে লাগিয়ে শক্তিশালী, স্কেলযোগ্য এবং সুরক্ষিত রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে পারেন৷
