Redis, Websockets, और Vue.js . के साथ सूचना सेवाएँ कैसे बनाएँ?

वेब एप्लिकेशन में नेविगेट करते समय रीयल-टाइम नोटिफिकेशन प्राप्त करना बहुत आम है। सूचनाएं एक चैट बॉट, एक चेतावनी प्रणाली से आ सकती हैं, या किसी ऐसी घटना से ट्रिगर हो सकती हैं जिसे ऐप एक या अधिक उपयोगकर्ताओं को धक्का देता है। सूचनाओं का स्रोत चाहे जो भी हो, डेवलपर्स अधिसूचना सेवाओं को बनाने के लिए रेडिस का तेजी से उपयोग कर रहे हैं।

माइक्रोसर्विस आर्किटेक्चर द्वारा संचालित आधुनिक अनुप्रयोगों में, रेडिस का उपयोग अक्सर एक साधारण कैश और प्राथमिक डेटाबेस के रूप में किया जाता है। लेकिन इसका उपयोग सेवाओं के बीच संचार परत के रूप में भी किया जाता है, जो रेडिस स्ट्रीम द्वारा संचालित एक सतत संदेश परत का उपयोग करता है, जो एक हल्के इवेंट सिस्टम है जो इसके प्रसिद्ध पब/सब (प्रकाशित/सदस्यता लें) कमांड का उपयोग करता है।

इस ब्लॉग पोस्ट में, हम आपको दिखाएंगे कि Vue.js, Node.js और WebSockets के साथ विकसित वेब एप्लिकेशन पर संदेश भेजने के लिए Redis Pub/Sub का उपयोग करके एक छोटी अधिसूचना सेवा बनाना कितना आसान है।

आवश्यकताएं

यह डेमो सेवा उपयोग करती है:

• डॉकर
• Redis 5.0.x या बाद का  (यह डेमो Redis Docker कंटेनर का उपयोग करता है)
• नोड पैकेज मैनेजर (एनपीएम) के साथ Node.js 10.x
• नोडेमन, एक सरल टूल जो विकास के दौरान आपके एप्लिकेशन को स्वचालित रूप से पुनरारंभ करता है
• व्यू सीएलआई

Redis सर्वर प्रारंभ करना

यदि आपके पास पहले से कोई रेडिस इंस्टेंस नहीं चल रहा है, तो आप इसे डॉकर का उपयोग करके शुरू कर सकते हैं; एक टर्मिनल में, यह कमांड चलाएँ:

> docker run -it --rm --name redis-server -p 6379:6379 redis

Redis को अब चालू होना चाहिए और कनेक्शन स्वीकार करने के लिए तैयार होना चाहिए।

Node.js के साथ WebSocket सर्वर बनाना

प्रोजेक्ट को उचित संरचना के साथ कॉन्फ़िगर करने के लिए, एक टर्मिनल खोलें और निम्नलिखित कमांड दर्ज करें:

npm का उपयोग करके एक नया Node.js प्रोजेक्ट बनाएं (-y पैरामीटर सभी मानों को डिफ़ॉल्ट पर सेट कर देगा) :

ऊपर दिया गया अंतिम आदेश आपके प्रोजेक्ट में WebSocket और Redis निर्भरता को जोड़ता है। अब आप कुछ कोड लिखने के लिए तैयार हैं!

वेबसॉकेट सर्वर लिखना

Node.js के लिए अपना पसंदीदा कोड संपादक खोलें (मैं विजुअल स्टूडियो कोड का उपयोग करता हूं) और बस कोड “code ।” दर्ज करें। वर्तमान निर्देशिका खोलने के लिए। अपने संपादक में, server.js called नामक एक नई फ़ाइल बनाएँ ।

यह सरल Node.js कार्यक्रम प्रदर्शन तक ही सीमित है और इस पर ध्यान केंद्रित करता है:

• Redis से कनेक्ट हो रहा है (लाइन 9)
• “ऐप:नोटिफिकेशन” से संदेशों की सदस्यता लेना चैनल (पंक्ति 10)
• वेबसॉकेट सर्वर शुरू करना (लाइन 13)
• उपयोगकर्ता क्लाइंट कनेक्शन पंजीकृत करना (पंक्ति 16)
• Redis सदस्यता की घटनाओं को सुनना (पंक्ति 19)
• और सभी WebSocket क्लाइंट (21) को संदेश भेजना।

लाइन 5 और 6 का उपयोग केवल रेडिस सर्वर स्थान और पोर्ट को वेब सॉकेट सर्वर के लिए उपयोग करने के लिए कॉन्फ़िगर करने के लिए किया जाता है। जैसा कि आप देख सकते हैं यह बहुत आसान है।

वेबसॉकेट सर्वर चलाना

यदि आपने अभी तक नोडमोन स्थापित नहीं किया है , इसे अभी स्थापित करें। फिर निम्न आदेश का उपयोग करके वेबसॉकेट सर्वर प्रारंभ करें:

आइए अब एक फ्रंटएंड बनाएं जो सूचनाएं प्राप्त करेगा और उन्हें उपयोगकर्ता को प्रिंट करेगा।

Vue.js के साथ फ़्रंटएंड बनाना

एक नया टर्मिनल खोलें और सूचनाओं . से निम्न कमांड चलाएँ निर्देशिका:

यदि आपने पहले से Vue CLI टूल पहले से इंस्टॉल नहीं किया है, तो अब npm install -g @vue/cli कमांड का उपयोग करके ऐसा करें। ।

यह आदेश एक नया Vue प्रोजेक्ट बनाता है जो निष्पादित और विस्तारित होने के लिए तैयार है।

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

अपने पसंदीदा कोड संपादक में वेब-क्लाइंट निर्देशिका खोलें, फिर नव निर्मित Vue एप्लिकेशन प्रारंभ करें:

अंतिम कमांड Vue डेवलपमेंट सर्वर को शुरू करता है जो पेजों की सेवा करेगा और जब आप उन्हें बदलते हैं तो स्वचालित रूप से पेजों को फिर से लोड करता है।

अपना ब्राउज़र खोलें, और https://localhost:8080 पर जाएं; जहां आपको डिफ़ॉल्ट Vue स्वागत पृष्ठ देखना चाहिए:

वेबसॉकेट को फ़्रंटएंड में जोड़ना

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
    └── main.js

रूट स्तर पर फ़ाइलें (babel.config.js , package.json , package-lock.json , <चिह्न>नोड_मॉड्यूल ) प्रोजेक्ट को कॉन्फ़िगर करने के लिए उपयोग किया जाता है। सबसे दिलचस्प हिस्सा, कम से कम अभी के लिए, src . में स्थित है निर्देशिका:

• द main.js फ़ाइल एप्लिकेशन की मुख्य जावास्क्रिप्ट फ़ाइल है, जो सभी सामान्य तत्वों को लोड करेगी और App.vue को कॉल करेगी। मुख्य स्क्रीन। बूटस्ट्रैप समर्थन जोड़ने के लिए हम इसे बाद में संशोधित करेंगे।
• द App.vue एक फ़ाइल है जिसमें किसी विशिष्ट पृष्ठ या टेम्पलेट के लिए HTML, CSS और JavaScript शामिल है। एप्लिकेशन के प्रवेश बिंदु के रूप में, यह हिस्सा डिफ़ॉल्ट रूप से सभी स्क्रीन द्वारा साझा किया जाता है, इसलिए इस फ़ाइल में अधिसूचना-क्लाइंट टुकड़ा लिखने के लिए यह एक अच्छी जगह है।

public/index.html स्थिर प्रवेश बिंदु है जहाँ से DOM लोड किया जाएगा। अगर आप इसे देखेंगे तो आपको एक

{{message}} संकेतन का उपयोग करके, आप संदेश चर की सामग्री को प्रिंट करने के लिए Vue को संकेत दे रहे हैं, जिसे आप अगले ब्लॉक में परिभाषित करेंगे।