वेब एप्लिकेशन में नेविगेट करते समय रीयल-टाइम सूचनाएं प्राप्त करना बहुत आम है। सूचनाएं चैट बॉट, अलर्ट सिस्टम से आ सकती हैं, या किसी घटना से ट्रिगर हो सकती हैं जिसे ऐप एक या अधिक उपयोगकर्ताओं को पुश करता है। सूचनाओं का स्रोत चाहे जो भी हो, डेवलपर्स सूचना सेवाएं बनाने के लिए तेजी से Redis का उपयोग कर रहे हैं।
आधुनिक एप्लिकेशन में Redis की भूमिका
माइक्रोसर्विस आर्किटेक्चर द्वारा संचालित आधुनिक एप्लिकेशन में, Redis का उपयोग अक्सर एक साधारण कैश और प्राथमिक डेटाबेस के रूप में किया जाता है। लेकिन इसका उपयोग Redis Streams द्वारा संचालित एक स्थायी मैसेजिंग लेयर का उपयोग करके सेवाओं के बीच संचार परत के रूप में भी किया जाता है, जो इसके प्रसिद्ध Pub/Sub (प्रकाशन/सदस्यता) कमांड का उपयोग करने वाला एक हल्का इवेंटिंग सिस्टम है।
इस ब्लॉग पोस्ट में, हम आपको दिखाएंगे कि Redis Pub/Sub का उपयोग करके वेब एप्लिकेशन को संदेश भेजने वाली एक छोटी सूचना सेवा बनाना कितना आसान है, जिसे Vue.js, Node.js और WebSockets के साथ विकसित किया गया है।
पूर्वापेक्षाएँ
यह डेमो सेवा उपयोग करती है:
- Docker
- Redis 5.0.x या बाद का संस्करण (यह डेमो Redis Docker कंटेनर का उपयोग करता है)
- Node.js 10.x, Node पैकेज मैनेजर (npm) के साथ
- nodemon, एक सरल टूल जो विकास के दौरान आपके एप्लिकेशन को स्वचालित रूप से पुनरारंभ करता है
- Vue CLI
Redis सर्वर शुरू करना
यदि आपके पास पहले से कोई Redis इंस्टेंस चल रहा नहीं है, तो आप इसे Docker का उपयोग करके शुरू कर सकते हैं; एक टर्मिनल में, यह कमांड चलाएं:
> docker run -it --rm --name redis-server -p 6379:6379 redis
Redis अब चालू और चल रहा होना चाहिए और कनेक्शन स्वीकार करने के लिए तैयार होना चाहिए।
Node.js के साथ WebSocket सर्वर बनाना
उचित संरचना के साथ प्रोजेक्ट को कॉन्फ़िगर करने के लिए, एक टर्मिनल खोलें और निम्न कमांड दर्ज करें:
npm का उपयोग करके एक नया Node.js प्रोजेक्ट बनाएं (-y पैरामीटर सभी मानों को डिफ़ॉल्ट पर सेट कर देगा):
ऊपर दिया गया अंतिम कमांड आपके प्रोजेक्ट में WebSocket और Redis निर्भरताएं जोड़ता है। अब आप कुछ कोड लिखने के लिए तैयार हैं!
WebSocket सर्वर लिखना
Node.js के लिए अपना पसंदीदा कोड एडिटर खोलें (मैं Visual Studio Code का उपयोग करता हूं) और वर्तमान निर्देशिका को खोलने के लिए बस code . दर्ज करें। अपने एडिटर में, server.js नामक एक नई फ़ाइल बनाएं।
यह सरल Node.js प्रोग्राम प्रदर्शन तक सीमित है और इस पर केंद्रित है:
- Redis से कनेक्ट करना (लाइन 9)
- app:notifications चैनल से संदेशों की सदस्यता लेना (लाइन 10)
- WebSocket सर्वर शुरू करना (लाइन 13)
- उपयोगकर्ता क्लाइंट कनेक्शन पंजीकृत करना (लाइन 16)
- Redis सदस्यता घटनाओं को सुनना (लाइन 19)
- और सभी WebSocket क्लाइंट्स को संदेश भेजना (लाइन 21)।
लाइन 5 और 6 का उपयोग केवल Redis सर्वर स्थान और Web Socket सर्वर के लिए उपयोग किए जाने वाले पोर्ट को कॉन्फ़िगर करने के लिए किया जाता है। जैसा कि आप देख सकते हैं, यह काफी सरल है।
WebSocket सर्वर चलाना
यदि आपने अभी तक nodemon इंस्टॉल नहीं किया है, तो इसे अभी इंस्टॉल करें। फिर निम्न कमांड का उपयोग करके WebSocket सर्वर शुरू करें:
आइए अब फ्रंटएंड बनाएं जो सूचनाएं प्राप्त करेगा और उन्हें उपयोगकर्ता को प्रिंट करेगा।
Vue.js के साथ फ्रंटएंड बनाना
एक नया टर्मिनल खोलें और notifications निर्देशिका से निम्न कमांड चलाएं:
यदि आपने पहले से Vue CLI टूल इंस्टॉल नहीं किया है, तो कमांड npm install -g @vue/cli का उपयोग करके इसे अभी करें।
यह कमांड एक नया Vue प्रोजेक्ट बनाता है जिसे निष्पादित और विस्तारित करने के लिए तैयार है।
इस प्रदर्शन के लिए इंस्टॉल करने के लिए एक अंतिम पैकेज BootstrapVue है, जो लोकप्रिय Bootstrap फ्रेमवर्क से CSS लाइब्रेरी और घटकों का उपयोग करना आसान बनाता है।
अपने पसंदीदा कोड एडिटर में web-client निर्देशिका खोलें, फिर नव निर्मित Vue एप्लिकेशन शुरू करें:
अंतिम कमांड Vue डेवलपमेंट सर्वर शुरू करता है जो पेज सर्व करेगा और जब आप उन्हें बदलते हैं तो पेज को स्वचालित रूप से रीलोड भी करता है।
अपना ब्राउज़र खोलें, और https://localhost:8080 पर जाएं; जहां आपको डिफ़ॉल्ट Vue स्वागत पृष्ठ दिखाई देना चाहिए:
फ्रंटएंड में WebSocket जोड़ना
Vue फ्रेमवर्क काफी सरल है, और इस पोस्ट के लिए हम कोड को यथासंभव सरल रखेंगे। तो आइए जल्दी से निर्देशिका संरचना देखें:
├── README.md ├── babel.config.js ├── node_modules ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html └── src ├── App.vue ├── assets │ └── logo.png ├── components │ └── HelloWorld.vue └── मुख्य.js
रूट स्तर पर फ़ाइलें (babel.config.js, package.json, package-lock.json, node_modules) प्रोजेक्ट को कॉन्फ़िगर करने के लिए उपयोग की जाती हैं। कम से कम अभी के लिए सबसे दिलचस्प हिस्सा src निर्देशिका में स्थित है:
- main.js फ़ाइल एप्लिकेशन की मुख्य JavaScript फ़ाइल है, जो सभी सामान्य तत्वों को लोड करेगी और App.vue मुख्य स्क्रीन को कॉल करेगी। हम बाद में इसमें Bootstrap सपोर्ट जोड़ने के लिए इसे संशोधित करेंगे।
- App.vue एक फ़ाइल है जिसमें किसी विशिष्ट पेज या टेम्पलेट के लिए HTML, CSS, और JavaScript होता है। एप्लिकेशन के प्रवेश बिंदु के रूप में, यह भाग डिफ़ॉल्ट रूप से सभी स्क्रीन द्वारा साझा किया जाता है, इसलिए इस फ़ाइल में अधिसूचना-क्लाइंट टुकड़ा लिखना एक अच्छी जगह है।
public/index.html वह स्थिर प्रवेश बिंदु है जहां से DOM लोड होगा। यदि आप इसे देखते हैं तो आपको एक <div id=”app”> दिखाई देगा, जिसका उपयोग Vue एप्लिकेशन को लोड करने के लिए किया जाता है।
यह प्रदर्शन काफी सरल है, और आपको केवल दो फ़ाइलों को संशोधित करना होगा: App.vue और main.js फ़ाइलें। एक वास्तविक एप्लिकेशन में, आप शायद एक Vue.js घटक बनाएंगे जिसे विभिन्न स्थानों पर पुन: उपयोग किया जा सके।
WebSocket संदेश दिखाने के लिए App.vue फ़ाइल अपडेट करना
अपने एडिटर में App.vue फ़ाइल खोलें और नीचे दी गई जानकारी जोड़ें। पेज के नीचे, </div> टैग से ठीक पहले, निम्न HTML ब्लॉक जोड़ें:
{{message}} नोटेशन का उपयोग करके, आप Vue को संदेश वेरिएबल की सामग्री प्रिंट करने के लिए कह रहे हैं, जिसे आप अगले ब्लॉक में परिभाषित करेंगे।
<script> में, सामग्री को इससे बदलें:
कोड की ये कुछ लाइनें उपयोग की जाती हैं:
- WebSocket सर्वर से कनेक्ट करने के लिए (लाइन 13)
- सर्वर से संदेशों का उपभोग करें और उन्हें स्थानीय message वेरिएबल में भेजें (लाइन 13-17)
यदि आप ध्यान से देखें कि क्या बदला गया है, तो आप देख सकते हैं कि आपने जोड़ा है:
- एक data() फ़ंक्शन जो Vue घटक को इंगित करता है कि आप स्थानीय वेरिएबल परिभाषित कर रहे हैं जिन्हें स्क्रीन पर बांधा जा सकता है (लाइन 6-10)
- एक created() फ़ंक्शन जो Vue घटक द्वारा स्वचालित रूप से कॉल किया जाता है जब यह प्रारंभ होता है
Redis से अपने Vue एप्लिकेशन में संदेश भेजना
WebSocket सर्वर और Vue फ्रंटएंड अब आपके द्वारा जोड़ी गई JavaScript की कुछ लाइनों के कारण चल रहे और जुड़े हुए होने चाहिए। इसे टेस्ट करने का समय आ गया है!
Redis CLI या RedisInsight का उपयोग करके, app:notifications चैनल पर कुछ संदेश प्रकाशित करें। उदाहरण के लिए, यदि आपने Docker का उपयोग करके Redis शुरू किया है, तो आप निम्न कमांड का उपयोग करके इससे कनेक्ट कर सकते हैं और संदेश प्रकाशित करना शुरू कर सकते हैं:
आपको अपने ब्राउज़र में एप्लिकेशन के नीचे संदेश दिखाई देना चाहिए:
जैसा कि आप देख सकते हैं, WebSocket का उपयोग करके अपनी वेब फ्रंटएंड पर रीयल-टाइम में सामग्री पुश करना काफी आसान है। तो अब आइए डिज़ाइन में सुधार करें और Bootstrap का उपयोग करके अधिक उपयोगकर्ता-अनुकूल इंटरफ़ेस जोड़ें।
Bootstrap के साथ अलर्ट ब्लॉक बनाना
इस अनुभाग में, हम आपको दिखाएंगे कि कैसे एक Bootstrap अलर्ट घटक का उपयोग किया जाए, जो एक नया संदेश प्राप्त होने पर दिखाई देता है और एक साधारण काउंटडाउन का उपयोग करके कुछ सेकंड के बाद स्वचालित रूप से गायब हो जाता है।
Main.js फ़ाइल
main.js फ़ाइल खोलें और अंतिम आयात के बाद निम्न पंक्तियां जोड़ें:
ये चार पंक्तियाँ आपके Vue एप्लिकेशन में Bootstrap घटकों को आयात और पंजीकृत करती हैं।
App.js फ़ाइल
App.vue फ़ाइल में, आपके द्वारा पहले जोड़े गए कोड को (दोनों <hr/> टैग के बीच की हर चीज़ और टैग स्वयं) निम्न से बदलें:
यह घटक कई विशेषताओं का उपयोग करता है:
- id="notification" वह तत्व आईडी है जिसका उपयोग JavaScript या CSS कोड में तत्व को संदर्भित करने के लिए किया जाता है
- :show="dismissCountDown" इंगित करता है कि घटक केवल तभी दृश्यमान होता है जब dismissCountDown वेरिएबल नल या 0 नहीं होता
- dismissible अलर्ट में एक छोटा आइकन जोड़ता है ताकि उपयोगकर्ता इसे मैन्युअल रूप से बंद कर सके
- @dismissed="dismissCountDown=0" दर्शाता है कि अलर्ट बॉक्स बंद हो जाएगा जब dismissCountDown का मान 0 के बराबर होगा
- @dismiss-count-down="countDownChanged" काउंटडाउन विधि है
आइए अलर्ट घटक द्वारा उपयोग किए जाने वाले वेरिएबल और विधियों को परिभाषित करने के लिए JavaScript की कुछ पंक्तियां जोड़ें:
इस अनुभाग में आपने:
- dismissSecs और dismissCountDown वेरिएबल को data() विधि में जोड़ा (लाइन 4-5) जो अलर्ट को छिपाने से पहले दिखाने वाले टाइमर को नियंत्रित करने के लिए उपयोग किए जाते हैं
- अलर्ट घटक को दिखाने और छिपाने के तरीके बनाए (लाइन 10-26)
- नया संदेश प्राप्त होने पर showAlert() विधि को कॉल किया (लाइन 13)
आइए इसे आजमाएं!
redis-cli या Redis Insight पर वापस जाएं और app:notifications चैनल पर नए संदेश पोस्ट करें।
जैसा कि आप देख सकते हैं, अपने एप्लिकेशन के लिए एक शक्तिशाली सूचना सेवा बनाने के लिए Redis का उपयोग करना आसान है। यह नमूना काफी बुनियादी है, एक चैनल और सर्वर का उपयोग करके सभी क्लाइंट्स को प्रसारित करता है।
लक्ष्य वास्तव में WebSocket और Redis Pub/Sub के साथ शुरुआत करने का एक आसान तरीका प्रदान करना था ताकि Redis से वेब एप्लिकेशन पर संदेश पुश किए जा सकें। विभिन्न चैनलों का उपयोग करके विशिष्ट क्लाइंट्स को संदेश वितरित करने के कई विकल्प हैं, और एप्लिकेशन को स्केल और सुरक्षित करने के लिए।
आप WebSocket सर्वर का उपयोग दूसरी दिशा में भी कर सकते हैं, संदेशों का उपभोग करने के साथ-साथ क्लाइंट्स को संदेश पुश करने के लिए। लेकिन यह एक बड़ा विषय है दूसरे ब्लॉग पोस्ट के लिए। वास्तव में, अधिक ब्लॉग पोस्ट के लिए बने रहें कि कैसे आप Redis Gears का उपयोग करके Redis डेटाबेस में सीधे घटनाओं को कैप्चर कर सकते हैं और विभिन्न क्लाइंट्स को कुछ घटनाओं को पुश कर सकते हैं।
अधिक जानकारी के लिए, इन संसाधनों को देखें:
- Redis Microservices for Dummies (मुफ्त ईबुक)
- Redis Streams का परिचय (Redis दस्तावेज़ीकरण)
- Redis Pub/Sub (Redis दस्तावेज़ीकरण)
- Redis University में मुफ्त ऑनलाइन कोर्स लें
- Redis Enterprise Cloud देखें
