रिएक्ट और सॉकेट.आईओ का उपयोग करते हुए रीयलटाइम अधिसूचना ऐप

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

रीयलटाइम सूचनाएं उपयोगकर्ताओं को परिवर्तनों की मैन्युअल रूप से जांच करने की आवश्यकता के बजाय तुरंत अपडेट प्राप्त करने की अनुमति देती हैं। इस व्यापक ट्यूटोरियल में, आप सीखेंगे React और Socket.io का उपयोग करके रियलटाइम नोटिफिकेशन ऐप कैसे बनाएं .

हम क्या निर्माण करेंगे

इस आलेख के अंत तक, आप निम्नलिखित सुविधाओं के साथ एक बहु-उपयोगकर्ता अधिसूचना ऐप बनाएंगे:

  • Socket.io के साथ वास्तविक समय में अपठित सूचनाएं प्रदर्शित करें
  • प्रतिक्रिया सूचनाएं दिखाने के लिए फ्रंटएंड
  • सूचनाओं को प्रबंधित करने के लिए नोड + एक्सप्रेस बैकएंड
  • अधिसूचना डेटा संग्रहीत करने के लिए MongoDB
  • उच्च प्रदर्शन के लिए नेटिव वेबसॉकेट संचार

Socket.io का उपयोग करने के कारण

एप्लिकेशन में रीयलटाइम कार्यक्षमता जोड़ने के लिए कुछ विकल्प हैं। यहां बताया गया है कि हम इसका उपयोग क्यों करेंगे सॉकेट.आईओ :

  • WebSockets पर निर्मित विश्वसनीय रीयलटाइम इंजन
  • पुराने ब्राउज़रों पर HTTP लॉन्ग-पोलिंग के लिए स्वचालित फ़ॉलबैक
  • सभी जुड़े हुए ग्राहकों को संदेश प्रसारित करें
  • बाइनरी पैकेट के साथ उच्च वेग
  • खंडित संचार के लिए कमरों का समर्थन करता है
  • लोकप्रिय जावास्क्रिप्ट पारिस्थितिकी तंत्र एकीकरण

मुख्य सॉकेट.आईओ लाभ

विशेष रूप से, ये Socket.io लाभ इसे हमारे उपयोग के मामले के लिए उपयुक्त बनाएं:

  1. नोड बैकएंड के साथ मूल संगतता
  2. के लिए प्रथम श्रेणी का समर्थन प्रतिक्रिया फ्रंटएंड पर एकीकरण
  3. कई समवर्ती उपयोगकर्ताओं का समर्थन करने के लिए स्केलेबल
  4. कनेक्टेड क्लाइंट्स को अपडेट करने के लिए तुरंत ईवेंट उत्सर्जित करें

रीयलटाइम सेवा विकल्प

इससे पहले कि हम कोड में उतरें, यह रीयलटाइम क्षमताओं को जोड़ने के लिए आर्किटेक्चर विकल्पों को समझने में मदद करता है:

स्व-होस्टेड सॉकेट.आईओ सर्वर

एक विधि आपके बैकएंड इंफ्रास्ट्रक्चर के हिस्से के रूप में अपना स्वयं का सॉकेट.आईओ सर्वर चला रही है। यह ईवेंट और मैसेजिंग को अनुकूलित करने के लिए अधिकतम नियंत्रण देता है।

हालाँकि, वैश्विक रीयलटाइम सेवा की मेजबानी और स्केलिंग जटिल है। यह वह जगह है जहां तृतीय-पक्ष सेवाएँ मदद कर सकती हैं।

एक सेवा के रूप में रीयलटाइम बैकएंड

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

इस ट्यूटोरियल के लिए, हम रीयलटाइम ऐप्स बनाने का व्यावहारिक तरीका सीखने के लिए ओपन-सोर्स Socket.io चलाने पर ध्यान केंद्रित करेंगे।

चरण 1 - परियोजना सेटअप

हम रिएक्ट फ्रंटएंड को शीघ्रता से आरंभ करने के लिए क्रिएट रिएक्ट ऐप का उपयोग करेंगे। आरंभ करने के लिए टर्मिनल को अपनी वांछित मूल परियोजना निर्देशिका में नेविगेट करें:

|_+_|

यह हमारे रिएक्ट स्टार्टर कोड को एक नए |_+_| में व्यवस्थित करता है फ़ोल्डर. इसके बाद, हमें अपनी निर्भरताएँ स्थापित करने की आवश्यकता है।

फ्रंटएंड निर्भरताएँ

फ्रंटएंड पैकेज स्थापित करने के लिए इस कमांड को अपने टर्मिनल में रिएक्ट ऐप स्थान से चलाएँ:

|_+_|
  • |_+_| - नेविगेशन और रूटिंग के लिए
  • |_+_| - क्लाइंट Socket.io फ्रंटएंड को बैकएंड से कनेक्ट करने के लिए

बैकएंड निर्भरताएँ

बैकएंड फ़ोल्डर स्थान पर नेविगेट करें और एक नोड सर्वर प्रारंभ करें:

|_+_|

फिर आवश्यक बैकएंड पैकेज स्थापित करें:

|_+_|
  • |_+_| - नोड/एक्सप्रेस सर्वर
  • |_+_| - MongoDB ऑब्जेक्ट मॉडलिंग
  • |_+_| - वास्तविक समय संचार सक्षम बनाता है

चरण 2 - डेटाबेस डिज़ाइन

कोई भी ऐप कोड लिखने से पहले, आइए Mongoose का उपयोग करके अपने डेटाबेस स्कीमा को मैप करें। एक |_+_| बनाएं बैकएंड में फ़ोल्डर:

|_+_|

खोलें |_+_| और एक नेवला स्कीमा घोषित करें जैसे:

|_+_|

यह हमारी |_+_| की संरचना को परिभाषित करता है दस्तावेज़ जो प्रत्येक अधिसूचना के लिए संदेश और प्रकार संग्रहीत करेंगे।

उपयोगकर्ता मॉडल

हमें कनेक्टेड उपयोगकर्ताओं को भी ट्रैक करने की आवश्यकता है। एक |_+_| बनाएं मॉडल फ़ाइल के साथ:

|_+_|

|_+_| फ़ील्ड प्रत्येक अद्वितीय उपयोगकर्ता की पहचान करेगी.

चरण 3 - बैकएंड एपीआई रूट

हमारे डेटा मॉडल के निर्माण के साथ, एपीआई मार्गों को संभालने के लिए एक सर्वर फ़ाइल बनाएं:

|_+_|

डेटाबेस कनेक्शन

सबसे पहले, |_+_| नामक MongoDB डेटाबेस से कनेक्ट करें:

|_+_|

एक्सप्रेस सर्वर

अनुरोध प्राप्त करने के लिए अगला एक एक्सप्रेस सर्वर सेटअप करें:

|_+_|
  • क्रॉस-ऑरिजिन अनुरोधों के लिए CORS हेडर सक्षम करें
  • JSON अनुरोध निकायों को पार्स करें
  • पोर्ट 8080 पर सर्वर प्रारंभ करें

अधिसूचना मार्ग

आइए सूचनाओं को प्रबंधित करने के लिए तीन एपीआई मार्ग लागू करें:

  1. |_+_| - सभी सूचनाएं प्राप्त करें
  2. |_+_| - एक नई अधिसूचना बनाएं
  3. |_+_| - अधिसूचना को पढ़ा हुआ चिह्नित करें
|_+_|

बैकएंड एपीआई के साथ, हम सूचनाएं प्रदर्शित करना शुरू कर सकते हैं।

चरण 4 - प्रतिक्रिया घटक

आपके |_+_| में फ़ोल्डर, अधिसूचना घटकों के साथ एक घटक फ़ोल्डर बनाएं:

|_+_|

अधिसूचना घटक

खोलें |_+_| और व्यक्तिगत सूचनाएं प्रस्तुत करने के लिए एक घटक का निर्माण करें:

|_+_|

हम संदेश को स्वयं प्रदर्शित करते हैं, प्रकार की शैली को एक अलग घटक को सौंपते हैं, और इसे पढ़े गए को चिह्नित करने के लिए एक बटन दिखाते हैं।

अधिसूचना प्रकार घटक

|_+_| घटक |_+_|, |_+_|, या |_+_| के अधिसूचना प्रकार मान के आधार पर उपयुक्त सीएसएस वर्ग प्रस्तुत करेगा:

|_+_|

अधिसूचना सूची घटक

अंततः, |_+_| सूचनाओं की एक श्रृंखला पर घटक मानचित्र और प्रत्येक को हमारे पुन: प्रयोज्य |_+_| का उपयोग करके प्रदर्शित करता है अवयव:

|_+_|

चरण 5 - सूचनाएं प्राप्त करें और प्रदर्शित करें

निर्मित घटकों के साथ, आइए सूचनाएं लोड करने और दिखाने के लिए बैकएंड एपीआई का उपयोग करें।

रिएक्ट राउटर सेटअप

|_+_| में मार्गों को कॉन्फ़िगर करें रिएक्ट राउटर के साथ:

|_+_|

मुख पृष्ठ घटक

एक |_+_| बनाएं |_+_| वाला फ़ोल्डर अवयव:

|_+_|
  • लोड होने पर एपीआई से सूचनाएं प्राप्त करें
  • प्रतिक्रिया स्थिति में सहेजें
  • |_+_| को पास करें प्रदर्शित करना

सूचनाएं देखें

बैकएंड सर्वर को |_+_| से प्रारंभ करें और रिएक्ट देव सर्वर।

ऐप एपीआई से कनेक्ट होगा, अधिसूचना डेटा लोड करेगा, और इसे हमारे रिएक्ट घटकों के साथ प्रदर्शित करेगा!

चरण 6 - लाइव अधिसूचना अपडेट बनाएं

अब तक हमने पेज लोड पर सूचनाएं लोड की हैं। इसके बाद, फ़ीड को वास्तविक समय में अपडेट करने के लिए Socket.io का उपयोग करें।

Socket.io प्रारंभ करें

सबसे पहले Socket.io क्लाइंट को |_+_| में आयात करें पृष्ठ:

|_+_|

इसके बाद सर्वर से कनेक्ट करने के लिए Socket.io इंस्टेंस को इंस्टेंट करें:

|_+_|

रीयलटाइम अपडेट प्राप्त करें

सर्वर से लाइव अधिसूचना अपडेट प्राप्त करने के लिए, |_+_| सुनें आयोजन:

|_+_|

यह सर्वर से उत्सर्जित नया अधिसूचना डेटा लेता है और इसे अधिसूचना सरणी के शीर्ष पर जोड़ता है।

बैकएंड सॉकेट.आईओ कॉन्फ़िगर करें

|_+_| पर स्विच करें बैकएंड फ़ाइल और सॉकेट.io आयात करें:

|_+_|

यह एक्सप्रेस सर्वर पोर्ट पर सुनने के लिए Socket.io को आरंभ करता है।

लाइव अधिसूचना भेजें

परीक्षण अधिसूचना भेजने के लिए एक समापन बिंदु जोड़ें:

|_+_|

यह एक नई अधिसूचना बनाता है और इसे सभी कनेक्टेड सॉकेट में भेजता है!

लाइव अपडेट का परीक्षण करें

बैकएंड और फ्रंटएंड सर्वर को पुनरारंभ करें और ऐप लोड करें।

|_+_| पर एक पोस्ट अनुरोध भेजें समापनबिंदु.

आपको बिना रिफ्रेश किए ऐप में तुरंत नया नोटिफिकेशन डिस्प्ले देखना चाहिए!

चरण 7 - पढ़ा हुआ चिह्नित करें

अभी, सूचनाओं को ख़ारिज करने से वे केवल यूआई में छिपती हैं। आइए पढ़ने की स्थिति को जारी रखने की क्षमता जोड़ें।

अधिसूचना पढ़ें उत्परिवर्तन

में |_+_| घटक, क्लिक पर उत्परिवर्तन ट्रिगर करें:

|_+_|

यह डेटाबेस में पढ़ी गई अधिसूचना को अद्यतन करने के लिए एक PATCH अनुरोध भेजता है।

सूची से पढ़ें छिपाएँ

|_+_| में, सूचनाएं फ़िल्टर करें:

|_+_|

अब खारिज की गई सूचनाएं फ़ीड में दिखाई नहीं देंगी.

चरण 8 - अद्वितीय यादृच्छिक उपयोगकर्ता नाम

अधिसूचना रचनाकारों की पहचान करने के लिए, हम प्रत्येक क्लाइंट कनेक्शन को एक यादृच्छिक उपयोगकर्ता नाम निर्दिष्ट करेंगे।

उपयोगकर्ता नाम उत्पन्न करें

नाम बनाने में सहायता के लिए उपयोगिताएँ आयात करें:

|_+_|

जब Socket.io कनेक्ट हो, तो चलाएँ:

|_+_|

उपयोक्तानाम कायम रखें

हम एक यादृच्छिक उपयोगकर्ता नाम बनाते हैं और Socket.io कनेक्ट होने पर इसे डेटाबेस में जारी रखते हैं। यह प्रत्येक उपयोगकर्ता को एक विशिष्ट पहचानकर्ता निर्दिष्ट करता है।

हम |_+_| भी उत्सर्जित करते हैं उपयोगकर्ता नाम को क्लाइंट को वापस भेजने की घटना।

उपयोक्तानाम दिखाएँ

सूचनाओं के साथ उपयोगकर्ता नाम प्रदर्शित करने के लिए, |_+_| सुनें में |_+_|:

|_+_|

उपयोगकर्ता को राज्य में सहेजें. फिर |_+_| में अवयव:

|_+_|

यह प्रत्येक अधिसूचना के ऊपर यादृच्छिक उपयोगकर्ता नाम दिखाता है।

चरण 9 - अधिसूचना कक्ष से जुड़ें

अधिक लक्षित सूचनाओं के लिए, Socket.io 'रूम' नामक चैनलों का समर्थन करता है। ग्राहक ईवेंट संचार को विभाजित करने के लिए चैनल से जुड़ सकते हैं और छोड़ सकते हैं।

कनेक्ट पर चैनल से जुड़ें

कनेक्ट इन पर उपयोगकर्ताओं को एक कमरे में असाइन करें |_+_|:

|_+_|

यह प्रत्येक उपयोगकर्ता को उनके यादृच्छिक उपयोगकर्ता नाम के लिए नामित एक कमरे में जोड़ता है।

कक्ष में भेजें

सूचनाएं बनाते समय, लक्ष्य कक्ष निर्दिष्ट करें:

|_+_|

|_+_| का उपयोग करना इवेंट को केवल उस कमरे में मौजूद ग्राहकों के लिए प्रसारित करता है। सीधे संदेशों के लिए उपयोगी.

डिस्कनेक्ट पर छोड़ें

जब ग्राहक डिस्कनेक्ट हो जाएं तो उन्हें कमरे से हटा दें:

|_+_|

यह प्रत्येक कमरे को केवल वर्तमान में जुड़े उपयोगकर्ताओं तक ही सीमित रखता है।

चरण 10 - परिनियोजन

एक बार विकास समाप्त हो जाने पर, इसे सार्वजनिक रूप से सुलभ बनाने के लिए एप्लिकेशन को तैनात करें।

प्रोडक्शन होस्टिंग

होस्टिंग के लिए एक सामान्य स्टैक Nginx, Node और MongoDB है। इस आर्किटेक्चर को चलाने के लिए कई क्लाउड IaaS और PaaS विकल्प हैं।

या आप नोड, रिएक्ट और स्थिर संपत्तियों के लिए स्वचालित कॉन्फ़िगरेशन के साथ तैनाती को सरल बनाने के लिए वर्सेल जैसे विशेष जैमस्टैक प्लेटफ़ॉर्म का उपयोग कर सकते हैं।

वैकल्पिक रीयलटाइम प्रदाता

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

निगरानी

सभी घटकों - डेटाबेस, नेटवर्क, बुनियादी ढांचे, अलर्ट - विशेष रूप से मिशन महत्वपूर्ण ऐप्स के लिए निगरानी स्थापित करना सुनिश्चित करें।

निष्कर्ष

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

प्रमुख अवधारणाओं में शामिल हैं:

  • Socket.io इवेंट के साथ ग्राहकों के बीच डेटा सिंक करना
  • सूचनाएं प्रदर्शित करने के लिए प्रतिक्रिया घटक
  • अधिसूचना डेटा संग्रहीत करने के लिए एक्सप्रेस + MongoDB बैकएंड
  • रीयलटाइम संचार स्केलेबिलिटी विचार

अब आपके पास अपने ऐप्स में लाइव अपडेटिंग सुविधाएं जोड़ने का आधार है। WebSockets के साथ UX को बढ़ाने की संभावनाएं अनंत हैं!

यह सभी देखें: