Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Te-ai întrebat vreodată cum funcționează WhatsApp? Sau cum diferiți utilizatori se conectează și schimbă mesaje în chat-uri? Crearea unei aplicații de chat simplificată poate fi o modalitate excelentă de a înțelege funcționalitățile de bază din spatele aplicațiilor de chat.

Crearea unei aplicații de chat poate părea o sarcină descurajantă, totuși, Firebase simplifică procesul. Vă permite să porniți rapid orice aplicație, eliminând necesitatea unui backend personalizat sau a unei setări de bază de date.

Ce este Firebase Cloud Database

Firebase este o platformă de dezvoltare bazată pe cloud care oferă o gamă largă de servicii backend, cum ar fi o bază de date în timp real, autentificare și găzduire. În centrul serviciilor sale de baze de date se află o bază de date cloud NoSQL care utilizează un model de document pentru a stoca date în timp real.

instagram viewer

Configurați proiectul Firebase și clientul React

Puteți consulta codul aplicației de chat disponibil pe aceasta Depozitul GitHub și este gratuit pentru utilizare sub licența MIT. Asigurați-vă că configurați Firebase înainte de a rula aplicația.

Pentru a începe, mergeți la Firebase și înscrieți-vă pentru un cont. În tabloul de bord al utilizatorului, faceți clic Creați proiect pentru a pune la punct un nou proiect.

După crearea proiectului, selectați și faceți clic pe pictograma codului de pe pagina de prezentare generală a proiectului pentru a vă înregistra aplicația. Înregistrarea la Firebase vă permite să accesați și să utilizați resursele sale pentru a vă crea aplicația web React.

Rețineți instrucțiunile pentru integrarea SDK-ului Firebase în proiectul dvs. de mai jos Adăugați setul SDK Firebase.

Următorul, creați o aplicație React și instalați SDK-ul Firebase în aplicația dvs. În plus, importați reacţionează-foc-bază-cârlige pachet care simplifică lucrul cu Firebase In React.

npm instalează firebase react-firebase-hooks

Configurați Firebase în aplicația dvs. React

În dumneavoastră src director, creați un fișier nou și denumiți-l, firebase-config.js. Copiați variabilele de mediu din tabloul de bord al proiectului Firebase și inserați-le în acest fișier.

import { initializeApp } din„firebase/aplicație”;
import { getFirestore } din„@firebase/firestore”;
import { getAuth, GoogleAuthProvider } din"firebase/auth";
const firebaseConfig = {
 apiKey: „API_KEY”,
 authDomain: „authDomain”,
 projectId: „ID proiect”,
 găleată de stocare: "găleată de depozitare",
 messagingSenderId: „ID-ul expeditorului de mesagerie”,
 appId: „ID aplicație”
};
const app = initializeApp (firebaseConfig);
const db = getFirestore (aplicație);
const auth = getAuth (aplicație)
const furnizor = nou GoogleAuthProvider();
export {db, auth, provider}

Folosind configurația proiectului Firebase, inițializați funcțiile de autentificare Firebase, Firestore și Firebase pentru utilizare în aplicația dvs.

Configurați o bază de date Firestore

Această bază de date va stoca datele utilizatorului și mesajele de chat. Mergeți la pagina de prezentare generală a proiectului și faceți clic pe Creați o bază de date butonul pentru a configura Cloud Firestore.

Definiți modul și locația bazei de date.

În cele din urmă, actualizați regulile bazei de date Firestore pentru a permite operațiuni de citire și scriere din aplicația React. Faceți clic pe Reguli fila și schimbați Citeste si scrie regula la Adevărat.

După ce ați terminat de configurat baza de date, puteți crea o colecție demonstrativă - aceasta este o bază de date NoSQL în Firestore. Colecțiile sunt alcătuite din documente ca înregistrări.

Pentru a crea o nouă colecție, faceți clic pe Începeți colectarea butonul și furnizați un ID de colecție — un nume de tabel.

Integrați Firebase User Authentication

Firebase oferă ieșit din cutie autentificare și autorizare soluții care sunt ușor de implementat, cum ar fi furnizorii de autentificare socială sau furnizorul de e-mail-parolă personalizat.

Pe pagina de prezentare generală a proiectului dvs., selectați Autentificare din lista de produse afisata. Apoi, faceți clic pe Configurați metoda de conectare butonul pentru a configura furnizorul Google. Selectați Google din lista de Furnizori, activați-l și completați e-mailul de asistență pentru proiect.

Creați o componentă de conectare

După ce ați terminat de configurat furnizorul pe Firebase, mergeți la dosarul proiectului și creați un dosar nou, componente, în /src director. În interiorul componente folder, creați un fișier nou: SignIn.js.

În SignIn.js fișier, adăugați codul de mai jos:

import Reacţiona din'reacţiona';
import { signInWithPopup } din"firebase/auth";
import { auth, provider } din„../firebase-config”

funcţieConectare() {
const signInWithGoogle = () => {
 signInWithPopup (autentificare, furnizor)
 };
întoarcere (




exportMod implicit Conectare
  • Acest cod importă obiectele de autentificare și furnizorul Google pe care le-ați inițializat în fișierul de configurare Firebase.
  • Apoi definește a Conectare funcția care implementează signInWithPopup metoda de la Firebase care preia autentificare și furnizor componentele ca parametri. Această funcție va autentifica utilizatorii cu datele lor de conectare sociale Google.
  • În cele din urmă, returnează un div care conține un buton care, atunci când este apăsat, apelează signInWithGoogle funcţie.

Creați o componentă de chat

Această componentă va găzdui caracteristica principală a aplicației dvs. Chat, fereastra de chat. Creați un fișier nou în interiorul componente folder și denumește-l Chat.js.

Adăugați codul de mai jos în Chat.js Fişier:

import Reacționează, { useState, useEffect } din'reacţiona'
import { db, auth } din„../firebase-config”
import Trimite mesaj din'./Trimite mesaj'
import { colecție, interogare, limită, orderBy, onSnapshot } din"firebase/firestore";
funcţieconversație() {
const [mesaje, setMessages] = useState([])
const { userID } = auth.currentUser
 useEffect(() => {
const q = interogare(
 colectare (db, "mesaje"),
 comanda de("creat la"),
 limită(50)
 );
const date = onSnapshot (q, (QuerySnapshot) => {
lăsa mesaje = [];
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), id: doc.id });
 });
 setMessages (mesaje) 

 });
întoarcere() => date; 

 }, []);

întoarcere (
  • Acest cod importă baza de date, componentele de autentificare inițializate în firebase-config.js fișier și metode personalizate Firestore care facilitează manipularea datelor stocate.
  • Acesta implementează Colectie, interogare, limită, comandaDe, și onSnapshot Metode Firestore pentru a interoga și a captura un instantaneu al datelor stocate în prezent în colecția de mesaje Firestore, ordonate în funcție de momentul în care au fost create și citește doar cele mai recente 50 de mesaje.
  • Metodele Firestore sunt împachetate și rulate în interiorul unui useEffect cârlig pentru a vă asigura că mesajele sunt redate imediat, de fiecare dată când apăsați butonul de trimitere, fără a reîmprospăta fereastra paginii. Odată ce datele sunt citite, acestea sunt stocate în starea mesajelor.
  • Apoi verifică pentru a face diferența între mesajele trimise și primite - dacă ID-ul de utilizator stocat cu mesajul se potrivește ID-ul utilizatorului pentru utilizatorul conectat și, ulterior, setează numele clasei și aplică stilul adecvat pentru mesaj.
  • În cele din urmă, redă mesajele, a sign out butonul, iar butonul Trimite mesaj componentă. The sign out buton onClick handlerul apelează auth.signOut() metoda oferită de Firebase.

Creați o componentă Trimitere mesaj

Creați un fișier nou, SendMessage.js fișier și adăugați codul de mai jos:

import Reacționează, { useState } din'reacţiona'
import { db, auth } din„../firebase-config”
import { colecție, addDoc, serverTimestamp} din"firebase/firestore";
funcţieTrimite mesaj() {
const [msg, setMsg] = useState('')
const messagesRef = colecție (db, "mesaje");

const trimiteMsg = asincron (e) => {
const { uid, photoURL } = auth.currentUser

așteaptă addDoc (messagesRef, {
 text: msj,
 creat la: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };


întoarcere (




'Mesaj...'
 tip="text" valoare={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />


exportMod implicit Trimite mesaj
  • Similar cu Chat.js componentă, importați metodele Firestore și baza de date inițializată și componentele de autentificare.
  • Pentru a trimite mesaje, Trimite mesaj funcția implementează addDoc Metoda Firestore care creează un nou document în baza de date și stochează datele transmise.
  • The addDoc Metoda preia doi parametri, obiectul de date și un obiect de referință care indică ce colecție doriți să stocați datele. Metoda de colectare Firestore specifică colectarea pentru stocarea datelor.
  • În cele din urmă, redă un câmp de intrare și un buton pe pagina web pentru a permite utilizatorilor să trimită mesaje în baza de date.

Importați componentele în fișierul App.js

În cele din urmă, în dvs App.js fișier, importați Conectare și conversație componente pentru a le reda în browserul dvs.

În dumneavoastră App.js fișier, ștergeți codul standard și adăugați codul de mai jos:

import conversație din„./components/Chat”;
import Conectare din„./components/SignIn”;
import { auth } din„./firebase-config.js”
import { useAuthState } din„react-firebase-hooks/auth”
funcţieApp() {
const [utilizator] = useAuthState (auth)
întoarcere (
 <>
 {utilizator? <conversație />: <Conectare />}
 </>
 );
}
exportMod implicit Aplicație;

Acest cod redă Conectare și conversație componente în mod condiționat prin verificarea stării de autentificare a unui utilizator. Starea de autentificare este destructurată din componenta de autentificare Firebase cu ajutorul useAuthState cârlig de la reacţionează-foc-bază-cârlige pachet.

Verifică dacă un utilizator este autentificat și redă conversație componenta altfel Conectare componenta este redată. În cele din urmă, adăugați orice stil CSS, porniți serverul de dezvoltare pentru a salva modificările și mergeți la browser pentru a vedea rezultatele finale.

Funcționalități Firebase Serverless

Firebase oferă o gamă largă de funcții dincolo de o bază de date în timp real și de autentificare. Puteți folosi funcționalitățile sale fără server pentru a porni rapid și a scala orice aplicație. În plus, Firebase se integrează perfect atât cu aplicațiile web, cât și cu cele mobile, facilitând construirea de aplicații multiplatformă.