Ably, Upstash Redis और Node.js के साथ रियल-टाइम चैट ऐप बनाएं

इस ब्लॉग पोस्ट में, हम एक सरल रीयल-टाइम चैट एप्लिकेशन बनाएंगे जो उपयोगकर्ताओं को एक चैट ग्रुप में शामिल होने और रीयल-टाइम में संवाद करने की अनुमति देता है।

हम कम विलंबता के साथ उपयोगकर्ताओं के बीच रीयल-टाइम मैसेजिंग के लिए Ably की शक्ति का लाभ उठाएंगे, संदेशों को लगातार स्टोर करने के लिए Upstash Redis, और एप्लिकेशन बनाने के लिए Node.js का उपयोग करेंगे।

Ably

Ably एक रीयल-टाइम अनुभव प्लेटफॉर्म है जो उपयोगकर्ताओं के बीच दो-तरफा संचार को सक्षम बनाता है।

इस चैट एप्लिकेशन के लिए, हम उपयोगकर्ताओं को Ably चैनल पर संदेश "प्रकाशित" करके संदेश भेजने और चैनल पर भेजे गए संदेशों को "सदस्यता लेकर" प्राप्त करने के लिए Ably के Pub/Sub चैनलों का उपयोग करेंगे।

Ably वेब सॉकेट्स के शीर्ष पर एक अमूर्त परत जोड़कर अतिरिक्त सुविधाओं के साथ ये Pub/Sub चैनल प्रदान करता है। उनमें से कुछ इस प्रकार हैं:

• सब्सक्राइबर्स की उपस्थिति

• प्रमाणीकरण

• हार्टबीट तंत्र

• कतारें

• संदेशों को उनके प्रकाशित क्रम में वितरित करने की क्षमता

• Ably पर किसी भी घटना द्वारा फ़ंक्शन को आमंत्रित करने के लिए इंटीग्रेशन

• संदेशों/उपस्थिति/मेटाडेटा को Kafka पर स्ट्रीम करें

अधिक जानने के लिए उनकी वेबसाइट पर जाएं!

इस शक्तिशाली रीयल-टाइम अनुभव हब का उपयोग करने के लिए, हमें Ably पर एक एप्लिकेशन बनाने की आवश्यकता है।

आइए पहले एक Ably खाता बनाएं।

फिर, हम "Live Chat" का चयन करके एक एप्लिकेशन बना सकते हैं।

बस इतना ही!

अभी हमें यहां कुछ और करने की आवश्यकता नहीं है। हम बाद में API कुंजी प्राप्त करने के लिए Ably डैशबोर्ड पर वापस आएंगे।

Upstash Redis

हम चैट संदेशों को लगातार स्टोर करने के लिए Upstash Redis का उपयोग करने जा रहे हैं।

यह स्टोरेज उपयोगकर्ताओं को शामिल होने पर चैट इतिहास पुनर्प्राप्त करने की अनुमति देगा।

Upstash Redis हमें चैट संदेशों को एक सॉर्टेड सूची के रूप में स्टोर करने की भी अनुमति देगा। यह हमें डेटाबेस से क्लाइंट्स को संदेश भेजने में मदद करेगा बिना उन्हें पुन: क्रमबद्ध करने की आवश्यकता के।

Upstash Redis डेटाबेस बनाने के लिए, Upstash कंसोल पर जाएं, लॉग इन करें, और एक 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 Keys" के तहत एक नई API कुंजी बनाने की आवश्यकता है।

आइए इस API की क्षमताओं के रूप में "Publish" और "Subscribe" का चयन करें।

अब हम 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 = '';
  }
});

संदेश भेजना बहुत सरल है! हमें एक ऑब्जेक्ट बनाने की आवश्यकता है जिसमें उपयोगकर्ता नाम और संदेश हो और इसे 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();
/* 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 कॉन्फिगरेशन
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);
  // Upstash Redis में संदेश स्टोर करें
  await redisClient.LPUSH("AblyChatList",convertedMessage);
});

अंत में, हम "/history" एंडपॉइंट को लागू करेंगे, जो Upstash Redis से चैट इतिहास पुनर्प्राप्त करता है और इसे क्लाइंट को लौटाता है।

// चैट इतिहास एंडपॉइंट प्राप्त करें
app.get('/history', async (req, res) => {
  // 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 को एक अलग उपयोगकर्ता नाम का उपयोग करके दूसरे ऐप में खोलते हैं, तो आप पिछले टैब से भेजे गए संदेशों को देख सकते हैं।

Upstash Redis की बदौलत, आप हर बार चैट एप्लिकेशन खोलने पर चैट इतिहास पुनर्प्राप्त करेंगे।

निष्कर्ष

Ably एप्लिकेशन के बीच रीयल-टाइम संचार को बढ़ाने के लिए विभिन्न सुविधाएँ प्रदान करता है। इसकी शक्तिशाली रीयल-टाइम दुनिया का उपयोग विभिन्न उपयोग के मामलों के लिए किया जा सकता है।

इस ब्लॉग पोस्ट में, हमने Ably के Pub/Sub चैनलों का उपयोग करके एक रीयल-टाइम चैट एप्लिकेशन बनाया। ऐसा करते समय, हमने संदेशों को Upstash Redis डेटाबेस में संग्रहीत किया। इन दो उपकरणों ने इस एप्लिकेशन को बनाना आसान और तेज़ बना दिया।

चूंकि यह प्रोजेक्ट सिर्फ यह दिखाने के लिए था कि Upstash Redis और Ably का उपयोग कैसे किया जाए, हमने इसका दायरा बहुत सरल रखा। यदि आप रुचि रखते हैं, तो आप Ably और Upstash Redis की सुविधाओं का उपयोग करके मजबूत, स्केलेबल और सुरक्षित रीयल-टाइम एप्लिकेशन बना सकते हैं।