Ably, Upstash Redis এবং Node.js দিয়ে রিয়েল-টাইম চ্যাট অ্যাপ বানান

এই ব্লগ পোস্টে আমরা একটি সিম্পল রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন তৈরি করব যা ব্যবহারকারীদের চ্যাট গ্রুপে যোগ দিয়ে রিয়েল-টাইমে কমিউনিকেট করতে দেবে।

আমরা Ably-এর শক্তি ব্যবহার করব ব্যবহারকারীদের মাঝপথে লো লেটেন্সি রিয়েল-টাইম মেসেজিং-এর জন্য, Upstash Redis মেসেজ পায়ரম্যানেন্টলি সংরক্ষণের জন্য এবং Node.js অ্যাপ্লিকেশন বিল্ড করার জন্য।

Ably

Ably একটি রিয়েল-টাইম এক্সপেরিয়েন্স প্ল্যাটফর্ম যা ব্যবহারকারীদের মাঝপথে টু-ওয়ে কমিউনিকেশন সক্ষম করে।

এই চ্যাট অ্যাপ্লিকেশনে আমরা Ably-এর Pub/Sub চ্যানেল ব্যবহার করব যাতে ব্যবহারকারীরা মেসেজ "পাবলিশ" করে Ably চ্যানেলে পাঠাতে পারে এবং অন্য ব্যবহারকারীরা চ্যানেলে "সাবস্ক্রাইব" করে মেসেজ রিসিভ করতে পারে।

Ably Pub/Sub চ্যানেল(WebSocket-এর উপরে একটি অ্যাবস্ট্রাক্ট লেয়ার যোগ করে) কিছু অতিরিক্ত ফিচার দেয়:

• সাবস্ক্রাইবারের প্রেজেন্স
• অথেন্টিকেশন
• হার্টবিট মেকানিজম
• কিউ
• মেসেজ পাবলিশ হওয়ার ক্রমে ডেলিভারি
• Ably-এ যেকোনো ইভেন্টে ফাংশন আহ্বান করার ইন্টিগ্রেশন
• মেসেজ/প্রেজেন্স/মেটাডেটা Kafka-তে স্ট্রিম করা

আরও জানতে তাদের ওয়েবসাইট ভিজিট করুন।

এই পাওয়ারফুল রিয়েল-টাইম এক্সপেরিয়েন্স হাব ব্যবহার করতে Ably-তে একটি অ্যাপ্লিকেশন তৈরি করতে হবে।

প্রথমে Ably অ্যাকাউন্ট তৈরি করুন। তারপর "Live Chat" সিলেক্ট করে অ্যাপ্লিকেশন তৈরি করুন।

এখন এখানে আর কিছু করার প্রয়োজন নেই। পরে Ably ড্যাশবোর্ডে ফিরে API কি নেব।

Upstash Redis

আমরা চ্যাট মেসেজ পায়রম্যানেন্টলি সংরক্ষণের জন্য Upstash Redis ব্যবহার করব। এই স্টোরেজ ব্যবহারকারীদের জয়েন করার সময় চ্যাট হিস্টরি রিট্রিভ করতে দেবে। Upstash Redis চ্যাট মেসেজ সোর্টেড লিস্ট হিসেবে সংরক্ষণ করতে দেবে, যা ডেটাবেস থেকে ক্লায়েন্টে মেসেজ পাঠানোর সময় রি-সোর্ট করার প্রয়োজন নেই।

Upstash Redis ডেটাবেস তৈরি করতে Upstash Console-এ লগ ইন করুন এবং একটি Redis ডেটাবেস তৈরি করুন।

ইনফ্রাস্ট্রাকচার রেডি। এখন অ্যাপ্লিকেশন আর্কিটেকচারের দিকে যাই।

চ্যাট অ্যাপ আর্কিটেকচার

এই চ্যাট অ্যাপ্লিকেশনের ডিজাইন বেশ স্ট্রেইটফরওয়ার্ড।

এই ডেমো প্রজেক্টে আমরা শুধু একটি Ably চ্যানেল ব্যবহার করব সিম্পলিসিটির জন্য। ক্লায়েন্টরা তাদের পাঠানো মেসেজ সেটি চ্যানেলে পাবলিশ করবে। একবার ক্লায়েন্ট মেসেজ পাবলিশ করলে, অন্যান্য ক্লায়েন্ট তাদের চ্যানেল সাবস্ক্রিপশনের মাধ্যমে তৎক্ষণাৎ মেসেজ পাবে।

রিয়েল-টাইম মেসেজিং ছাড়াও আমাদের Upstash Redis-এ মেসেজ সংরক্ষণ করতে হবে। সেজন্য Ably চ্যানেলে একটি অতিরিক্ত সাবস্ক্রাইবার থাকবে, যেটি আমাদের সার্ভার। এই সার্ভার ক্লায়েন্ট পাঠানো মেসেজ রিসিভ করে, Upstash Redis-এ পাঠিয়ে সেভ করবে।

শেষে, Upstash Redis-এ সংরক্ষিত চ্যাট হিস্টরি সার্ভারের সাহায্যে ব্যবহার করব। সার্ভার সাইডে "/history" এন্ডপয়েন্ট তৈরি করব যা Redis থেকে চ্যাট হিস্টরি রিটার্ন করবে। ক্লায়েন্টরা অ্যাপ লোড করার সময় এই এন্ডপয়েন্ট কল করে চ্যাট হিস্টরি রিট্রিভ করবে।

আপনি দেখতে পাচ্ছেন, এটি Ably এবং Upstash 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 Keys"-এর অধীনে একটি নতুন API কি তৈরি করুন। "Publish" এবং "Subscribe" ক্যাপাবিলিটি সিলেক্ট করুন।

Ably ড্যাশবোর্ডে দেওয়া Key ব্যবহার করে JavaScript ফাইলে Ably ক্লায়েন্ট তৈরি করুন:

const ably = new Ably.Realtime(‘<Ably API Key>’);

সতর্কতা: API কি ক্লায়েন্টে দেয়া ইনসিকিউর। Ably "TokenRequest" মেকানিজম প্রদান করে। ডেমো অ্যাপ হওয়ায় আমরা সরাসরি API কি দিচ্ছি। ক্লায়েন্ট অথেন্টিকেশন সম্পর্কে আরও জানতে 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 = ''; } });

মেসেজ পাঠানো খুব সিম্পল! ইউজারনেম এবং মেসেজ ধারণকারী একটি অবজেক্ট তৈরি করে Ably চ্যানেলে পাবলিশ করুন।

ব্যবহারকারীদের মেসেজ রিসিভ করতে দিতে চ্যানেল সাবস্ক্রিপশন তৈরি করুন এবং ইউজারনেম ও মেসেজ ধারণকারী মেসেজ বক্স যোগ করুন।

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(); 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.") }) const ably = new Ably.Realtime({ key: '<Ably API Key>', }); const channel = ably.channels.get('chat');

এখন ইনকামিং মেসেজ Upstash Redis ডেটাবেসে পুশ করুন। Ably চ্যানেল সাবস্ক্রিপশন দিয়ে এটি করব।

channel.subscribe('message', async (message) => { const convertedMessage = JSON.stringify(message.data); console.log('Received message:', convertedMessage); await redisClient.LPUSH("AblyChatList",convertedMessage); });

শেষে "/history" এন্ডপয়েন্ট বাস্তবায়ন করুন যা Upstash Redis থেকে চ্যাট হিস্টরি রিট্রিভ করে ক্লায়েন্টে রিটার্ন করবে।

app.get('/history', async (req, res) => { 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 খুললে আগের ট্যাবের মেসেজ দেখাবে।

Upstash Redis-এর জন্য আপনি প্রতিবার চ্যাট অ্যাপ্লিকেশন খোলার সময় চ্যাট হিস্টরি রিট্রিভ করবেন।

উপসংহার

Ably রিয়েল-টাইম কমিউনিকেশন উন্নত করার বিভিন্ন ফিচার প্রদান করে। এর পাওয়ারফুল রিয়েল-টাইম ওয়ার্ল্ড টনস ইউজ কেসে কাজে লাগানো যায়।

এই ব্লগ পোস্টে আমরা Ably-এর Pub/Sub চ্যানেল ব্যবহার করে রিয়েল-টাইম চ্যাট অ্যাপ্লিকেশন বিল্ড করেছি। এই কাজে আমরা মেসেজ Upstash Redis ডেটাবেসে সংরক্ষণ করেছি। এই দুটো টুল এই অ্যাপ্লিকেশন বানানো সহজ এবং ফাস্ট করেছে।

যেহেতু এই প্রজেক্ট শুধু Upstash Redis এবং Ably ব্যবহার প্রদর্শনের জন্য, আমরা স্কোপ খুব সিম্পল রেখেছি। আপনি যদি আগ্রহী হন, Ably এবং Upstash Redis-এর ফিচার ব্যবহার করে রোবাস্ট, স্কেলেবল এবং সিকিউর রিয়েল-টাইম অ্যাপ্লিকেশন বিল্ড করতে পারেন।