<पी> इस ब्लॉग पोस्ट में, हम एक सरल रीयल-टाइम चैट एप्लिकेशन बनाएंगे जो उपयोगकर्ताओं को चैट समूह में शामिल होने और रीयल-टाइम में संचार करने की अनुमति देता है। <पी> हम कम विलंबता वाले उपयोगकर्ताओं के बीच वास्तविक समय में संदेश भेजने के लिए एबली की शक्ति का लाभ उठाएंगे, संदेशों को लगातार संग्रहीत करने के लिए अपस्टैश रेडिस और एप्लिकेशन के निर्माण के लिए Node.js की शक्ति का लाभ उठाएंगे। कुशल
<पी> एबली एक वास्तविक समय अनुभव मंच है जो उपयोगकर्ताओं के बीच दो-तरफा संचार सक्षम बनाता है। <पी> इस चैट एप्लिकेशन के लिए, हम एबली के पब/सब चैनलों का उपयोग करेंगे ताकि उपयोगकर्ता एबली चैनल पर संदेशों को "प्रकाशित" करके संदेश भेज सकें और उपयोगकर्ताओं को "सब्सक्राइब" करके चैनल पर भेजे गए संदेश प्राप्त कर सकें। <पी> एबली अतिरिक्त सुविधाओं के साथ वेब सॉकेट के शीर्ष पर एक अमूर्त परत जोड़कर इन पब/उप चैनलों को प्रदान करता है। उनमें से कुछ इस प्रकार हैं: - <पी> ग्राहकों की उपस्थिति
- <पी> प्रमाणीकरण
- <पी> दिल की धड़कन तंत्र
- <पी> कतारें
- <पी> संदेशों को उनके प्रकाशित होने के क्रम में वितरित करने की क्षमता
- <पी> एबली पर किसी भी घटना द्वारा कार्यों को शुरू करने के लिए एकीकरण
- <पी> संदेशों/उपस्थिति/मेटाडेटा को काफ्का पर स्ट्रीम करें
<पी> अधिक जानने के लिए आप उनकी वेबसाइट पर जा सकते हैं! <पी> इस शक्तिशाली वास्तविक समय अनुभव केंद्र का उपयोग करने के लिए, हमें एबली पर एक एप्लिकेशन बनाने की आवश्यकता है। <पी> आइए पहले एक एबली अकाउंट बनाएं। <पी> फिर, हम "लाइव चैट" का चयन करके एक एप्लिकेशन बना सकते हैं। <पी> 
<पी> बस इतना ही! <पी> अभी हमें यहां कुछ और करने की जरूरत नहीं है. एपीआई कुंजी प्राप्त करने के लिए हम बाद में एबली डैशबोर्ड पर लौटेंगे। अपस्टैश रेडिस
<पी> हम चैट संदेशों को लगातार संग्रहीत करने के लिए अपस्टैश रेडिस का उपयोग करने जा रहे हैं। <पी> यह स्टोरेज उपयोगकर्ताओं को शामिल होने पर चैट इतिहास को पुनः प्राप्त करने की अनुमति देगा। <पी> अपस्टैश रेडिस हमें चैट संदेशों को क्रमबद्ध सूची के रूप में संग्रहीत करने की भी अनुमति देगा। इससे हमें संदेशों को दोबारा क्रमबद्ध किए बिना डेटाबेस से ग्राहकों तक भेजने में मदद मिलेगी। <पी> अपस्टैश रेडिस डेटाबेस बनाने के लिए, अपस्टैश कंसोल पर जाएं, लॉग इन करें और रेडिस डेटाबेस बनाएं। <पी> 
<पी> बुनियादी ढांचा तैयार है. अब, एप्लिकेशन के आर्किटेक्चर पर चलते हैं। चैट ऐप आर्किटेक्चर
<पी> इस चैट एप्लिकेशन का डिज़ाइन काफी सीधा होने वाला है। <पी> 
<पी> इस डेमो प्रोजेक्ट में, हम इसे सरल बनाए रखने के लिए केवल एक एबली चैनल बनाएंगे। ग्राहक उस चैनल पर भेजे गए संदेशों को प्रकाशित करेंगे। एक बार जब कोई ग्राहक एक संदेश प्रकाशित करता है, तो अन्य ग्राहक तुरंत अपने चैनल सदस्यता के माध्यम से संदेश प्राप्त करेंगे। <पी> ग्राहकों के बीच वास्तविक समय पर संदेश भेजने के अलावा, हमें संदेशों को अपस्टैश रेडिस में संग्रहीत करने की आवश्यकता है। ऐसा करने में सक्षम होने के लिए, एबली चैनल के पास एक और ग्राहक होगा, जो हमारा सर्वर है। यह सर्वर क्लाइंट द्वारा भेजे गए संदेशों को प्राप्त करेगा, उन्हें अपस्टैश रेडिस पर भेजेगा और उन्हें वहां संग्रहीत करेगा। <पी> अंत में, हम सर्वर की मदद से अपस्टैश रेडिस में संग्रहीत चैट इतिहास का उपयोग करेंगे। हम सर्वर साइड पर एक एंडपॉइंट "/इतिहास" बनाएंगे, जो रेडिस से चैट इतिहास लौटाता है। ग्राहक इस एंडपॉइंट पर कॉल करके ऐप लोड करते समय चैट इतिहास को पुनः प्राप्त करने में सक्षम होंगे। <पी> जैसा कि आप देख सकते हैं, यह प्रदर्शन उद्देश्यों के लिए एक सरल चैट ऐप है। इस ब्लॉग पोस्ट में पहले उल्लिखित एबली की अन्य सुविधाओं का उपयोग करके इस चैट एप्लिकेशन को संशोधित और विस्तारित किया जा सकता है। <पी> आइए शुरू करें... ग्राहक पक्ष
<पी> सबसे पहले, हमें उपयोगकर्ताओं के लिए एक बुनियादी चैट यूआई बनाने की आवश्यकता है। हम एक सीधा 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 क्लाइंट बना सकते हैं। const ably = new Ably.Realtime(‘<Ably API Key>’);
<पी> चेतावनी <पी> ग्राहकों को एपीआई कुंजी देना असुरक्षित है। एबली "TokenRequest" नामक एक तंत्र प्रदान करता है। चूंकि यह एक डेमो एप्लिकेशन है, हम एपीआई कुंजी सीधे जावास्क्रिप्ट फ़ाइल में देंगे। एबली के लिए क्लाइंट प्रमाणीकरण के बारे में अधिक जानकारी के लिए, कृपया एबली के टोकन दस्तावेज़ देखें। <पी> अब, आइए एबली चैनल प्राप्त करें जिसके माध्यम से ग्राहक संवाद करेगा। 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);
});
}
सर्वर साइड
<पी> इस डेमो एप्लिकेशन में सर्वर एबली चैनल की सदस्यता लेगा, इसे अपस्टैश रेडिस डेटाबेस पर पुश करेगा, और क्लाइंट के अनुरोध पर अपस्टैश रेडिस से चैट इतिहास लौटाएगा। <पी> हम पहले सर्वर को "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" में अपना सर्वर बनाएंगे, एबली चैनल की सदस्यता लेंगे और अपस्टैश रेडिस से जुड़ेंगे। 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');
<पी> अगला कदम आने वाले संदेशों को अपस्टैश रेडिस डेटाबेस पर भेजना है। हम यह ऑपरेशन एबली चैनल सब्सक्रिप्शन के साथ करेंगे। // 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);
});
<पी> अंत में, हम "/इतिहास" समापन बिंदु को लागू करेंगे, जो अपस्टैश रेडिस से चैट इतिहास को पुनः प्राप्त करता है और इसे क्लाइंट को लौटाता है। // 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 खोलते हैं भिन्न उपयोगकर्ता नाम का उपयोग करके किसी अन्य ऐप में, आप पिछले टैब से भेजे गए संदेशों को देख सकते हैं। <पी> 
<पी> अपस्टैश रेडिस के लिए धन्यवाद, जब भी आप चैट एप्लिकेशन खोलेंगे तो आपको चैट इतिहास पुनः प्राप्त होगा। निष्कर्ष
<पी> एबली अनुप्रयोगों के बीच वास्तविक समय संचार को बढ़ाने के लिए विभिन्न सुविधाएँ प्रदान करता है। इसकी शक्तिशाली वास्तविक समय की दुनिया का उपयोग विभिन्न उपयोग के मामलों के लिए किया जा सकता है। <पी> इस ब्लॉग पोस्ट में, हमने एबली का उपयोग उसके पब/सब चैनलों का उपयोग करके एक वास्तविक समय चैट एप्लिकेशन बनाने के लिए किया। ऐसा करते समय, हमने संदेशों को अपस्टैश रेडिस डेटाबेस में संग्रहीत किया। इन दो टूल ने इस एप्लिकेशन को बनाना आसान और तेज़ बना दिया। <पी> चूँकि यह प्रोजेक्ट केवल यह प्रदर्शित करने के लिए था कि अपस्टैश रेडिस और एबली का उपयोग कैसे किया जाए, इसलिए हमने इसका दायरा बहुत सरल रखा। यदि आप रुचि रखते हैं, तो आप एबली और अपस्टैश रेडिस की सुविधाओं का उपयोग करके मजबूत, स्केलेबल और सुरक्षित वास्तविक समय एप्लिकेशन बना सकते हैं।
