Heb je je ooit afgevraagd hoe WhatsApp werkt? Of hoe verschillende gebruikers verbinding maken en berichten uitwisselen in chats? Het maken van een vereenvoudigde chattoepassing kan een goede manier zijn om de kernfunctionaliteiten achter chattoepassingen te begrijpen.
Het bouwen van een chat-app kan een ontmoedigende taak lijken, maar Firebase vereenvoudigt het proces. Het stelt u in staat om elke toepassing snel op te starten, waardoor een aangepaste backend of een database-installatie niet meer nodig is.
Wat is Firebase Cloud-database
Firebase is een cloudgebaseerd ontwikkelingsplatform dat een scala aan backend-services biedt, zoals een realtime database, authenticatie en hosting. De kern van zijn databaseservices is een NoSQL-clouddatabase die een documentmodel gebruikt om gegevens in realtime op te slaan.
Stel het Firebase-project en de React-client in
U kunt de beschikbare chattoepassingscode bekijken GitHub-opslagplaats en het is gratis voor gebruik onder de MIT-licentie. Zorg ervoor dat u Firebase configureert voordat u de toepassing uitvoert.
Ga om te beginnen naar Vuurbasis en meld je aan voor een account. Klik op het gebruikersdashboard Project aanmaken om een nieuw project op te zetten.
Selecteer en klik na het aanmaken van uw project op het codepictogram op de overzichtspagina van het project om uw aanvraag te registreren. Als u zich registreert bij Firebase, krijgt u toegang tot de bronnen en kunt u deze gebruiken om uw React-webapp te bouwen.
Bekijk de instructies voor het integreren van de SDK van Firebase in uw project hieronder Firebase-SDK toevoegen.
Volgende, maak een React-applicatie en installeer de Firebase SDK in uw applicatie. Importeer bovendien de reageren-firebase-haken pakket dat het werken met Firebase In React vereenvoudigt.
npm installeer firebase react-firebase-hooksConfigureer Firebase in uw React-toepassing
In uw src directory, maak een nieuw bestand aan en geef het een naam, firebase-config.js. Kopieer de omgevingsvariabelen van uw firebase-projectdashboard en plak ze in dit bestand.
importeren { app initialiseren } van"firebase/app";
importeren { haalFirestore } van'@firebase/firestore';
importeren {getAuth, GoogleAuthProvider} van"firebase/authenticatie";const firebaseConfig = {
API sleutel: "API SLEUTEL",
authDomein: "authDomein",
projectId: "project-ID",
opslagEmmer: "opbergemmer",
messagingSenderId: "messang afzender-ID",
appId: "App-ID"
};
const app = app initialiseren (firebaseConfig);
const db = getFirestore (app);
const auth = getAuth (app)
const aanbieder = nieuw GoogleAuthProvider();
exporteren {db, auth, provider}
Met behulp van de configuratie van uw Firebase-project initialiseert u de Firebase-, Firestore- en Firebase-authenticatiefuncties voor gebruik binnen uw app.
Stel een Firestore-database in
In deze database worden gebruikersgegevens en chatberichten opgeslagen. Ga naar uw projectoverzichtspagina en klik op Maak een databank aan knop om uw Cloud Firestore in te stellen.
Definieer de databasemodus en -locatie.
Werk ten slotte de Firestore-databaseregels bij om lees- en schrijfbewerkingen van de React-toepassing mogelijk te maken. Klik op de Reglement tabblad en verander de lezen en schrijven regel naar WAAR.
Als u klaar bent met het instellen van de database, kunt u een democollectie maken - dit is een NoSQL-database in Firestore. De collecties zijn opgebouwd uit documenten als archiefstukken.
Om een nieuwe collectie aan te maken, klikt u op de Verzameling starten knop en geef een verzamelings-ID op — een tabelnaam.
Integreer Firebase-gebruikersauthenticatie
Firebase biedt out-of-the-box authenticatie en authorisatie oplossingen die eenvoudig te implementeren zijn, zoals providers van sociale logins of de aangepaste e-mailwachtwoordprovider.
Selecteer op de overzichtspagina van uw project Authenticatie uit de lijst met weergegeven producten. Klik vervolgens op de Aanmeldingsmethode instellen knop om de Google-provider te configureren. Selecteer Google in de lijst met providers, schakel het in en vul de e-mail voor projectondersteuning in.
Maak een aanmeldingscomponent
Als u klaar bent met het configureren van de provider op Firebase, gaat u naar uw projectmap en maakt u een nieuwe map. componenten, in de /src map. Binnen in de componenten map, maak een nieuw bestand aan: SignIn.js.
In de SignIn.js bestand, voeg onderstaande code toe:
importeren Reageer van'Reageer';
importeren { signInWithPopup } van"firebase/authenticatie";
importeren {authenticatie, provider} van'../firebase-configuratie'
functieAanmelden() {
const signInWithGoogle = () => {
signInWithPopup (authenticatie, provider)
};
opbrengst (
exporterenstandaard Aanmelden
- Deze code importeert de authenticatie- en Google-providerobjecten die u hebt geïnitialiseerd in het Firebase-configuratiebestand.
- Het definieert dan een Aanmelden functie die de signInWithPopup methode van Firebase die de authenticatie En aanbieder componenten als parameters. Deze functie authenticeert gebruikers met hun sociale Google-logins.
- Ten slotte retourneert het een div met een knop die, wanneer erop wordt geklikt, het signInMetGoogle functie.
Maak een chatcomponent
Dit onderdeel bevat het belangrijkste kenmerk van uw chattoepassing, het chatvenster. Maak een nieuw bestand aan in het componenten map en geef deze een naam Chat.js.
Voeg de onderstaande code toe aan de Chat.js Bestand:
importeren Reageren, { useState, useEffect } van'Reageer'
importeren { db, authenticatie } van'../firebase-configuratie'
importeren Bericht versturen van'./Bericht versturen'
importeren { verzameling, query, limiet, orderBy, onSnapshot } van"firebase/firestore";functieChatten() {
const [berichten, setBerichten] = useState([])
const { userID } = auth.currentUser
gebruikEffect(() => {
const q = vraag(
verzameling (db, "berichten"),
bestelDoor("gemaakt bij"),
begrenzing(50)
);
const data = onSnapshot (q, (QuerySnapshot) => {
laten berichten = [];
QuerySnapshot.forEach((doc) => {
berichten.push({ ...doc.data(), ID kaart: doc.id });
});
setMessages (berichten)
});
opbrengst() => gegevens;
}, []);
opbrengst (
- Deze code importeert de database, de authenticatiecomponenten die zijn geïnitialiseerd in de firebase-config.js bestand en Firestore aangepaste methoden die het gemakkelijk maken om de opgeslagen gegevens te manipuleren.
- Het implementeert de verzameling, vraag, begrenzing, bestelDoor, En opSnapshot Firestore-methoden voor het opvragen en vastleggen van een momentopname van de momenteel opgeslagen gegevens in de Firestore-berichtenverzameling, gesorteerd op het moment waarop ze zijn gemaakt, en leest alleen de 50 meest recente berichten.
- De Firestore-methoden zijn verpakt en worden uitgevoerd in een gebruikEffect hook om ervoor te zorgen dat de berichten onmiddellijk worden weergegeven, elke keer dat u op de verzendknop drukt, zonder het paginavenster te vernieuwen. Zodra de gegevens zijn gelezen, worden deze opgeslagen in de berichtenstatus.
- Het controleert vervolgens om onderscheid te maken tussen verzonden en ontvangen berichten - als de gebruikers-ID die bij het bericht is opgeslagen, overeenkomt de gebruikers-ID voor de ingelogde gebruiker, en stelt daarna de klassenaam in en past de juiste stijl toe voor de bericht.
- Ten slotte geeft het de berichten weer, a afmelden knop, en de Bericht versturen bestanddeel. De afmelden knop bij klikken begeleider belt de auth.signOut() methode geleverd door Firebase.
Maak een Send Message-component
Maak een nieuw bestand aan, SendMessage.js bestand en voeg de onderstaande code toe:
importeren Reageer, { useState } van'Reageer'
importeren { db, authenticatie } van'../firebase-configuratie'
importeren {verzameling, addDoc, serverTimestamp} van"firebase/firestore";functieBericht versturen() {
const [msg, setMsg] = useState('')
const messagesRef = verzameling (db, "berichten");
const stuur bericht = asynchroon (e) => {
const { uid, photoURL } = auth.currentUser
wachten addDoc (berichtenRef, {
tekst: bericht,
aangemaaktAt: serverTimestamp(),
uid: uid,
fotoURL: fotoURL
})
setMsg('');
};opbrengst (
'Bericht...'
type="tekst" waarde={bericht}
onChange={(e) => setMsg (e.target.value)}
/>
exporterenstandaard Bericht versturen
- Vergelijkbaar met de Chat.js component, importeert u de Firestore-methoden en de geïnitialiseerde database- en authenticatiecomponenten.
- Om berichten te verzenden, de Bericht versturen functie implementeert de addDoc Firestore-methode die een nieuw document in de database maakt en de doorgegeven gegevens opslaat.
- De addDoc methode neemt twee parameters in, het gegevensobject en een referentieobject dat aangeeft in welke verzameling u de gegevens wilt opslaan. De Firestore-verzamelingsmethode specificeert de verzameling om gegevens op te slaan.
- Ten slotte geeft het een invoerveld en een knop op de webpagina weer waarmee gebruikers berichten naar de database kunnen verzenden.
Importeer de componenten in het App.js-bestand
Als laatste in uw App.js bestand, importeer het Aanmelden En Chatten componenten om ze in uw browser weer te geven.
In uw App.js bestand, verwijder de boilerplate-code en voeg de onderstaande code toe:
importeren Chatten van'./componenten/Chat';
importeren Aanmelden van'./componenten/Aanmelden';
importeren { autorisatie } van'./firebase-config.js'
importeren {gebruikAuthState} van'react-firebase-hooks/auth'
functieapp() {
const [gebruiker] = useAuthState (authenticatie)
opbrengst (
<>
{gebruiker? <Chatten />: <Aanmelden />}
</>
);
}
exporterenstandaard App; Deze code geeft de Aanmelden En Chatten componenten voorwaardelijk door de authenticatiestatus van een gebruiker te controleren. De authenticatiestatus wordt gedestructureerd van de Firebase-authenticatiecomponent met behulp van de gebruikAuthState haak van de reageren-firebase-haken pakket.
Het controleert of een gebruiker is geverifieerd en geeft het Chatten onderdeel anders de Aanmelden onderdeel wordt weergegeven. Voeg ten slotte CSS-stijlen toe, start de ontwikkelingsserver om de wijzigingen op te slaan en ga naar uw browser om de uiteindelijke resultaten te bekijken.
Firebase serverloze functionaliteiten
Firebase biedt een scala aan functies die verder gaan dan een realtime database en authenticatie. U kunt de serverloze functionaliteiten gebruiken om elke toepassing snel op te starten en te schalen. Bovendien integreert Firebase naadloos met zowel web- als mobiele applicaties, waardoor het eenvoudig is om platformonafhankelijke applicaties te bouwen.