Hvordan bygge en chat-app med React og Firebase

Har du noen gang lurt på hvordan WhatsApp fungerer? Eller hvordan forskjellige brukere kobler til og utveksler meldinger i chatter? Å lage en forenklet chat-applikasjon kan være en fin måte å forstå kjernefunksjonene bak chat-applikasjoner.

Å bygge en chat-app kan virke som en skremmende oppgave, men Firebase forenkler prosessen. Den lar deg raskt starte opp ethvert program, og fjerner behovet for en tilpasset backend eller et databaseoppsett.

Hva er Firebase Cloud Database

Firebase er en skybasert utviklingsplattform som tilbyr en rekke backend-tjenester som en sanntidsdatabase, autentisering og hosting. Kjernen i databasetjenestene er en NoSQL skydatabase som bruker en dokumentmodell for å lagre data i sanntid.

Sett opp Firebase-prosjektet og React-klienten

For å komme i gang, gå over til Firebase og registrere deg for en konto. Klikk på på brukerdashbordet Opprett prosjekt å sette opp et nytt prosjekt.

Etter å ha opprettet prosjektet, velg og klikk på kodeikonet på prosjektets oversiktsside for å registrere søknaden din. Registrering hos Firebase lar deg få tilgang til og bruke ressursene til å bygge React-nettappen din.

Legg merke til instruksjonene for integrering av Firebases SDK til prosjektet ditt under Legg til Firebase SDK.

Neste, opprette en React-applikasjon og installer Firebase SDK i applikasjonen din. I tillegg importerer du reagere-brannbase-kroker pakke som forenkler arbeidet med Firebase In React.

npm installer firebase react-firebase-hooks

Konfigurer Firebase i din React-applikasjon

I din src katalog, lag en ny fil og navngi den, firebase-config.js. Kopier miljøvariablene fra firebase-prosjektets dashbord og lim dem inn i denne filen.

import { initializeApp } fra"firebase/app";
import { getFirestore } fra'@firebase/firestore';
import { getAuth, GoogleAuthProvider } fra"firebase/auth";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 prosjekt-ID: "prosjekt-ID",
 lagringsbøtte: "lagringsbøtte",
 messagingSenderId: "meldingssender-ID",
 appId: «App ID»
};
konst app = initializeApp (firebaseConfig);
konst db = getFirestore (app);
konst auth = getAuth (app)
konst leverandør = ny GoogleAuthProvider();
eksport {db, auth, provider}

Ved å bruke konfigurasjonen til Firebase-prosjektet initialiserer du Firebase-, Firestore- og Firebase-autentiseringsfunksjonene for bruk i appen din.

Sett opp en Firestore-database

Denne databasen vil lagre brukerdata og chat-meldinger. Gå over til prosjektoversiktssiden din og klikk på Opprett database for å sette opp Cloud Firestore.

Definer databasemodus og plassering.

Til slutt, oppdater Firestore-databasereglene for å tillate lese-og-skrive-operasjoner fra React-applikasjonen. Klikk på Regler fanen og endre lese og skrive regel til ekte.

Når du er ferdig med å sette opp databasen, kan du lage en demosamling - dette er en NoSQL-database i Firestore. Samlingene er satt sammen av dokumenter som poster.

For å opprette en ny samling, klikk på Start samlingen knappen, og oppgi en samlings-ID – et tabellnavn.

Integrer Firebase brukerautentisering

Firebase tilbyr ut-av-boksen autentisering og autorisasjon løsninger som er enkle å implementere, for eksempel sosiale påloggingsleverandører eller tilpasset e-postpassordleverandør.

Velg på prosjektets oversiktsside Autentisering fra listen over produkter som vises. Deretter klikker du på Konfigurer påloggingsmetode for å konfigurere Google-leverandøren. Velg Google fra listen over leverandører, aktiver den og fyll ut e-posten for prosjektstøtte.

Opprett en påloggingskomponent

Når du er ferdig med å konfigurere leverandøren på Firebase, gå over til prosjektmappen din og opprette en ny mappe, komponenter, i /src katalog. Inne i komponenter mappe, opprett en ny fil: SignIn.js.

I SignIn.js fil, legg til koden nedenfor:

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

funksjonLogg inn() {
konst signInWithGoogle = () => {
 signInWithPopup (auth, leverandør)
 };
komme tilbake (


Logg på med Google</button>
 </div>
 )
}
eksportmisligholde Logg inn

• Denne koden importerer autentiserings- og Google-leverandørobjektene du initialiserte i Firebase-konfigurasjonsfilen.
• Den definerer da en Logg inn funksjon som implementerer signInWithPopup metode fra Firebase som tar inn autentisering og forsørger komponenter som parametere. Denne funksjonen vil autentisere brukere med deres sosiale pålogginger fra Google.
• Til slutt returnerer den en div som inneholder en knapp som, når den klikkes, kaller opp signInWithGoogle funksjon.

Opprett en chat-komponent

Denne komponenten vil inneholde hovedfunksjonen til Chat-applikasjonen din, chattevinduet. Opprett en ny fil inne i komponenter mappe, og gi den et navn Chat.js.

Legg til koden nedenfor i Chat.js Fil:

import Reager, { useState, useEffect } fra'reagere'
import {db, auth } fra'../firebase-config'
import Sende melding fra'./Sende melding'
import { collection, query, limit, orderBy, onSnapshot } fra"firebase/firestore";
funksjonChat() {
konst [messages, setMessages] = useState([])
konst { bruker-ID } = auth.currentUser
 useEffect(() => {
konst q = spørring(
 samling (db, "meldinger"),
 rekkefølge etter("skaptAt"),
 grense(50)
 );
konst data = onSnapshot (q, (QuerySnapshot) => {
la meldinger = [];
 QuerySnapshot.forEach((dok) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (meldinger) 

 });
komme tilbake() => data; 

 }, []);

komme tilbake (


 auth.signOut()}>Logg av</button>
 {messages && messages.map((melding, id, uid, fotoURL) =>
 nøkkel={id} 
 klassenavn={`melding ${userID auth.currentUser.uid? 'sendt': 'mottatt'}`}>

{melding.tekst}</p>
 </div>
 )} 

 </div>
 )
}
eksportmisligholde Chat

• Denne koden importerer databasen, autentiseringskomponentene initialisert i firebase-config.js fil, og Firestore-tilpassede metoder som gjør det enkelt å manipulere de lagrede dataene.
• Den implementerer samling, spørsmål, grense, rekkefølge etter, og på Snapshot Firestore-metoder for å spørre etter og ta et øyeblikksbilde av de lagrede dataene i Firestore-meldingssamlingen, sortert etter tidspunktet de ble opprettet, og leser kun de 50 siste meldingene.
• Firestore-metodene er pakket inn og kjøres i en useEffect hekte for å sikre at meldingene gjengis umiddelbart, hver gang du trykker på send-knappen, uten å oppdatere sidevinduet. Når dataene er lest, lagres de i meldingstilstanden.
• Den sjekker deretter for å skille mellom sendte og mottatte meldinger - hvis bruker-IDen som er lagret med meldingen samsvarer bruker-IDen for den påloggede brukeren, og deretter angir klassenavnet og bruker riktig stil for beskjed.
• Til slutt gjengir den meldingene, en Logg ut knappen, og Sende melding komponent. De Logg ut knapp ved trykk handler kaller auth.signOut() metode levert av Firebase.

Opprett en Send meldingskomponent

Opprett en ny fil, SendMessage.js fil, og legg til koden nedenfor:

import Reager, { useState } fra'reagere'
import {db, auth } fra'../firebase-config'
import { samling, addDoc, serverTimestamp} fra"firebase/firestore";
funksjonSende melding() {
konst [msg, setMsg] = useState('')
konst meldingerRef = samling (db, "meldinger");

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

avvente addDoc (messagesRef, {
 tekst: msg,
 opprettet på: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
komme tilbake (



'Beskjed...'
 type="tekst" verdi={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Send</button>
 </div>
 )
}
eksportmisligholde Sende melding

• Ligner på Chat.js komponent, importer Firestore-metodene og de initialiserte database- og autentiseringskomponentene.
• For å sende meldinger, Sende melding funksjon implementerer addDoc Firestore-metode som oppretter et nytt dokument i databasen og lagrer de beståtte dataene.
• De addDoc metoden tar inn to parametere, dataobjektet og et referanseobjekt som indikerer hvilken samling du ønsker å lagre dataene. Firestore-innsamlingsmetoden spesifiserer samlingen for å lagre data.
• Til slutt gjengir den et inndatafelt og en knapp på nettsiden for å tillate brukere å sende meldinger til databasen.

Importer komponentene i App.js-filen

Til slutt, i din App.js fil, importer Logg inn og Chat komponenter for å gjengi dem i nettleseren din.

I din App.js fil, slett koden og legg til koden nedenfor:

import Chat fra'./components/Chat';
import Logg inn fra'./components/SignIn';
import { auth } fra'./firebase-config.js'
import { useAuthState } fra'react-firebase-hooks/auth'
funksjonApp() {
konst [bruker] = useAuthState (auth)
komme tilbake (
 <>
 {bruker? <Chat />: <Logg inn />}
 </>
 );
}
eksportmisligholde App; 

Denne koden gjengir Logg inn og Chat komponenter betinget ved å sjekke autentiseringsstatusen til en bruker. Autentiseringsstatusen destruktureres fra Firebase-autentiseringskomponenten ved hjelp av useAuthState krok fra reagere-brannbase-kroker pakke.

Den sjekker om en bruker er autentisert, og gjengir Chat komponent ellers Logg inn komponent gjengis. Til slutt, legg til alle CSS-stiler, snurr opp utviklingsserveren for å lagre endringene, og gå over til nettleseren din for å se de endelige resultatene.

Firebase tjenerløse funksjoner

Firebase tilbyr en rekke funksjoner utover en sanntidsdatabase og autentisering. Du kan bruke dens serverløse funksjonaliteten til raskt å starte opp og skalere enhver applikasjon. Firebase integrerer dessuten sømløst med både nett- og mobilapplikasjoner, noe som gjør det enkelt å bygge applikasjoner på tvers av plattformer.