Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Hast du dich jemals gefragt, wie WhatsApp funktioniert? Oder wie sich verschiedene Benutzer in Chats verbinden und Nachrichten austauschen? Das Erstellen einer vereinfachten Chat-Anwendung kann eine großartige Möglichkeit sein, die Kernfunktionen hinter Chat-Anwendungen zu verstehen.

Das Erstellen einer Chat-App kann wie eine entmutigende Aufgabe erscheinen, aber Firebase vereinfacht den Prozess. Es ermöglicht Ihnen, jede Anwendung schnell zu booten, wodurch die Notwendigkeit eines benutzerdefinierten Backends oder einer Datenbankeinrichtung entfällt.

Was ist die Firebase Cloud-Datenbank?

Firebase ist eine Cloud-basierte Entwicklungsplattform, die eine Reihe von Backend-Diensten wie eine Echtzeitdatenbank, Authentifizierung und Hosting bietet. Der Kern seiner Datenbankdienste ist eine NoSQL-Cloud-Datenbank, die ein Dokumentenmodell verwendet, um Daten in Echtzeit zu speichern.

instagram viewer

Richten Sie das Firebase-Projekt und den React-Client ein

Sie können den hier verfügbaren Chat-Anwendungscode überprüfen GitHub-Repository und es ist kostenlos für die Verwendung unter der MIT-Lizenz. Stellen Sie sicher, dass Sie Firebase konfigurieren, bevor Sie die Anwendung ausführen.

Um zu beginnen, gehen Sie zu Firebase und melden Sie sich für ein Konto an. Klicken Sie im Benutzer-Dashboard auf Projekt erstellen ein neues Projekt aufzusetzen.

Nachdem Sie Ihr Projekt erstellt haben, wählen Sie das Code-Symbol auf der Übersichtsseite des Projekts aus und klicken Sie darauf, um Ihre Anwendung zu registrieren. Durch die Registrierung bei Firebase können Sie auf dessen Ressourcen zugreifen und diese nutzen, um Ihre React-Web-App zu erstellen.

Beachten Sie die Anweisungen zur Integration des SDK von Firebase in Ihr Projekt unter Fügen Sie das Firebase-SDK hinzu.

Nächste, Erstellen Sie eine React-Anwendung und installieren Sie das Firebase SDK in Ihrer Anwendung. Importieren Sie außerdem die reagieren-Firebase-Hooks Paket, das die Arbeit mit Firebase In React vereinfacht.

npm installiere Firebase React-Firebase-Hooks

Konfigurieren Sie Firebase in Ihrer React-Anwendung

In deinem Quelle Verzeichnis, erstellen Sie eine neue Datei und benennen Sie sie, firebase-config.js. Kopieren Sie die Umgebungsvariablen aus Ihrem Firebase-Projekt-Dashboard und fügen Sie sie in diese Datei ein.

importieren { App initialisieren } aus"Firebase/App";
importieren { getFirestore } aus'@firebase/firestore';
importieren { getAuth, GoogleAuthProvider } aus"firebase/auth";
konst firebaseConfig = {
 API-Schlüssel: "API-SCHLÜSSEL",
 authDomain: "AuthDomain",
 Projekt-ID: "Projekt-ID",
 SpeicherEimer: "speichereimer",
 MessagingSenderId: "Messaging-Absender-ID",
 appId: "App-ID"
};
konst app = initializeApp (firebaseConfig);
konst db = getFirestore (App);
konst auth = getAuth (App)
konst Anbieter = neu GoogleAuthProvider();
Export {Datenbank, Authentifizierung, Anbieter}

Mithilfe der Konfiguration Ihres Firebase-Projekts initialisieren Sie die Firebase-, Firestore- und Firebase-Authentifizierungsfunktionen für die Verwendung in Ihrer App.

Richten Sie eine Firestore-Datenbank ein

Diese Datenbank speichert Benutzerdaten und Chatnachrichten. Gehen Sie zu Ihrer Projektübersichtsseite und klicken Sie auf Datenbank erstellen Schaltfläche, um Ihren Cloud Firestore einzurichten.

Definieren Sie den Datenbankmodus und den Speicherort.

Aktualisieren Sie zuletzt die Firestore-Datenbankregeln, um Lese- und Schreibvorgänge von der React-Anwendung zuzulassen. Klick auf das Regeln Registerkarte und ändern Sie die lesen und Schreiben Regel zu WAHR.

Nachdem Sie die Datenbank eingerichtet haben, können Sie eine Demo-Sammlung erstellen – dies ist eine NoSQL-Datenbank in Firestore. Die Sammlungen bestehen aus Dokumenten als Aufzeichnungen.

Um eine neue Sammlung zu erstellen, klicken Sie auf Sammlung starten und geben Sie eine Sammlungs-ID an – einen Tabellennamen.

Integrieren Sie die Firebase-Benutzerauthentifizierung

Firebase bietet Out-of-the-Box Authentifizierung und Autorisierung Lösungen, die einfach zu implementieren sind, wie Social-Login-Anbieter oder der benutzerdefinierte E-Mail-Passwort-Anbieter.

Wählen Sie auf der Übersichtsseite Ihres Projekts aus Authentifizierung aus der Liste der angezeigten Produkte. Klicken Sie anschließend auf die Anmeldemethode einrichten Schaltfläche zum Konfigurieren des Google-Anbieters. Wählen Sie Google aus der Liste der Anbieter aus, aktivieren Sie es und füllen Sie die Projektsupport-E-Mail aus.

Erstellen Sie eine Anmeldekomponente

Wenn Sie mit der Konfiguration des Anbieters auf Firebase fertig sind, gehen Sie zu Ihrem Projektordner und erstellen Sie einen neuen Ordner. Komponenten, im /src Verzeichnis. Im Inneren des Komponenten Ordner, erstellen Sie eine neue Datei: SignIn.js.

Im SignIn.js Datei, fügen Sie den folgenden Code hinzu:

importieren Reagieren aus'reagieren';
importieren { signInWithPopup } aus"firebase/auth";
importieren { Authentifizierung, Anbieter } aus'../firebase-config'

FunktionAnmelden() {
konst signInWithGoogle = () => {
 signInWithPopup (Authentifizierung, Anbieter)
 };
zurückkehren (




ExportStandard Anmelden
  • Dieser Code importiert die Authentifizierungs- und Google-Anbieterobjekte, die Sie in der Firebase-Konfigurationsdatei initialisiert haben.
  • Es definiert dann a Anmelden Funktion, die die implementiert signInWithPopup Methode von Firebase, die die Authentifizierung Und Anbieter Komponenten als Parameter. Diese Funktion authentifiziert Benutzer mit ihren Google Social Logins.
  • Schließlich gibt es ein div zurück, das eine Schaltfläche enthält, die, wenn sie angeklickt wird, die aufruft Anmeldung mit Google Funktion.

Erstellen Sie eine Chat-Komponente

Diese Komponente beherbergt die Hauptfunktion Ihrer Chat-Anwendung, das Chat-Fenster. Erstellen Sie eine neue Datei in der Komponenten Ordner und benennen Sie ihn Chat.js.

Fügen Sie den folgenden Code in die ein Chat.js Datei:

importieren Reagieren, { useState, useEffect } aus'reagieren'
importieren {db, auth} aus'../firebase-config'
importieren Nachricht senden aus'./Nachricht senden'
importieren {Sammlung, Abfrage, Limit, OrderBy, OnSnapshot} aus"Feuerbasis/Feuerlager";
FunktionPlaudern() {
konst [Nachrichten, setMessages] = useState([])
konst { userID } = auth.aktuellerBenutzer
 useEffect(() => {
konst q = Abfrage (
 Sammlung (db, "Mitteilungen"),
 Sortieren nach("hergestellt in"),
 Grenze(50)
 );
konst data = onSnapshot (q, (QuerySnapshot) => {
lassen Nachrichten = [];
 QuerySnapshot.forEach((Dok) => {
 messages.push({ ...doc.data(), Ausweis: doc.id });
 });
 setMessages (Nachrichten) 

 });
zurückkehren() => Daten; 

 }, []);

zurückkehren (
  • Dieser Code importiert die Datenbank, in der die Authentifizierungskomponenten initialisiert werden firebase-config.js -Datei und benutzerdefinierte Firestore-Methoden, mit denen die gespeicherten Daten einfach bearbeitet werden können.
  • Es implementiert die Sammlung, Anfrage, Grenze, Sortieren nach, Und onSnapshot Firestore-Methoden zum Abfragen und Erfassen eines Snapshots der aktuell gespeicherten Daten in der Firestore-Nachrichtensammlung, geordnet nach dem Zeitpunkt ihrer Erstellung, und liest nur die 50 neuesten Nachrichten.
  • Die Firestore-Methoden sind verpackt und werden innerhalb von a ausgeführt useEffect Hook, um sicherzustellen, dass die Nachrichten jedes Mal sofort gerendert werden, wenn Sie auf die Schaltfläche „Senden“ klicken, ohne das Seitenfenster zu aktualisieren. Nachdem die Daten gelesen wurden, werden sie im Nachrichtenstatus gespeichert.
  • Es prüft dann, um zwischen gesendeten und empfangenen Nachrichten zu unterscheiden – ob die mit der Nachricht gespeicherte Benutzer-ID übereinstimmt die Benutzer-ID für den angemeldeten Benutzer und legt danach den Klassennamen fest und wendet das entsprechende Styling für die an Nachricht.
  • Zuletzt werden die Nachrichten gerendert, a austragen Schaltfläche und die Nachricht senden Komponente. Der austragen Taste onClick Handler ruft die auth.signOut() von Firebase bereitgestellte Methode.

Erstellen Sie eine Send Message-Komponente

Erstellen Sie eine neue Datei, SendMessage.js Datei, und fügen Sie den folgenden Code hinzu:

importieren Reagieren, { useState } aus'reagieren'
importieren {db, auth} aus'../firebase-config'
importieren {Sammlung, addDoc, serverTimestamp} aus"Feuerbasis/Feuerlager";
FunktionNachricht senden() {
konst [msg, setMsg] = useState('')
konst messagesRef = Sammlung (db, "Mitteilungen");

konst sendMsg = asynchron (e) => {
konst { uid, photoURL } = auth.aktuellerBenutzer

erwarten addDoc (messagesRef, {
 Text: Nachricht,
 erstelltbei: serverTimestamp(),
 uid: uid,
 Foto-URL: Foto-URL
 })
 setMsg('');
 };


zurückkehren (




'Nachricht...'
 Typ="Text" value={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />


ExportStandard Nachricht senden
  • Ähnlich wie Chat.js Importieren Sie die Firestore-Methoden und die initialisierten Datenbank- und Authentifizierungskomponenten.
  • Um Nachrichten zu senden, die Nachricht senden Funktion implementiert die addDoc Firestore-Methode, die ein neues Dokument in der Datenbank erstellt und die übergebenen Daten speichert.
  • Der addDoc -Methode übernimmt zwei Parameter, das Datenobjekt und ein Referenzobjekt, das angibt, in welcher Sammlung Sie die Daten speichern möchten. Die Firestore-Erfassungsmethode gibt die Sammlung zum Speichern von Daten an.
  • Schließlich werden ein Eingabefeld und eine Schaltfläche auf der Webseite gerendert, damit Benutzer Nachrichten an die Datenbank senden können.

Importieren Sie die Komponenten in die App.js-Datei

Zu guter Letzt in Ihrer App.js Datei, importieren Sie die Anmelden Und Plaudern Komponenten, um sie in Ihrem Browser darzustellen.

In deinem App.js Datei, löschen Sie den Boilerplate-Code und fügen Sie den folgenden Code hinzu:

importieren Plaudern aus'./komponenten/Chat';
importieren Anmelden aus'./components/SignIn';
importieren { Authentifizierung } aus'./firebase-config.js'
importieren { useAuthState } aus'react-firebase-hooks/auth'
FunktionApp() {
konst [Benutzer] = useAuthState (Auth)
zurückkehren (
 <>
 {Benutzer? <Plaudern />: <Anmelden />}
 </>
 );
}
ExportStandard Anwendung;

Dieser Code rendert die Anmelden Und Plaudern Komponenten bedingt, indem der Authentifizierungsstatus eines Benutzers überprüft wird. Der Authentifizierungsstatus wird von der Firebase-Authentifizierungskomponente mit Hilfe der destrukturiert useAuthState Haken aus der reagieren-Firebase-Hooks Paket.

Es prüft, ob ein Benutzer authentifiziert ist, und rendert die Plaudern Komponente sonst die Anmelden Komponente gerendert wird. Fügen Sie schließlich beliebige CSS-Stile hinzu, starten Sie den Entwicklungsserver, um die Änderungen zu speichern, und gehen Sie zu Ihrem Browser, um die Endergebnisse anzuzeigen.

Serverlose Firebase-Funktionen

Firebase bietet eine Reihe von Funktionen, die über eine Echtzeitdatenbank und Authentifizierung hinausgehen. Sie können die serverlosen Funktionen verwenden, um jede Anwendung schnell zu booten und zu skalieren. Darüber hinaus lässt sich Firebase nahtlos sowohl in Web- als auch in mobile Anwendungen integrieren, wodurch es einfach ist, plattformübergreifende Anwendungen zu erstellen.