Hur man bygger en chattapp med React och Firebase

Har du någonsin undrat hur WhatsApp fungerar? Eller hur olika användare ansluter och utbyter meddelanden i chattar? Att skapa en förenklad chattapplikation kan vara ett bra sätt att förstå kärnfunktionerna bakom chattapplikationer.

Att bygga en chattapp kan verka som en skrämmande uppgift, men Firebase förenklar processen. Det gör att du snabbt kan starta alla program, vilket tar bort behovet av en anpassad backend eller en databasinstallation.

Vad är Firebase Cloud Database

Firebase är en molnbaserad utvecklingsplattform som erbjuder en rad backend-tjänster som en realtidsdatabas, autentisering och hosting. Kärnan i dess databastjänster är en NoSQL-molndatabas som använder en dokumentmodell för att lagra data i realtid.

Konfigurera Firebase-projektet och React-klienten

För att komma igång, gå över till Firebase och registrera dig för ett konto. Klicka på på användarinstrumentpanelen Skapa projekt att starta ett nytt projekt.

När du har skapat ditt projekt, välj och klicka på kodikonen på projektets översiktssida för att registrera din ansökan. Genom att registrera dig hos Firebase kan du komma åt och använda dess resurser för att bygga din React-webbapp.

Ta del av instruktionerna för att integrera Firebases SDK till ditt projekt under Lägg till Firebase SDK.

Nästa, skapa en React-applikation och installera Firebase SDK i din applikation. Importera dessutom reagera-firebase-krokar paket som förenklar arbetet med Firebase In React.

npm installera firebase react-firebase-hooks

Konfigurera Firebase i din React-applikation

I din src katalog, skapa en ny fil och namnge den, firebase-config.js. Kopiera miljövariablerna från ditt Firebase-projekts instrumentpanel och klistra in dem i den här filen.

importera { initializeApp } från"firebase/app";
importera { getFirestore } från'@firebase/firestore';
importera { getAuth, GoogleAuthProvider } från"firebase/auth";
konst firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "authDomain",
 projekt-id: "projekt-ID",
 storageBucket: "förvaringshink",
 messagingSenderId: "meddelande avsändar-ID",
 appId: "App ID"
};
konst app = initializeApp (firebaseConfig);
konst db = getFirestore (app);
konst auth = getAuth (app)
konst leverantör = ny GoogleAuthProvider();
exportera {db, auth, provider}

Med ditt Firebase-projekts konfiguration initierar du Firebase, Firestore och Firebases autentiseringsfunktioner för användning i din app.

Konfigurera en Firestore-databas

Denna databas kommer att lagra användardata och chattmeddelanden. Gå över till din projektöversiktssida och klicka på Skapa databas för att ställa in din Cloud Firestore.

Definiera databasläge och plats.

Uppdatera slutligen Firestore-databasreglerna för att tillåta läs-och-skriv-operationer från React-applikationen. Klicka på Regler fliken och ändra Läsa och skriva härska till Sann.

När du är klar med att konfigurera databasen kan du skapa en demosamling - det här är en NoSQL-databas i Firestore. Samlingarna är uppbyggda av dokument som register.

För att skapa en ny samling, klicka på Starta insamlingen knappen och ange ett samlings-ID – ett tabellnamn.

Integrera Firebase-användarautentisering

Firebase tillhandahåller direkt autentisering och auktorisering lösningar som är enkla att implementera, såsom leverantörer av sociala inloggningar eller den anpassade leverantören av e-postlösenord.

På ditt projekts översiktssida väljer du Autentisering från listan över produkter som visas. Klicka sedan på Konfigurera inloggningsmetod för att konfigurera Google-leverantören. Välj Google från listan över leverantörer, aktivera det och fyll i e-postmeddelandet för projektsupport.

Skapa en inloggningskomponent

När du är klar med att konfigurera leverantören på Firebase, gå över till din projektmapp och skapa en ny mapp, komponenter, i /src katalog. Inuti komponenter mapp, skapa en ny fil: SignIn.js.

I den SignIn.js fil, lägg till koden nedan:

importera Reagera från'reagera';
importera { signInWithPopup } från"firebase/auth";
importera { auth, provider } från'../firebase-config'

fungeraLogga in() {
konst signInWithGoogle = () => {
 signInWithPopup (auth, provider)
 };
lämna tillbaka (


Logga in med Google</button>
 </div>
 )
}
exporterastandard Logga in

• Den här koden importerar autentiserings- och Google-leverantörsobjekten som du initierade i Firebase-konfigurationsfilen.
• Den definierar sedan a Logga in funktion som implementerar logga inMedPopup metod från Firebase som tar in autentisering och leverantör komponenter som parametrar. Den här funktionen kommer att autentisera användare med deras sociala inloggningar på Google.
• Slutligen returnerar den en div som innehåller en knapp som, när den klickas, anropar logga in med Google fungera.

Skapa en chattkomponent

Denna komponent kommer att inrymma huvudfunktionen i din chattapplikation, chattfönstret. Skapa en ny fil inuti komponenter mapp och namnge den Chat.js.

Lägg till koden nedan i Chat.js Fil:

importera Reagera, { useState, useEffect } från'reagera'
importera { db, auth } från'../firebase-config'
importera Skicka meddelande från'./Skicka meddelande'
importera { collection, query, limit, orderBy, onSnapshot } från"firebase/firestore";
fungeraChatt() {
konst [meddelanden, setMessages] = useState([])
konst { användar-ID } = auth.currentUser
 useEffect(() => {
konst q = fråga(
 samling (db, "meddelanden"),
 sortera efter("skapad vid"),
 begränsa(50)
 );
konst data = onSnapshot (q, (QuerySnapshot) => {
låta meddelanden = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (meddelanden) 

 });
lämna tillbaka() => data; 

 }, []);

lämna tillbaka (


 auth.signOut()}>Logga ut</button>
 {meddelanden && meddelanden.map((meddelande, id, uid, photoURL) =>
 nyckel={id} 
 klassnamn={`medd ${userID auth.currentUser.uid? "skickat": 'mottagen'}`}>

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

 </div>
 )
}
exporterastandard Chatt

• Denna kod importerar databasen, autentiseringskomponenterna initierade i firebase-config.js fil och Firestore anpassade metoder som gör det enkelt att manipulera lagrad data.
• Den implementerar samling, fråga, begränsa, sortera efter, och på Snapshot Firestore-metoder för att fråga efter och fånga en ögonblicksbild av de för närvarande lagrade data i Firestore-meddelandesamlingen, sorterade efter den tidpunkt då de skapades, och läser endast de 50 senaste meddelandena.
• Firestore-metoderna är inlindade och körs i en useEffect krok för att säkerställa att meddelandena renderas omedelbart, varje gång du trycker på skicka-knappen, utan att uppdatera sidfönstret. När informationen väl har lästs lagras den i meddelandestatus.
• Den kontrollerar sedan för att skilja mellan skickade och mottagna meddelanden - om användar-ID som lagrats med meddelandet matchar användar-ID för den inloggade användaren, och anger därefter klassnamnet och tillämpar lämplig stil för meddelande.
• Slutligen återger den meddelandena, en logga ut knappen och Skicka meddelande komponent. De logga ut knapp påKlicka hanteraren anropar auth.signOut() metod som tillhandahålls av Firebase.

Skapa en Skicka meddelande-komponent

Skapa en ny fil, SendMessage.js fil och lägg till koden nedan:

importera Reagera, { useState } från'reagera'
importera { db, auth } från'../firebase-config'
importera { collection, addDoc, serverTimestamp} från"firebase/firestore";
fungeraSkicka meddelande() {
konst [msg, setMsg] = useState('')
konst meddelandenRef = samling (db, "meddelanden");

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

vänta addDoc (meddelandenRef, {
 text: msg,
 skapad vid: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };
lämna tillbaka (



'Meddelande...'
 typ="text" värde={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />
Skicka</button>
 </div>
 )
}
exporterastandard Skicka meddelande

• Liknar Chat.js komponent, importera Firestore-metoderna och de initierade databasen och autentiseringskomponenterna.
• För att skicka meddelanden, Skicka meddelande funktionen implementerar addDoc Firestore-metod som skapar ett nytt dokument i databasen och lagrar överförd data.
• De addDoc metod tar in två parametrar, dataobjektet och ett referensobjekt som anger vilken samling du vill lagra data. Firestore-insamlingsmetoden anger insamlingen för att lagra data.
• Slutligen återger den ett inmatningsfält och en knapp på webbsidan så att användare kan skicka meddelanden till databasen.

Importera komponenterna i filen App.js

Slutligen, i din App.js fil, importera Logga in och Chatt komponenter för att återge dem i din webbläsare.

I din App.js fil, ta bort boilerplate-koden och lägg till koden nedan:

importera Chatt från'./components/Chat';
importera Logga in från'./components/SignIn';
importera { auth } från'./firebase-config.js'
importera { useAuthState } från'react-firebase-hooks/auth'
fungeraApp() {
konst [användare] = useAuthState (auth)
lämna tillbaka (
 <>
 {användare? <Chatt />: <Logga in />}
 </>
 );
}
exporterastandard App; 

Denna kod återger Logga in och Chatt komponenter villkorligt genom att kontrollera autentiseringsstatusen för en användare. Autentiseringsstatusen destruktureras från Firebase-autentiseringskomponenten med hjälp av useAuthState krok från reagera-firebase-krokar paket.

Den kontrollerar om en användare är autentiserad och återger Chatt komponent annars Logga in komponenten återges. Slutligen, lägg till alla CSS-stilar, snurra upp utvecklingsservern för att spara ändringarna och gå över till din webbläsare för att se de slutliga resultaten.

Firebase serverlösa funktioner

Firebase tillhandahåller en rad funktioner utöver en realtidsdatabas och autentisering. Du kan använda dess serverlösa funktioner för att snabbt starta och skala alla program. Firebase integreras dessutom sömlöst med både webb- och mobilapplikationer, vilket gör det enkelt att bygga plattformsöverskridande applikationer.