रिएक्ट और फायरबेस के साथ चैट ऐप कैसे बनाएं

क्या आपने कभी सोचा है कि व्हाट्सएप कैसे काम करता है? या कैसे अलग-अलग उपयोगकर्ता चैट में संदेशों को कनेक्ट और एक्सचेंज करते हैं? एक सरलीकृत चैट एप्लिकेशन बनाना चैट एप्लिकेशन के पीछे की मूल कार्यात्मकताओं को समझने का एक शानदार तरीका हो सकता है।

चैट ऐप बनाना एक कठिन काम लग सकता है, हालाँकि, फायरबेस प्रक्रिया को सरल करता है। कस्टम बैकएंड या डेटाबेस सेटअप की आवश्यकता को हटाते हुए, यह आपको किसी भी एप्लिकेशन को जल्दी से बूटस्ट्रैप करने में सक्षम बनाता है।

फायरबेस क्लाउड डेटाबेस क्या है

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

फायरबेस प्रोजेक्ट और रिएक्ट क्लाइंट सेट करें

आरंभ करने के लिए, पर जाएँ फायरबेस और एक खाते के लिए साइन अप करें। उपयोगकर्ता डैशबोर्ड पर, क्लिक करें प्रोजेक्ट बनाएं एक नई परियोजना स्थापित करने के लिए।

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

अपने प्रोजेक्ट के तहत Firebase के SDK को एकीकृत करने के निर्देशों पर ध्यान दें फायरबेस एसडीके जोड़ें.

अगला, एक रिएक्ट एप्लिकेशन बनाएं और अपने ऐप्लिकेशन में Firebase SDK इंस्टॉल करें। इसके अतिरिक्त, आयात करें प्रतिक्रिया-फायरबेस-हुक पैकेज जो रिएक्ट में फायरबेस के साथ काम करना आसान बनाता है।

एनपीएम फायरबेस प्रतिक्रिया-फायरबेस-हुक स्थापित करता है

अपने रिएक्ट एप्लिकेशन में फायरबेस को कॉन्फ़िगर करें

आप में स्रोत निर्देशिका, एक नई फ़ाइल बनाएँ और इसे नाम दें, फायरबेस-config.js. अपने फायरबेस प्रोजेक्ट डैशबोर्ड से पर्यावरण चर की प्रतिलिपि बनाएँ और उन्हें इस फ़ाइल में पेस्ट करें।

आयात {प्रारंभिक ऐप} से"फायरबेस/ऐप";
आयात {getFirestore} से'@firebase/firestore';
आयात {getAuth, GoogleAuthProvider} से"फायरबेस/प्रमाणीकरण";
कॉन्स्ट फायरबेस कॉन्फिग = {
 एपीआई कुंजी: "एपीआई कुंजी",
 अधिकृत डोमेन: "प्रमाण डोमेन",
 प्रोजेक्ट आईडी: "प्रोजेक्ट आईडी",
 भंडारणबकेट: "भंडारण बाल्टी",
 संदेश प्रेषक आईडी: "मैसेंजिंग प्रेषक आईडी",
 ऐपआईडी: "ऐप आईडी"
};
कॉन्स्ट ऐप = इनिशियलाइज़एप (फायरबेस कॉन्फिग);
कॉन्स्ट डीबी = getFirestore (ऐप);
कॉन्स्ट प्रमाणीकरण = getAuth (एप्लिकेशन)
कॉन्स्ट प्रदाता = नया GoogleAuthProvider ();
निर्यात {डीबी, प्रमाणीकरण, प्रदाता}

अपने फायरबेस प्रोजेक्ट के कॉन्फ़िगरेशन का उपयोग करके, आप अपने ऐप के भीतर उपयोग के लिए फायरबेस, फायरस्टोर और फायरबेस के प्रमाणीकरण कार्यों को आरंभ करते हैं।

फायरस्टोर डेटाबेस सेट अप करें

यह डेटाबेस यूजर डेटा और चैट मैसेज को स्टोर करेगा। अपने प्रोजेक्ट ओवरव्यू पेज पर जाएं और क्लिक करें डेटाबेस बनाएं अपना क्लाउड फायरस्टोर सेट करने के लिए बटन।

डेटाबेस मोड और स्थान को परिभाषित करें।

अंत में, रिएक्ट एप्लिकेशन से पढ़ने और लिखने के संचालन की अनुमति देने के लिए फायरस्टार डेटाबेस नियमों को अपडेट करें। पर क्लिक करें नियम टैब और बदलें पढ़ें और लिखें करने के लिए नियम सत्य.

एक बार जब आप डेटाबेस की स्थापना कर लेते हैं, तो आप एक डेमो संग्रह बना सकते हैं - यह फायरस्टोर में एक NoSQL डेटाबेस है। संग्रह अभिलेखों के रूप में दस्तावेजों से बने होते हैं।

एक नया संग्रह बनाने के लिए, पर क्लिक करें संग्रह प्रारंभ करें बटन, और एक संग्रह आईडी - एक तालिका नाम प्रदान करें।

फायरबेस उपयोगकर्ता प्रमाणीकरण को एकीकृत करें

फायरबेस आउट-ऑफ-द-बॉक्स प्रदान करता है सत्यापन और प्राधिकरण सामाजिक लॉगिन प्रदाता या कस्टम ईमेल-पासवर्ड प्रदाता जैसे समाधान लागू करना आसान है।

अपने प्रोजेक्ट के ओवरव्यू पेज पर, चुनें प्रमाणीकरण प्रदर्शित उत्पादों की सूची से। अगला, पर क्लिक करें सेटअप साइन-इन विधि Google प्रदाता को कॉन्फ़िगर करने के लिए बटन। प्रदाताओं की सूची से Google का चयन करें, इसे सक्षम करें और प्रोजेक्ट समर्थन ईमेल भरें।

एक साइन-इन घटक बनाएँ

एक बार जब आप प्रदाता को फायरबेस पर कॉन्फ़िगर कर लेते हैं, तो अपने प्रोजेक्ट फ़ोल्डर पर जाएं और एक नया फ़ोल्डर बनाएं, अवयव, में /src निर्देशिका। के अंदर अवयव फ़ोल्डर, एक नई फ़ाइल बनाएँ: साइन इन करें.

में साइन इन करें फ़ाइल, नीचे कोड जोड़ें:

आयात प्रतिक्रिया से'प्रतिक्रिया';
आयात {साइनइनविथपॉपअप} से"फायरबेस/प्रमाणीकरण";
आयात {प्रमाणीकरण, प्रदाता} से'../firebase-config'

समारोहदाखिल करना() {
कॉन्स्ट साइन इन विथ गूगल = () => {
 साइनइनविथपॉपअप (प्रमाणीकरण, प्रदाता)
 };
वापस करना (


Google< के साथ साइन इन करें/button>
 </div>
 )
}
निर्यातगलती करना दाखिल करना

• यह कोड प्रमाणीकरण और Google प्रदाता वस्तुओं को आयात करता है जिन्हें आपने फायरबेस कॉन्फ़िगरेशन फ़ाइल में प्रारंभ किया था।
• यह तब परिभाषित करता है दाखिल करना कार्य जो कार्यान्वित करता है साइनइनविथपॉपअप फायरबेस से विधि जो अंदर ले जाती है प्रमाणीकरण और प्रदाता पैरामीटर के रूप में घटक यह फ़ंक्शन उपयोगकर्ताओं को उनके Google सामाजिक लॉगिन से प्रमाणित करेगा।
• अंत में, यह एक div देता है जिसमें एक बटन होता है, जिसे क्लिक करने पर कॉल करता है साइन इन विथ गूगल समारोह।

एक चैट घटक बनाएँ

इस घटक में आपके चैट एप्लिकेशन, चैट विंडो की मुख्य विशेषता होगी। के अंदर एक नई फाइल बनाएं अवयव फ़ोल्डर, और इसे नाम दें चैट.जेएस.

में नीचे दिए गए कोड को जोड़ें चैट.जेएस फ़ाइल:

आयात प्रतिक्रिया, {useState, useEffect} से'प्रतिक्रिया'
आयात {डीबी, प्रमाणीकरण} से'../firebase-config'
आयात मेसेज भेजें से'।/मेसेज भेजें'
आयात {संग्रह, क्वेरी, सीमा, आदेश द्वारा, स्नैपशॉट पर} से"फायरबेस/फायरस्टोर";
समारोहबात करना() {
कॉन्स्ट [संदेश, सेटमैसेज] = यूज़स्टेट ([])
कॉन्स्ट {यूजरआईडी} = auth.currentUser
 उपयोग प्रभाव (() => {
कॉन्स्ट क्यू = क्वेरी (
 संग्रह (डीबी, "संदेश"),
 द्वारा आदेश("पर बनाया गया"),
 सीमा (50)
 );
कॉन्स्ट डेटा = ऑन स्नैपशॉट (क्यू, (क्वेरी स्नैपशॉट) => {
होने देना संदेश = [];
 क्वेरीस्नैपशॉट.प्रत्येक के लिए ((डॉक्टर) => {
 संदेश.पुश ({ ...doc.data(), पहचान: doc.id});
 });
 सेटमैसेज (संदेश) 

 });
वापस करना() => आंकड़े; 

 }, []);

वापस करना (


 auth.signOut()}>साइन आउट</button>
 {संदेश और& संदेश.नक्शा ((संदेश, आईडी, यूआईडी, photoURL) =>
 कुंजी = {आईडी} 
 वर्गनाम = {`संदेश ${userID auth.currentUser.uid? 'भेजा गया': 'प्राप्त हुआ'}`}>

{संदेश.पाठ</p>
 </div>
 )} 

 </div>
 )
}
निर्यातगलती करना बात करना

• यह कोड डेटाबेस को आयात करता है, जिसमें प्रमाणीकरण घटक आरंभीकृत होते हैं फायरबेस-config.js फ़ाइल, और फायरस्टार कस्टम विधियाँ जो संग्रहीत डेटा में हेरफेर करना आसान बनाती हैं।
• यह लागू करता है संग्रह, जिज्ञासा, आप LIMIT, द्वारा आदेश, और स्नैपशॉट पर फायरस्टोर संदेश संग्रह में वर्तमान में संग्रहीत डेटा के स्नैपशॉट को क्वेरी और कैप्चर करने के लिए फायरस्टोर विधियाँ, उनके बनाए जाने के समय के अनुसार क्रमबद्ध होती हैं, और केवल 50 सबसे हाल के संदेशों को पढ़ती हैं।
• फायरस्टोर विधियों को लपेटा जाता है और अंदर चलाया जाता है useEffect हुक यह सुनिश्चित करने के लिए कि प्रत्येक बार जब आप पृष्ठ विंडो को रीफ्रेश किए बिना भेजें बटन दबाते हैं तो संदेशों को तुरंत प्रस्तुत किया जाता है। डेटा पढ़ने के बाद, यह संदेश स्थिति में संग्रहीत होता है।
• इसके बाद यह भेजे गए और प्राप्त संदेशों के बीच अंतर करने के लिए जांच करता है - यदि संदेश के साथ संग्रहीत उपयोगकर्ता आईडी मेल खाती है लॉग-इन उपयोगकर्ता के लिए उपयोगकर्ता आईडी, और उसके बाद, कक्षा का नाम सेट करता है और उपयुक्त स्टाइल लागू करता है संदेश।
• अंत में, यह संदेशों को प्रस्तुत करता है, ए साइन आउट बटन, और मेसेज भेजें अवयव। साइन आउट बटन क्लिक पर हैंडलर कॉल करता है प्रमाणीकरण.साइनआउट () फायरबेस द्वारा प्रदान की गई विधि।

एक भेजें संदेश घटक बनाएँ

एक नई फ़ाइल बनाएँ, SendMessage.js फ़ाइल, और नीचे कोड जोड़ें:

आयात प्रतिक्रिया, {useState} से'प्रतिक्रिया'
आयात {डीबी, प्रमाणीकरण} से'../firebase-config'
आयात {संग्रह, एडडॉक, सर्वरटाइमस्टैम्प} से"फायरबेस/फायरस्टोर";
समारोहमेसेज भेजें() {
कॉन्स्ट [संदेश, सेटएमएसजी] = यूज़स्टेट ('')
कॉन्स्ट संदेशRef = संग्रह (डीबी, "संदेश");

कॉन्स्ट संदेश भेजें = async (ई) => {
कॉन्स्ट {यूआईडी, photoURL} = auth.currentUser

इंतजार एडडॉक (संदेशसंदर्भ, {
 टेक्स्ट: संदेश,
 बनाया गया: सर्वर टाइमस्टैम्प (),
 यूआईडी: यूआईडी,
 फोटोयूआरएल: फोटोयूआरएल
 })
 सेटसंदेश('');
 };
वापस करना (



'संदेश...'
 टाइप ="मूलपाठ" मूल्य = {संदेश} 
 onChange={(e) => setMsg (e.target.value)}
 />
भेजें </button>
 </div>
 )
}
निर्यातगलती करना मेसेज भेजें

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

घटक को App.js फ़ाइल में आयात करें

अंत में, अपने में ऐप.जेएस फ़ाइल, आयात करें दाखिल करना और बात करना घटकों को अपने ब्राउज़र पर प्रस्तुत करने के लिए।

आप में ऐप.जेएस फ़ाइल, बॉयलरप्लेट कोड हटाएं, और नीचे कोड जोड़ें:

आयात बात करना से'./घटक/चैट';
आयात दाखिल करना से'./components/SignIn';
आयात {प्रमाणिक} से'./firebase-config.js'
आयात {यूज़ऑथस्टेट} से'प्रतिक्रिया-फायरबेस-हुक/प्रमाणीकरण'
समारोहअनुप्रयोग() {
कॉन्स्ट [उपयोगकर्ता] = यूथस्टेट (प्रमाणीकरण)
वापस करना (
 <>
 {उपयोगकर्ता? <बात करना />: <दाखिल करना />}
 </>
 );
}
निर्यातगलती करना अनुप्रयोग; 

यह कोड प्रस्तुत करता है दाखिल करना और बात करना उपयोगकर्ता की प्रमाणीकरण स्थिति की जाँच करके सशर्त रूप से घटक। प्रमाणीकरण स्थिति की सहायता से फायरबेस प्रमाणीकरण घटक से नष्ट कर दिया गया है यूज़ऑथस्टेट हुक से प्रतिक्रिया-फायरबेस-हुक पैकेट।

यह जांचता है कि उपयोगकर्ता प्रमाणित है, और प्रस्तुत करता है बात करना घटक अन्यथा दाखिल करना घटक का प्रतिपादन किया है। अंत में, किसी भी सीएसएस शैलियों में जोड़ें, परिवर्तनों को सहेजने के लिए विकास सर्वर को स्पिन करें और अंतिम परिणाम देखने के लिए अपने ब्राउज़र पर जाएं।

फायरबेस सर्वर रहित कार्यप्रणाली

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