Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Har du nogensinde spekuleret på, hvordan WhatsApp fungerer? Eller hvordan forskellige brugere forbinder og udveksler beskeder i chats? Oprettelse af en forenklet chatapplikation kan være en fantastisk måde at forstå kernefunktionaliteterne bag chatapplikationer.

At bygge en chat-app kan virke som en skræmmende opgave, men Firebase forenkler processen. Det giver dig mulighed for hurtigt at bootstrap ethvert program, hvilket fjerner behovet for en brugerdefineret backend eller en databaseopsætning.

Hvad er Firebase Cloud Database

Firebase er en cloud-baseret udviklingsplatform, der tilbyder en række backend-tjenester såsom en realtidsdatabase, autentificering og hosting. Kernen i dets databasetjenester er en NoSQL cloud-database, der bruger en dokumentmodel til at gemme data i realtid.

Konfigurer Firebase-projektet og React-klienten

Du kan tjekke chatapplikationskoden, der er tilgængelig på dette

instagram viewer
GitHub-depot og det er gratis at bruge under MIT-licensen. Sørg for at konfigurere Firebase, før du kører programmet.

For at komme i gang skal du gå over til Firebase og tilmeld dig en konto. Klik på på brugerdashboardet Opret projekt at oprette et nyt projekt.

Når du har oprettet dit projekt, skal du vælge og klikke på kodeikonet på projektets oversigtsside for at registrere din ansøgning. Registrering hos Firebase giver dig adgang til og udnytter dets ressourcer til at bygge din React-webapp.

Bemærk instruktionerne for integration af Firebases SDK til dit projekt under Tilføj Firebase SDK.

Næste, oprette en React-applikation og installer Firebase SDK i din applikation. Importer desuden reagere-ildbase-kroge pakke, der forenkler arbejdet med Firebase In React.

npm installer firebase react-firebase-hooks

Konfigurer Firebase i din React-applikation

I din src mappe, opret en ny fil og navngiv den, firebase-config.js. Kopier miljøvariablerne fra dit firebase-projektdashboard, og indsæt dem i denne fil.

importere { initializeApp } fra"firebase/app";
importere { getFirestore } fra'@firebase/firestore';
importere { getAuth, GoogleAuthProvider } fra"firebase/auth";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 projekt-id: "projekt-id",
 storageBucket: "opbevaringsspand",
 messagingSenderId: "beskeder afsender-id",
 appId: "App ID"
};
konst app = initializeApp (firebaseConfig);
konst db = getFirestore (app);
konst auth = getAuth (app)
konst udbyder = ny GoogleAuthProvider();
eksport {db, auth, provider}

Ved at bruge dit Firebase-projekts konfiguration initialiserer du Firebase, Firestore og Firebase's godkendelsesfunktioner til brug i din app.

Opsæt en Firestore-database

Denne database gemmer brugerdata og chatbeskeder. Gå over til din projektoversigtsside og klik på Opret database knappen for at konfigurere din Cloud Firestore.

Definer databasetilstand og placering.

Til sidst skal du opdatere Firestore-databasereglerne for at tillade læse-og-skrive-operationer fra React-applikationen. Klik på Regler fanen og ændre Læs og skriv reglen til rigtigt.

Når du er færdig med at opsætte databasen, kan du oprette en demosamling - dette er en NoSQL-database i Firestore. Samlingerne er opbygget af dokumenter som optegnelser.

For at oprette en ny samling, klik på Start indsamling knappen, og angiv et samlings-id - et tabelnavn.

Integrer Firebase-brugergodkendelse

Firebase leverer out-of-the-box autentificering og autorisation løsninger, der er nemme at implementere, såsom sociale login-udbydere eller den tilpassede e-mail-adgangskodeudbyder.

På dit projekts oversigtsside skal du vælge Godkendelse fra listen over viste produkter. Klik derefter på Konfigurer login-metode knappen for at konfigurere Google-udbyderen. Vælg Google fra listen over udbydere, aktiver det, og udfyld projektsupport-e-mailen.

Opret en log-in-komponent

Når du er færdig med at konfigurere udbyderen på Firebase, skal du gå over til din projektmappe og oprette en ny mappe, komponenter, i /src vejviser. Inde i komponenter mappe, opret en ny fil: SignIn.js.

I den SignIn.js fil, tilføj koden nedenfor:

importere Reagere fra'reagere';
importere { signInWithPopup } fra"firebase/auth";
importere { auth, provider } fra'../firebase-config'

fungereLog ind() {
konst logInWithGoogle = () => {
 signInWithPopup (godkendelse, udbyder)
 };
Vend tilbage (




eksportStandard Log ind
  • Denne kode importerer de godkendelses- og Google-udbyderobjekter, du initialiserede i Firebase-konfigurationsfilen.
  • Det definerer derefter en Log ind funktion, der implementerer logInWithPopup metode fra Firebase, der tager i Godkendelse og udbyder komponenter som parametre. Denne funktion vil godkende brugere med deres Google sociale logins.
  • Til sidst returnerer den en div, der indeholder en knap, som, når den klikkes, kalder den logInWithGoogle fungere.

Opret en chatkomponent

Denne komponent vil rumme hovedfunktionen i din chatapplikation, chatvinduet. Opret en ny fil inde i komponenter mappe, og navngiv den Chat.js.

Tilføj koden nedenfor i Chat.js Fil:

importere Reager, { useState, useEffect } fra'reagere'
importere {db, auth } fra'../firebase-config'
importere Send besked fra'./Send besked'
importere { collection, query, limit, orderBy, onSnapshot } fra"firebase/firestore";
fungereSnak() {
konst [messages, setMessages] = useState([])
konst { bruger-ID } = auth.currentUser
 useEffect(() => {
konst q = forespørgsel(
 samling (db, "Beskeder"),
 ordreaf("createdAt"),
 begrænse(50)
 );
konst data = onSnapshot (q, (QuerySnapshot) => {
lade beskeder = [];
 QuerySnapshot.forEach((dok) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (meddelelser) 

 });
Vend tilbage() => data; 

 }, []);

Vend tilbage (
  • Denne kode importerer databasen, godkendelseskomponenterne initialiseret i firebase-config.js fil og Firestore brugerdefinerede metoder, der gør det nemt at manipulere de lagrede data.
  • Den implementerer kollektion, forespørgsel, begrænse, bestil Af, og på Snapshot Firestore-metoder til at forespørge og tage et øjebliksbillede af de aktuelt lagrede data i Firestore-meddelelsessamlingen, sorteret efter det tidspunkt, de blev oprettet, og læser kun de 50 seneste meddelelser.
  • Firestore-metoderne er pakket ind og køres inde i en useEffect krog for at sikre, at beskederne gengives med det samme, hver gang du trykker på send-knappen, uden at opdatere sidevinduet. Når dataene er læst, gemmes de i meddelelsestilstanden.
  • Den kontrollerer derefter for at skelne mellem sendte og modtagne beskeder - hvis bruger-id'et, der er gemt med beskeden, stemmer overens bruger-id'et for den loggede bruger, og derefter indstiller klassens navn og anvender den passende stil for besked.
  • Til sidst gengiver den meddelelserne, en Log ud knappen og Send besked komponent. Det Log ud knap påKlik handler kalder auth.signOut() metode leveret af Firebase.

Opret en Send besked-komponent

Opret en ny fil, SendMessage.js fil, og tilføj koden nedenfor:

importere Reager, { useState } fra'reagere'
importere {db, auth } fra'../firebase-config'
importere { collection, addDoc, serverTimestamp} fra"firebase/firestore";
fungereSend besked() {
konst [msg, setMsg] = useState('')
konst messagesRef = samling (db, "Beskeder");

konst sendMsg = asynkron (e) => {
konst { uid, photoURL } = auth.currentUser

vente addDoc (messagesRef, {
 tekst: msg,
 oprettet på: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };


Vend tilbage (




'Besked...'
 type="tekst" værdi={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />


eksportStandard Send besked
  • Svarende til Chat.js komponent, skal du importere Firestore-metoderne og de initialiserede database- og godkendelseskomponenter.
  • For at sende beskeder skal Send besked funktion implementerer addDoc Firestore-metode, der opretter et nyt dokument i databasen og gemmer de overførte data.
  • Det addDoc metoden indtager to parametre, dataobjektet og et referenceobjekt, der angiver, hvilken samling du vil gemme dataene. Firestore-indsamlingsmetoden angiver den indsamling, der skal gemme data.
  • Til sidst gengiver den et inputfelt og en knap på websiden for at tillade brugere at sende meddelelser til databasen.

Importer komponenterne i App.js-filen

Til sidst i din App.js fil, importer Log ind og Snak komponenter til at gengive dem i din browser.

I din App.js fil, slet boilerplate-koden, og tilføj koden nedenfor:

importere Snak fra'./komponenter/Chat';
importere Log ind fra'./components/SignIn';
importere { auth } fra'./firebase-config.js'
importere { useAuthState } fra'react-firebase-hooks/auth'
fungereApp() {
konst [bruger] = useAuthState (auth)
Vend tilbage (
 <>
 {bruger? <Snak />: <Log ind />}
 </>
 );
}
eksportStandard App;

Denne kode gengiver Log ind og Snak komponenter betinget ved at kontrollere en brugers godkendelsesstatus. Godkendelsesstatussen destruktureres fra Firebase-godkendelseskomponenten ved hjælp af brug AuthState krog fra reagere-ildbase-kroge pakke.

Den kontrollerer, om en bruger er godkendt, og gengiver Snak komponent ellers Log ind komponent gengives. Til sidst skal du tilføje en hvilken som helst CSS-stil, dreje udviklingsserveren op for at gemme ændringerne, og gå over til din browser for at se de endelige resultater.

Firebase serverløse funktioner

Firebase tilbyder en række funktioner ud over en realtidsdatabase og -godkendelse. Du kan bruge dens serverløse funktionaliteter til hurtigt at bootstrap og skalere enhver applikation. Firebase integreres desuden problemfrit med både web- og mobilapplikationer, hvilket gør det nemt at bygge applikationer på tværs af platforme.