Kaip sukurti pokalbių programą naudojant „React“ ir „Firebase“.

Ar kada susimąstėte, kaip veikia WhatsApp? Arba kaip skirtingi vartotojai susijungia ir keičiasi pranešimais pokalbiuose? Supaprastintos pokalbių programos kūrimas gali būti puikus būdas suprasti pagrindines pokalbių programų funkcijas.

Pokalbių programos kūrimas gali atrodyti kaip bauginanti užduotis, tačiau „Firebase“ supaprastina procesą. Tai leidžia greitai paleisti bet kurią programą, todėl nebereikia pasirinktinio fono ar duomenų bazės sąrankos.

Kas yra „Firebase“ debesies duomenų bazė

„Firebase“ yra debesies pagrindu sukurta kūrimo platforma, siūlanti daugybę užpakalinių paslaugų, tokių kaip duomenų bazė realiuoju laiku, autentifikavimas ir priegloba. Duomenų bazės paslaugų pagrindas yra NoSQL debesų duomenų bazė, kuri naudoja dokumento modelį duomenims saugoti realiuoju laiku.

Nustatykite „Firebase“ projektą ir „React Client“.

Norėdami pradėti, eikite į Firebase ir prisiregistruoti prie paskyros. Vartotojo prietaisų skydelyje spustelėkite Sukurti projektą sukurti naują projektą.

Sukūrę projektą pasirinkite ir spustelėkite kodo piktogramą projekto apžvalgos puslapyje, kad užregistruotumėte paraišką. Užsiregistravę „Firebase“ galite pasiekti ir panaudoti jos išteklius kurdami „React“ žiniatinklio programą.

Atkreipkite dėmesį į instrukcijas, kaip integruoti „Firebase“ SDK į projektą Pridėti „Firebase“ SDK.

Kitas, sukurti „React“ programą ir įdiekite „Firebase“ SDK programoje. Be to, importuokite react-firebase-kabliai paketą, kuris supaprastina darbą su Firebase In React.

npm įdiegti firebase react-firebase-hooks

Sukonfigūruokite „Firebase“ programoje „React“.

Jūsų src kataloge, sukurkite naują failą ir pavadinkite jį, firebase-config.js. Nukopijuokite aplinkos kintamuosius iš „Firebase“ projekto prietaisų skydelio ir įklijuokite juos į šį failą.

importuoti { inicializuoti programą } iš„firebase/app“;
importuoti { getFirestore } iš„@firebase/firestore“;
importuoti { getAuth, GoogleAuthProvider } iš„firebase/auth“;
konst firebaseConfig = {
 apiKey: „API_KEY“,
 authDomain: "authDomain",
 projekto ID: "projekto ID",
 saugojimo kibiras: "saugyklos kibiras",
 MessagingSenderId: "pranešimų siuntėjo ID",
 appId: "Programos ID"
};
konst app = inicializuotiApp (firebaseConfig);
konst db = getFirestore (programėlė);
konst auth = getAuth (programa)
konst teikėjas = naujas GoogleAuthProvider();
eksportuoti {db, autentifikavimas, teikėjas}

Naudodami „Firebase“ projekto konfigūraciją inicijuojate „Firebase“, „Firestore“ ir „Firebase“ autentifikavimo funkcijas, kad galėtumėte naudoti savo programoje.

Sukurkite „Firestore“ duomenų bazę

Šioje duomenų bazėje bus saugomi vartotojo duomenys ir pokalbių pranešimai. Eikite į savo projekto apžvalgos puslapį ir spustelėkite Sukurti duomenų bazę mygtuką, kad nustatytumėte „Cloud Firestore“.

Apibrėžkite duomenų bazės režimą ir vietą.

Galiausiai atnaujinkite „Firestore“ duomenų bazės taisykles, kad būtų galima skaityti ir rašyti iš „React“ programos. Spustelėkite ant Taisyklės skirtuką ir pakeiskite Skaityti ir rašyti valdyti tiesa.

Baigę nustatyti duomenų bazę, galite sukurti demonstracinę kolekciją – tai NoSQL duomenų bazė Firestore. Kolekcijos sudarytos iš dokumentų kaip įrašų.

Norėdami sukurti naują kolekciją, spustelėkite Pradėti kolekciją mygtuką ir pateikite kolekcijos ID – lentelės pavadinimą.

Integruokite „Firebase“ naudotojo autentifikavimą

„Firebase“ suteikia galimybę įsigyti iš karto autentifikavimas ir autorizacija sprendimus, kuriuos lengva įdiegti, pvz., socialinio prisijungimo teikėjus arba tinkintą el. pašto slaptažodžio teikėją.

Savo projekto apžvalgos puslapyje pasirinkite Autentifikavimas iš rodomų produktų sąrašo. Tada spustelėkite Nustatykite prisijungimo metodą mygtuką, kad sukonfigūruotumėte „Google“ teikėją. Teikėjų sąraše pasirinkite Google, įgalinkite ją ir užpildykite projekto palaikymo el. laišką.

Sukurkite prisijungimo komponentą

Baigę konfigūruoti teikėją „Firebase“, eikite į projekto aplanką ir sukurkite naują aplanką, komponentai, viduje /src katalogas. Viduje komponentai aplanką, sukurkite naują failą: SignIn.js.

Viduje SignIn.js failą, pridėkite žemiau esantį kodą:

importuoti Reaguoti iš'reaguoti';
importuoti { signInWithPopup } iš„firebase/auth“;
importuoti { auth, tiekėjas } iš„../firebase-config“

funkcijaPrisijungti() {
konst signInWithGoogle = () => {
 signInWith Popup (auth, teikėjas)
 };
grąžinti (


Prisijunkite naudodami Google</button>
 </div>
 )
}
eksportuotinumatytas Prisijungti

• Šis kodas importuoja autentifikavimo ir „Google“ teikėjo objektus, kuriuos inicijavote „Firebase“ konfigūracijos faile.
• Tada jis apibrėžia a Prisijungti funkcija, kuri įgyvendina prisijungti naudojant iššokantįjį langą metodas iš „Firebase“, kuris priima autentifikavimas ir teikėjas komponentai kaip parametrai. Ši funkcija autentifikuos vartotojus su jų „Google“ socialiniais prisijungimais.
• Galiausiai jis grąžina div su mygtuku, kurį spustelėjus iškviečiamas prisiregistruoti naudojant „Google“. funkcija.

Sukurkite pokalbių komponentą

Šiame komponente bus pagrindinė jūsų pokalbių programos funkcija – pokalbių langas. Sukurkite naują failą viduje komponentai aplanką ir pavadinkite jį Chat.js.

Pridėkite žemiau esantį kodą Chat.js Failas:

importuoti Reaguoti, { useState, useEffect } iš'reaguoti'
importuoti { db, autentifikavimas } iš„../firebase-config“
importuoti Siųsti žinutę iš'./Siųsti žinutę'
importuoti { kolekcija, užklausa, limitas, orderBy, onSnapshot } iš„firebase/firestore“;
funkcijaPokalbis() {
konst [messages, setMessages] = useState([])
konst { userID } = auth.currentUser
 useEffect (() => {
konst q = query(
 kolekcija (db, "žinutės"),
 Rūšiuoti pagal("sukurta"),
 limitas (50)
 );
konst data = onSnapshot (q, (QuerySnapshot) => {
leisti pranešimai = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (pranešimai) 

 });
grąžinti() => duomenys; 

 }, []);

grąžinti (


 auth.signOut()}>Atsijungti</button>
 {messages && messages.map((pranešimas, ID, uid, nuotraukos URL) =>
 raktas={id} 
 className={`žinutė ${userID auth.currentUser.uid? 'išsiųsta': 'gavo'}`}>

{message.text}</p>
 </div>
 )} 

 </div>
 )
}
eksportuotinumatytas Pokalbis

• Šis kodas importuoja duomenų bazę, autentifikavimo komponentus, inicijuotus firebase-config.js failą ir pasirinktinius „Firestore“ metodus, kurie leidžia lengvai valdyti saugomus duomenis.
• Jis įgyvendina kolekcija, užklausą, riba, Rūšiuoti pagal, ir onSnapshot „Firestore“ metodai, skirti pateikti užklausą ir užfiksuoti šiuo metu „Firestore“ pranešimų rinkinyje saugomų duomenų momentinę kopiją, išdėstytą pagal jų sukūrimo laiką, ir nuskaito tik 50 naujausių pranešimų.
• Firestore metodai yra suvynioti ir paleisti viduje a naudojimoEfektas kabliukas, kad pranešimai būtų pateikiami nedelsiant, kiekvieną kartą paspaudus siuntimo mygtuką, neatnaujinant puslapio lango. Kai duomenys nuskaitomi, jie išsaugomi pranešimų būsenoje.
• Tada jis patikrina, ar atskirti išsiųstus ir gautus pranešimus – ar sutampa su pranešimu saugomas vartotojo ID prisijungusio vartotojo ID, o po to nustato klasės pavadinimą ir pritaiko atitinkamą stilių žinutę.
• Galiausiai, jis pateikia pranešimus, a Atsijungti mygtuką ir Siųsti žinutę komponentas. The Atsijungti mygtuką paspaudus prižiūrėtojas skambina auth.signOut() „Firebase“ pateiktą metodą.

Sukurkite pranešimo siuntimo komponentą

Sukurti naują failą, SendMessage.js failą ir pridėkite žemiau esantį kodą:

importuoti Reaguoti, { useState } iš'reaguoti'
importuoti { db, autentifikavimas } iš„../firebase-config“
importuoti { kolekcija, addDoc, serverTimestamp} iš„firebase/firestore“;
funkcijaSiųsti žinutę() {
konst [msg, setMsg] = useState('')
konst messagesRef = kolekcija (db, "žinutės");

konst siųsti žinutę = async (e) => {
konst { uid, photoURL } = auth.currentUser

laukti addDoc (messagesRef, {
 tekstas: žinutė,
 sukurta: serverTimestamp(),
 uid: uid,
 nuotraukos URL: nuotraukos URL
 })
 setMsg('');
 };
grąžinti (



'Pranešimas...'
 tipas ="tekstas" value={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Siųsti </button>
 </div>
 )
}
eksportuotinumatytas Siųsti žinutę

• Panašus į Chat.js komponentą, importuokite Firestore metodus ir inicijuotą duomenų bazę bei autentifikavimo komponentus.
• Norėdami siųsti pranešimus, Siųsti žinutę funkcija įgyvendina addDoc Firestore metodas, kuris sukuria naują dokumentą duomenų bazėje ir išsaugo perduoti duomenis.
• The addDoc metodas apima du parametrus – duomenų objektą ir nuorodos objektą, nurodantį, kurią rinkinį norite saugoti. Firestore rinkimo metodas nurodo rinkinį duomenims saugoti.
• Galiausiai tinklalapyje pateikiamas įvesties laukas ir mygtukas, leidžiantis vartotojams pateikti pranešimus į duomenų bazę.

Importuokite komponentus į failą App.js

Galiausiai, jūsų App.js failą, importuokite Prisijungti ir Pokalbis komponentus, kad jie būtų pateikti naršyklėje.

Jūsų App.js failą, ištrinkite pagrindinį kodą ir pridėkite toliau pateiktą kodą:

importuoti Pokalbis iš„./components/Chat“;
importuoti Prisijungti iš'./components/SignIn';
importuoti { auth } iš„./firebase-config.js“
importuoti { useAuthState } iš„react-firebase-hooks/auth“
funkcijaProgramėlė() {
konst [naudotojas] = useAuthState (auth)
grąžinti (
 <>
 {Vartotojas? <Pokalbis />: <Prisijungti />}
 </>
 );
}
eksportuotinumatytas Programėlė; 

Šis kodas atvaizduoja Prisijungti ir Pokalbis komponentus sąlyginai tikrinant vartotojo autentifikavimo būseną. Autentifikavimo būsena sunaikinama naudojant „Firebase“ autentifikavimo komponentą useAuthState kablys nuo react-firebase-kabliai paketą.

Ji patikrina, ar vartotojas autentifikuotas, ir pateikia Pokalbis komponentas kitaip Prisijungti atvaizduojamas komponentas. Galiausiai pridėkite bet kokius CSS stilius, sukite kūrimo serverį, kad išsaugotumėte pakeitimus, ir eikite į naršyklę, kad peržiūrėtumėte galutinius rezultatus.

„Firebase“ be serverio funkcijos

„Firebase“ teikia daugybę funkcijų, be duomenų bazės realiuoju laiku ir autentifikavimo. Galite naudoti be serverio teikiamas funkcijas, kad greitai pakrautumėte ir pakeistumėte bet kurią programą. Be to, „Firebase“ sklandžiai integruojasi tiek su žiniatinklio, tiek su mobiliosiomis programomis, todėl lengva kurti kelių platformų programas.