Ako vytvoriť chatovú aplikáciu pomocou React a Firebase

Zaujímalo vás niekedy, ako funguje WhatsApp? Alebo ako sa rôzni používatelia spájajú a vymieňajú si správy v chatoch? Vytvorenie zjednodušenej chatovacej aplikácie môže byť skvelým spôsobom, ako pochopiť základné funkcie chatovacích aplikácií.

Vytvorenie chatovej aplikácie sa môže zdať ako náročná úloha, Firebase však tento proces zjednodušuje. Umožňuje vám rýchlo zaviesť akúkoľvek aplikáciu, čím sa eliminuje potreba vlastného backendu alebo nastavenia databázy.

Čo je to Firebase Cloud Database

Firebase je cloudová vývojová platforma, ktorá ponúka celý rad backendových služieb, ako napríklad databázu v reálnom čase, autentifikáciu a hosting. Jadrom jeho databázových služieb je cloudová databáza NoSQL, ktorá využíva model dokumentu na ukladanie údajov v reálnom čase.

Nastavte projekt Firebase a klienta React

Ak chcete začať, prejdite na Firebase a zaregistrujte si účet. Na informačnom paneli používateľa kliknite na Vytvoriť projekt založiť nový projekt.

Po vytvorení projektu vyberte a kliknite na ikonu kódu na stránke prehľadu projektu, aby ste zaregistrovali svoju aplikáciu. Registrácia na Firebase vám umožní získať prístup a využívať jej zdroje na vytvorenie vašej webovej aplikácie React.

Všimnite si pokyny na integráciu súpravy Firebase SDK do vášho projektu Pridajte súpravu Firebase SDK.

Ďalšie, vytvorte aplikáciu React a nainštalujte Firebase SDK do svojej aplikácie. Okrem toho importujte súbor reakčné-firebase-háky balík, ktorý zjednodušuje prácu s Firebase In React.

npm nainštalujte háky reakcie na požiarnu základňu

Nakonfigurujte Firebase vo svojej aplikácii React

V tvojom src adresár, vytvorte nový súbor a pomenujte ho, firebase-config.js. Skopírujte premenné prostredia z hlavného panela projektu Firebase a vložte ich do tohto súboru.

importovať { initializeApp } od"firebase/app";
importovať { getFirestore } od'@firebase/firestore';
importovať { getAuth, GoogleAuthProvider } od"firebase/auth";
konšt firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 projectId: "ID projektu",
 úložný priestor: "úložný vedro",
 messagingSenderId: "ID odosielateľa správy",
 appId: "ID aplikácie"
};
konšt app = initializeApp (firebaseConfig);
konšt db = getFirestore (aplikácia);
konšt auth = getAuth (aplikácia)
konšt poskytovateľ = Nový GoogleAuthProvider();
export {db, auth, provider}

Pomocou konfigurácie projektu Firebase inicializujete funkcie overenia Firebase, Firestore a Firebase na použitie vo vašej aplikácii.

Nastavte databázu Firestore

Táto databáza bude uchovávať používateľské údaje a chatové správy. Prejdite na stránku s prehľadom projektu a kliknite na Vytvorte databázu tlačidlo na nastavenie vášho Cloud Firestore.

Definujte režim a umiestnenie databázy.

Nakoniec aktualizujte pravidlá databázy Firestore, aby ste umožnili operácie čítania a zápisu z aplikácie React. Klikni na pravidlá kartu a zmeňte čítaj a píš vládnuť pravda.

Po dokončení nastavenia databázy môžete vytvoriť ukážkovú kolekciu – toto je databáza NoSQL vo Firestore. Zbierky tvoria dokumenty ako záznamy.

Ak chcete vytvoriť novú kolekciu, kliknite na Začať zber a zadajte ID kolekcie – názov tabuľky.

Integrujte overenie používateľa Firebase

Firebase poskytuje hneď po vybalení autentifikáciu a autorizáciu riešenia, ktoré sa dajú ľahko implementovať, ako sú napríklad poskytovatelia sociálnych prihlásení alebo vlastný poskytovateľ e-mailových hesiel.

Na stránke prehľadu vášho projektu vyberte Overenie zo zoznamu zobrazených produktov. Ďalej kliknite na Nastavte spôsob prihlásenia tlačidlo na konfiguráciu poskytovateľa Google. Vyberte Google zo zoznamu poskytovateľov, povoľte ho a vyplňte e-mail podpory projektu.

Vytvorte prihlasovací komponent

Po dokončení konfigurácie poskytovateľa na Firebase prejdite do priečinka projektu a vytvorte nový priečinok, komponentov, v /src adresár. Vnútri komponentov priečinok, vytvorte nový súbor: SignIn.js.

V SignIn.js súbor, pridajte kód nižšie:

importovať Reagovať od'reagovať';
importovať { signInWithPopup } od"firebase/auth";
importovať { auth, provider } od'../firebase-config'

funkciuPrihlásiť sa() {
konšt signInWithGoogle = () => {
 signInWithPopup (autorizácia, poskytovateľ)
 };
vrátiť (


Prihláste sa pomocou Google</button>
 </div>
 )
}
exportpredvolená Prihlásiť sa

• Tento kód importuje overenie a objekty poskytovateľa Google, ktoré ste inicializovali v konfiguračnom súbore Firebase.
• Potom definuje a Prihlásiť sa funkciu, ktorá implementuje signInWithPopup metóda z Firebase, ktorá berie do Overenie a poskytovateľa komponenty ako parametre. Táto funkcia overí používateľov pomocou ich sociálnych prihlasovacích údajov Google.
• Nakoniec vráti div obsahujúci tlačidlo, ktoré po kliknutí zavolá prihlásiť sa pomocou Google funkciu.

Vytvorte komponent chatu

Tento komponent bude obsahovať hlavnú funkciu vašej aplikácie Chat, okno chatu. Vytvorte nový súbor vo vnútri komponentov priečinok a pomenujte ho Chat.js.

Pridajte kód nižšie do Chat.js Súbor:

importovať Reaguj, { useState, useEffect } od'reagovať'
importovať { db, auth } od'../firebase-config'
importovať Poslať správu od'./Poslať správu'
importovať { kolekcia, dopyt, limit, objednávka podľa, na snímke } od"firebase/firestore";
funkciuChat() {
konšt [messages, setMessages] = useState([])
konšt { userID } = auth.currentUser
 useEffect(() => {
konšt q = dotaz(
 zbierka (db, "správy"),
 zoradiť podľa("vytvorenéAt"),
 limit(50)
 );
konšt data = onSnapshot (q, (QuerySnapshot) => {
nech správy = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (správy) 

 });
vrátiť() => údaje; 

 }, []);

vrátiť (


 auth.signOut()}>Odhlásiť sa</button>
 {messages && messages.map((message, id, uid, photoURL) =>
 key={id} 
 className={`msg ${userID auth.currentUser.uid? 'odoslané': 'prijaté'}`}>

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

 </div>
 )
}
exportpredvolená Chat

• Tento kód importuje databázu, autentifikačné komponenty inicializované v firebase-config.js súbor a vlastné metódy Firestore, ktoré uľahčujú manipuláciu s uloženými údajmi.
• Implementuje zber, dopyt, limit, zoradiť podľa, a onSnapshot Metódy Firestore na dopytovanie a zachytávanie snímky aktuálne uložených údajov v kolekcii správ Firestore, zoradené podľa času ich vytvorenia, a číta iba 50 najnovších správ.
• Metódy Firestore sú zabalené a spustené vo vnútri a useEffect háčik, aby sa zabezpečilo, že správy sa vykreslia okamžite pri každom stlačení tlačidla odoslať bez obnovovania okna stránky. Po prečítaní sa údaje uložia do stavu správ.
• Potom skontroluje rozlíšenie medzi odoslanými a prijatými správami – ak sa ID používateľa uložené so správou zhoduje ID užívateľa pre prihláseného užívateľa a potom nastaví názov triedy a použije vhodný štýl pre triedu správu.
• Nakoniec vykresľuje správy, a Odhlásiť Sa tlačidlo a Poslať správu komponent. The Odhlásiť Sa tlačidlo po kliknutí psovod volá auth.signOut() spôsob poskytovaný službou Firebase.

Vytvorte komponent Odoslať správu

Vytvorte nový súbor, SendMessage.js súbor a pridajte kód nižšie:

importovať Reagovať, { useState } od'reagovať'
importovať { db, auth } od'../firebase-config'
importovať { collection, addDoc, serverTimestamp} od"firebase/firestore";
funkciuPoslať správu() {
konšt [msg, setMsg] = useState('')
konšt messagesRef = zbierka (db, "správy");

konšt odoslať správu = async (e) => {
konšt { uid, photoURL } = auth.currentUser

čakať addDoc (messagesRef, {
 text: msg,
 createdAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
vrátiť (



'Správa...'
 typ="text" value={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Odoslať</button>
 </div>
 )
}
exportpredvolená Poslať správu

• Podobné ako Chat.js importujte metódy Firestore a inicializovanú databázu a komponenty autentifikácie.
• Ak chcete odosielať správy, Poslať správu funkcia implementuje addDoc Metóda Firestore, ktorá vytvorí nový dokument v databáze a uloží odovzdané údaje.
• The addDoc metóda má dva parametre, dátový objekt a referenčný objekt, ktorý označuje, ktorú kolekciu chcete uložiť dáta. Metóda zberu Firestore určuje kolekciu na ukladanie údajov.
• Nakoniec vykreslí vstupné pole a tlačidlo na webovej stránke, ktoré používateľom umožní odosielať správy do databázy.

Importujte komponenty do súboru App.js

Nakoniec vo vašom App.js súbor, importujte súbor Prihlásiť sa a Chat komponenty na ich vykreslenie vo vašom prehliadači.

V tvojom App.js súbor, odstráňte štandardný kód a pridajte kód nižšie:

importovať Chat od'./components/Chat';
importovať Prihlásiť sa od'./components/SignIn';
importovať { auth } od'./firebase-config.js'
importovať { useAuthState } od'react-firebase-hooks/auth'
funkciuApp() {
konšt [používateľ] = useAuthState (auth)
vrátiť (
 <>
 {používateľ? <Chat />: <Prihlásiť sa />}
 </>
 );
}
exportpredvolená App; 

Tento kód vykresľuje Prihlásiť sa a Chat komponenty podmienene kontrolou stavu autentifikácie užívateľa. Stav autentifikácie je deštruktúrovaný z autentifikačného komponentu Firebase pomocou použiteAuthState háčik z reakčné-firebase-háky balík.

Skontroluje, či je používateľ overený, a vykreslí Chat komponent inak Prihlásiť sa komponent je vykreslený. Nakoniec pridajte ľubovoľné štýly CSS, roztočte vývojový server, aby ste uložili zmeny, a prejdite do prehliadača, aby ste videli konečné výsledky.

Bezserverové funkcie Firebase

Firebase poskytuje celý rad funkcií nad rámec databázy a overovania v reálnom čase. Môžete použiť jeho funkcie bez servera na rýchle zavedenie a škálovanie akejkoľvek aplikácie. Firebase sa navyše bezproblémovo integruje s webovými aj mobilnými aplikáciami, čo uľahčuje vytváranie aplikácií naprieč platformami.