Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Vous êtes-vous déjà demandé comment fonctionne WhatsApp? Ou comment différents utilisateurs se connectent et échangent des messages dans les chats? La création d'une application de chat simplifiée peut être un excellent moyen de saisir les fonctionnalités de base des applications de chat.

Construire une application de chat peut sembler une tâche ardue, cependant, Firebase simplifie le processus. Il vous permet de démarrer rapidement n'importe quelle application, éliminant ainsi le besoin d'un backend personnalisé ou d'une configuration de base de données.

Qu'est-ce que la base de données cloud Firebase

Firebase est une plate-forme de développement basée sur le cloud qui offre une gamme de services backend tels qu'une base de données en temps réel, l'authentification et l'hébergement. Au cœur de ses services de base de données se trouve une base de données cloud NoSQL qui utilise un modèle de document pour stocker les données en temps réel.

instagram viewer

Configurer le projet Firebase et le client React

Vous pouvez consulter le code d'application de chat disponible sur ce Référentiel GitHub et il est gratuit pour une utilisation sous la licence MIT. Assurez-vous de configurer Firebase avant d'exécuter l'application.

Pour commencer, rendez-vous sur Base de feu et créer un compte. Dans le tableau de bord utilisateur, cliquez sur Créer un projet pour monter un nouveau projet.

Après avoir créé votre projet, sélectionnez et cliquez sur l'icône de code sur la page de présentation du projet pour enregistrer votre application. L'inscription à Firebase vous permet d'accéder à ses ressources et de les utiliser pour créer votre application Web React.

Prenez note des instructions pour intégrer le SDK de Firebase à votre projet sous Ajouter le SDK Firebase.

Suivant, créer une application React et installez le SDK Firebase dans votre application. De plus, importez le réagir-firebase-hooks package qui simplifie le travail avec Firebase In React.

npm install firebase react-firebase-hooks

Configurez Firebase dans votre application React

Dans ton src répertoire, créez un nouveau fichier et nommez-le, firebase-config.js. Copiez les variables d'environnement du tableau de bord de votre projet Firebase et collez-les dans ce fichier.

importer { initializeApp } depuis"base de feu/application";
importer { getFirestore } depuis'@firebase/firestore';
importer { getAuth, GoogleAuthProvider } depuis"firebase/authentification";
constante firebaseConfig = {
 clé API: "CLÉ API",
 authDomain: "authDomain",
 ID de projet: "identifiant du projet",
 compartiment de stockage: "seau de stockage",
 messageSenderId: "ID de l'expéditeur de la messagerie",
 ID d'application: "Identifiant de l'application"
};
constante app = initializeApp (firebaseConfig);
constante db = getFirestore (application);
constante auth = getAuth (application)
constante fournisseur = nouveau GoogleAuthProvider();
exporter {db, auth, fournisseur}

À l'aide de la configuration de votre projet Firebase, vous initialisez les fonctions d'authentification de Firebase, Firestore et Firebase pour une utilisation dans votre application.

Configurer une base de données Firestore

Cette base de données stockera les données des utilisateurs et les messages de chat. Rendez-vous sur la page de présentation de votre projet et cliquez sur Créer une base de données bouton pour configurer votre Cloud Firestore.

Définissez le mode et l'emplacement de la base de données.

Enfin, mettez à jour les règles de la base de données Firestore pour autoriser les opérations de lecture et d'écriture à partir de l'application React. Clique sur le Règles onglet et modifiez le lire et écrire règle à vrai.

Une fois que vous avez terminé de configurer la base de données, vous pouvez créer une collection de démonstration - il s'agit d'une base de données NoSQL dans Firestore. Les collections sont constituées de documents en tant qu'archives.

Pour créer une nouvelle collection, cliquez sur le Commencer la collecte et fournissez un ID de collection — un nom de table.

Intégrer l'authentification utilisateur Firebase

Firebase fournit des fonctionnalités prêtes à l'emploi Authentification et autorisation des solutions faciles à mettre en œuvre telles que les fournisseurs de connexion sociale ou le fournisseur de mot de passe de messagerie personnalisé.

Sur la page de présentation de votre projet, sélectionnez Authentification de la liste des produits affichés. Ensuite, cliquez sur le Configurer la méthode de connexion bouton pour configurer le fournisseur Google. Sélectionnez Google dans la liste des fournisseurs, activez-le et remplissez l'e-mail d'assistance du projet.

Créer un composant de connexion

Une fois que vous avez terminé de configurer le fournisseur sur Firebase, accédez à votre dossier de projet et créez un nouveau dossier, Composants, dans le /src annuaire. À l'intérieur de Composants dossier, créez un nouveau fichier: Connexion.js.

Dans le Connexion.js fichier, ajoutez le code ci-dessous :

importer Réagir depuis'réagir';
importer { se connecterAvecPopup } depuis"firebase/authentification";
importer { authentification, fournisseur } depuis'../firebase-config'

fonctionS'identifier() {
constante se connecterAvecGoogle = () => {
 signInWithPopup (auth, fournisseur)
 };
retour (




exporterdéfaut S'identifier
  • Ce code importe les objets d'authentification et de fournisseur Google que vous avez initialisés dans le fichier de configuration Firebase.
  • Il définit alors une S'identifier fonction qui implémente la se connecterAvecPopup méthode de Firebase qui prend en compte authentification et fournisseur composants comme paramètres. Cette fonction authentifiera les utilisateurs avec leurs identifiants sociaux Google.
  • Enfin, il renvoie un div contenant un bouton qui, lorsqu'il est cliqué, appelle le Se connecterAvecGoogle fonction.

Créer un composant de chat

Ce composant abritera la fonctionnalité principale de votre application Chat, la fenêtre de chat. Créez un nouveau fichier dans le Composants dossier et nommez-le Chat.js.

Ajoutez le code ci-dessous dans le Chat.js Déposer:

importer Réagir, { useState, useEffect } depuis'réagir'
importer { BD, authentification } depuis'../firebase-config'
importer Envoyer le message depuis'./Envoyer le message'
importer { collection, requête, limite, orderBy, onSnapshot } depuis"firebase/firestore";
fonctionDiscuter() {
constante [messages, setMessages] = useState([])
constante { userID } = auth.currentUser
 useEffet(() => {
constante q = requête(
 collecte (db, "messages"),
 commandé par("créé à"),
 limite(50)
 );
constante data = onSnapshot (q, (QuerySnapshot) => {
laisser msg = [] ;
 QuerySnapshot.forEach((doc) => {
 messages.push({ ...doc.data(), identifiant: id.doc });
 });
 setMessages (messages) 

 });
retour() => données; 

 }, []);

retour (
  • Ce code importe la base de données, les composants d'authentification initialisés dans le firebase-config.js file et les méthodes personnalisées Firestore qui facilitent la manipulation des données stockées.
  • Il met en œuvre la collection, mettre en doute, limite, commandé par, et surSnapshot Méthodes Firestore pour interroger et capturer un instantané des données actuellement stockées dans la collection de messages Firestore, triées par date de création, et lire uniquement les 50 messages les plus récents.
  • Les méthodes Firestore sont encapsulées et exécutées dans un utiliserEffet crochet pour s'assurer que les messages sont rendus immédiatement, chaque fois que vous appuyez sur le bouton d'envoi, sans rafraîchir la fenêtre de la page. Une fois les données lues, elles sont stockées dans l'état des messages.
  • Il vérifie ensuite pour différencier les messages envoyés et reçus - si l'ID utilisateur stocké avec le message correspond l'ID utilisateur de l'utilisateur connecté, puis définit le nom de la classe et applique le style approprié pour le message.
  • Enfin, il restitue les messages, un se déconnecter bouton, et le Envoyer le message composant. Le se déconnecter bouton sur clic gestionnaire appelle le auth.signOut() méthode fournie par Firebase.

Créer un composant d'envoi de message

Créer un nouveau fichier, SendMessage.js fichier, et ajoutez le code ci-dessous :

importer Réagissez, { useState } depuis'réagir'
importer { BD, authentification } depuis'../firebase-config'
importer { collection, addDoc, serverTimestamp} depuis"firebase/firestore";
fonctionEnvoyer le message() {
constante [msg, setMsg] = useState('')
constante messagesRef = collection (db, "messages");

constante envoyerMsg = asynchrone (e) => {
constante { uid, photoURL } = auth.currentUser

attendre addDoc (messagesRef, {
 texte: msg,
 créé à: horodatage du serveur(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };


retour (




'Message...'
 taper="texte" valeur={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />


exporterdéfaut Envoyer le message
  • Semblable à la Chat.js, importez les méthodes Firestore et les composants de base de données et d'authentification initialisés.
  • Pour envoyer des messages, le Envoyer le message fonction implémente la addDoc Méthode Firestore qui crée un nouveau document sur la base de données et stocke les données transmises.
  • Le addDoc La méthode prend deux paramètres, l'objet de données et un objet de référence qui indique la collection dans laquelle vous souhaitez stocker les données. La méthode de collection Firestore spécifie la collection pour stocker les données.
  • Enfin, il affiche un champ de saisie et un bouton sur la page Web pour permettre aux utilisateurs de soumettre des messages à la base de données.

Importer les composants dans le fichier App.js

Enfin, dans votre App.js fichier, importez le S'identifier et Discuter composants pour les rendre sur votre navigateur.

Dans ton App.js fichier, supprimez le code passe-partout et ajoutez le code ci-dessous :

importer Discuter depuis'./composants/Chat';
importer S'identifier depuis'./composants/Connexion';
importer { authentification } depuis'./firebase-config.js'
importer { useAuthState } depuis'react-firebase-hooks/auth'
fonctionApplication() {
constante [utilisateur] = useAuthState (auth)
retour (
 <>
 {utilisateur? <Discuter />: <S'identifier />}
 </>
 );
}
exporterdéfaut application;

Ce code rend le S'identifier et Discuter composants de manière conditionnelle en vérifiant l'état d'authentification d'un utilisateur. Le statut d'authentification est déstructuré du composant d'authentification Firebase à l'aide du useAuthState crochet de la réagir-firebase-hooks emballer.

Il vérifie si un utilisateur est authentifié et affiche le Discuter composant sinon le S'identifier composant est rendu. Enfin, ajoutez tous les styles CSS, lancez le serveur de développement pour enregistrer les modifications et accédez à votre navigateur pour afficher les résultats finaux.

Fonctionnalités Firebase sans serveur

Firebase fournit une gamme de fonctionnalités au-delà d'une base de données et d'une authentification en temps réel. Vous pouvez utiliser ses fonctionnalités sans serveur pour démarrer et faire évoluer rapidement n'importe quelle application. De plus, Firebase s'intègre de manière transparente aux applications Web et mobiles, ce qui facilite la création d'applications multiplateformes.