I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Ti sei mai chiesto come funziona WhatsApp? O come diversi utenti si connettono e scambiano messaggi nelle chat? La creazione di un'applicazione di chat semplificata può essere un ottimo modo per cogliere le funzionalità principali dietro le applicazioni di chat.

La creazione di un'app di chat può sembrare un compito arduo, tuttavia Firebase semplifica il processo. Ti consente di eseguire rapidamente il bootstrap di qualsiasi applicazione, eliminando la necessità di un back-end personalizzato o di una configurazione del database.

Che cos'è Firebase Cloud Database

Firebase è una piattaforma di sviluppo basata su cloud che offre una gamma di servizi di back-end come database in tempo reale, autenticazione e hosting. Al centro dei suoi servizi di database, c'è un database cloud NoSQL che utilizza un modello di documento per archiviare i dati in tempo reale.

instagram viewer

Imposta il progetto Firebase e il client React

Puoi controllare il codice dell'applicazione di chat disponibile su questo Deposito GitHub ed è gratuito per l'utilizzo con licenza MIT. Assicurati di configurare Firebase prima di eseguire l'applicazione.

Per iniziare, vai su Base di fuoco e registrati per un account. Nella dashboard dell'utente, fare clic su Crea progetto per impostare un nuovo progetto.

Dopo aver creato il tuo progetto, seleziona e clicca sull'icona del codice nella pagina di panoramica del progetto per registrare la tua applicazione. La registrazione con Firebase ti consente di accedere e utilizzare le sue risorse per creare la tua app Web React.

Prendi nota delle istruzioni per l'integrazione dell'SDK di Firebase nel tuo progetto in Aggiungi l'SDK di Firebase.

Prossimo, creare un'applicazione React e installa l'SDK Firebase nella tua applicazione. Inoltre, importa il file reagire-firebase-ganci pacchetto che semplifica il lavoro con Firebase In React.

npm install firebase react-firebase-hooks

Configura Firebase nella tua applicazione React

Nel tuo src directory, creare un nuovo file e assegnargli un nome, firebase-config.js. Copia le variabili di ambiente dalla dashboard del progetto Firebase e incollale in questo file.

importare { inizializzaApp } da"firebase/app";
importare { getFirestore } da'@firebase/firestore';
importare { getAuth, GoogleAuthProvider } da"firebase/autenticazione";
cost firebaseConfig = {
 Chiave API: "CHIAVE_API",
 authDominio: "authDomain",
 ID progetto: "ID progetto",
 secchio di stoccaggio: "secchio di stoccaggio",
 messaggisticaSenderId: "ID mittente messaggio",
 ID app: "ID app"
};
cost app = initializeApp (firebaseConfig);
cost db = getFirestore (applicazione);
cost auth = getAuth (app)
cost fornitore = nuovo GoogleAuthProvider();
esportare {db, autenticazione, fornitore}

Utilizzando la configurazione del tuo progetto Firebase, inizializzi le funzioni di autenticazione di Firebase, Firestore e Firebase per l'utilizzo all'interno della tua app.

Imposta un database Firestore

Questo database memorizzerà i dati degli utenti e i messaggi di chat. Vai alla pagina della panoramica del progetto e fai clic su Crea banca dati pulsante per configurare il tuo Cloud Firestore.

Definire la modalità e la posizione del database.

Infine, aggiorna le regole del database Firestore per consentire le operazioni di lettura e scrittura dall'applicazione React. Clicca sul Regole scheda e modificare il file leggere e scrivere regola a VERO.

Una volta terminata la configurazione del database, puoi creare una raccolta demo: si tratta di un database NoSQL in Firestore. Le collezioni sono costituite da documenti come registrazioni.

Per creare una nuova raccolta, fare clic su Inizia la raccolta pulsante e fornire un ID di raccolta, ovvero un nome di tabella.

Integra l'autenticazione utente Firebase

Firebase fornisce out-of-the-box autenticazione e autorizzazione soluzioni facili da implementare come i provider di accesso social o il provider di password e-mail personalizzate.

Nella pagina della panoramica del tuo progetto, seleziona Autenticazione dall'elenco dei prodotti visualizzati. Quindi, fare clic su Imposta il metodo di accesso pulsante per configurare il provider Google. Seleziona Google dall'elenco dei fornitori, abilitalo e compila l'email di supporto del progetto.

Crea un componente di accesso

Una volta terminata la configurazione del provider su Firebase, vai alla cartella del progetto e crea una nuova cartella, componenti, nel /src directory. Dentro il componenti cartella, creare un nuovo file: SignIn.js.

Nel SignIn.js file, aggiungi il codice qui sotto:

importare Reagire da'reagire';
importare { signInWithPopup } da"firebase/autenticazione";
importare { autenticazione, fornitore } da'../firebase-config'

funzioneRegistrazione() {
cost signInWithGoogle = () => {
 signInWithPopup (autenticazione, provider)
 };
ritorno (




esportarepredefinito Registrazione
  • Questo codice importa gli oggetti provider di autenticazione e Google che hai inizializzato nel file di configurazione di Firebase.
  • Quindi definisce a Registrazione funzione che implementa il signInWithPopup metodo da Firebase che accetta il file autenticazione E fornitore componenti come parametri. Questa funzione autenticherà gli utenti con i loro accessi social di Google.
  • Infine, restituisce un div contenente un pulsante che, quando viene cliccato, chiama il file accedi con Google funzione.

Crea un componente chat

Questo componente ospiterà la caratteristica principale della tua applicazione Chat, la finestra di chat. Crea un nuovo file all'interno del file componenti cartella e denominarla Chat.js.

Aggiungi il codice qui sotto nel file Chat.js File:

importare Reagire, {useState, useEffect} da'reagire'
importare { db, aut } da'../firebase-config'
importare Invia messaggio da'./Invia messaggio'
importare {raccolta, query, limite, orderBy, onSnapshot} da"Firebase/Firestore";
funzioneChiacchierata() {
cost [messaggi, setMessaggi] = useState([])
cost { userID } = auth.currentUser
 usaEffetto(() => {
cost q = domanda(
 collezione (db, "messaggi"),
 ordinato da("creato a"),
 limite(50)
 );
cost dati = onSnapshot (q, (QuerySnapshot) => {
permettere messaggi = [];
 QuerySnapshot.forEach((doc) => {
 messaggi.push({ ...doc.dati(), id: doc.id });
 });
 setMessages (messaggi) 

 });
ritorno() => dati; 

 }, []);

ritorno (
  • Questo codice importa il database, i componenti di autenticazione inizializzati nel file firebase-config.js file e metodi personalizzati di Firestore che semplificano la manipolazione dei dati archiviati.
  • Implementa il collezione, domanda, limite, ordinato da, E su Snapshot Metodi Firestore per interrogare e acquisire un'istantanea dei dati attualmente archiviati nella raccolta di messaggi Firestore, ordinati in base all'ora in cui sono stati creati, e legge solo i 50 messaggi più recenti.
  • I metodi Firestore sono racchiusi ed eseguiti all'interno di a useEffect hook per garantire che i messaggi vengano visualizzati immediatamente, ogni volta che si preme il pulsante di invio, senza aggiornare la finestra della pagina. Una volta letti, i dati vengono archiviati nello stato dei messaggi.
  • Quindi controlla per distinguere tra messaggi inviati e ricevuti, se l'ID utente memorizzato con il messaggio corrisponde l'ID utente per l'utente che ha effettuato l'accesso e, successivamente, imposta il nome della classe e applica lo stile appropriato per Messaggio.
  • Infine, rende i messaggi, a disconnessione pulsante e il Invia messaggio componente. IL disconnessione pulsante al clic gestore chiama il aut.signOut() metodo fornito da Firebase.

Creare un componente Invia messaggio

Crea un nuovo file, SendMessage.js file e aggiungere il codice seguente:

importare Reagisci, { useState } da'reagire'
importare { db, aut } da'../firebase-config'
importare {raccolta, addDoc, serverTimestamp} da"Firebase/Firestore";
funzioneInvia messaggio() {
cost [msg, setMsg] = useState('')
cost messageRef = raccolta (db, "messaggi");

cost inviaMsg = asincrono (e) => {
cost { uid, photoURL } = auth.currentUser

aspetta addDoc (messagesRef, {
 testo: messaggio,
 creatoAt: serverTimestamp(),
 fluido: fluido,
 fotoURL: fotoURL
 })
 setMsg('');
 };


ritorno (




'Messaggio...'
 tipo="testo" valore={messaggio} 
 onChange={(e) => setMsg (e.target.value)}
 />


esportarepredefinito Invia messaggio
  • Simile al Chat.js componente, importare i metodi Firestore e il database inizializzato e i componenti di autenticazione.
  • Per inviare messaggi, il Invia messaggio funzione implementa il addDoc Metodo Firestore che crea un nuovo documento sul database e memorizza i dati passati.
  • IL addDoc Il metodo accetta due parametri, l'oggetto dati e un oggetto di riferimento che indica in quale raccolta si desidera archiviare i dati. Il metodo di raccolta Firestore specifica la raccolta per archiviare i dati.
  • Infine, rende un campo di input e un pulsante sulla pagina Web per consentire agli utenti di inviare messaggi al database.

Importa i componenti nel file App.js

Infine, nel tuo App.js file, importa il file Registrazione E Chiacchierata componenti per renderli sul tuo browser.

Nel tuo App.js file, eliminare il codice boilerplate e aggiungere il codice seguente:

importare Chiacchierata da'./componenti/Chat';
importare Registrazione da'./componenti/SignIn';
importare {auth} da'./firebase-config.js'
importare {usaStatoAut} da'react-firebase-hooks/auth'
funzioneApp() {
cost [utente] = useAuthState (autenticazione)
ritorno (
 <>
 {utente? <Chiacchierata />: <Registrazione />}
 </>
 );
}
esportarepredefinito Applicazione;

Questo codice rende il Registrazione E Chiacchierata componenti condizionalmente controllando lo stato di autenticazione di un utente. Lo stato di autenticazione viene destrutturato dal componente di autenticazione Firebase con l'aiuto del file usaAuthState gancio dal reagire-firebase-ganci pacchetto.

Controlla se un utente è autenticato e rende il file Chiacchierata componente altrimenti il Registrazione viene eseguito il rendering del componente. Infine, aggiungi qualsiasi stile CSS, avvia il server di sviluppo per salvare le modifiche e vai al tuo browser per visualizzare i risultati finali.

Funzionalità Firebase senza server

Firebase offre una gamma di funzionalità oltre a un database e un'autenticazione in tempo reale. Puoi utilizzare le sue funzionalità serverless per eseguire rapidamente il bootstrap e ridimensionare qualsiasi applicazione. Inoltre, Firebase si integra perfettamente sia con le applicazioni Web che mobili, semplificando la creazione di applicazioni multipiattaforma.