¿Alguna vez te has preguntado cómo funciona WhatsApp o cualquier otra aplicación de mensajería? ¿O cómo diferentes usuarios pueden comunicarse e intercambiar mensajes y fotos sin problemas en conversaciones? Crear una aplicación de chat simplificada puede ser una excelente manera de comprender la funcionalidad básica de las aplicaciones de chat.
Crear una aplicación de chat puede parecer una tarea abrumadora, pero Firebase simplifica todo el proceso. Le permite iniciar rápidamente cualquier aplicación, eliminando la necesidad de una configuración de back-end o base de datos dedicada. Verificar Las mejores aplicaciones de chat privado encriptado para usuarios de Linux.
¿Qué es la base de datos en la nube de Firebase?
Firebase es una plataforma de desarrollo basada en la nube que proporciona servicios de back-end (BaaS) como una base de datos en tiempo real, autenticación y alojamiento (SDK) que se utiliza para lograr la compatibilidad con diferentes sistemas.
Es una plataforma que tiene como objetivo proporcionar un enfoque integral para crear, mejorar y desarrollar sitios web y aplicaciones móviles, a través de muchas herramientas que cualquier desarrollador necesita para lograr servicios que requerirán mucho tiempo y esfuerzo para construir manualmente, especialmente para aquellos que no lo hacen. no tener suficiente experiencia.
El núcleo de sus servicios de base de datos es una base de datos en la nube NoSQL que utiliza un modelo de documento para almacenar datos en tiempo real.
Configuración del proyecto Firebase y cliente React
ملاحظة: Puedes consultar el código de la aplicación de chat disponible en repositorio GitHub Es de uso gratuito bajo la licencia MIT. Asegúrese de que Firebase esté configurado antes de ejecutar la aplicación.
Para empezar, dirígete a Base de fuego Y regístrese para obtener una cuenta. En el panel de usuario, haga clic en establecimiento del proyecto Para configurar un nuevo proyecto.
Después de crear su proyecto, seleccione un icono desarrollo web en la página Resumen del proyecto y haga clic para registrar su aplicación. Registrarse en Firebase le permite acceder y utilizar sus recursos para crear su propia aplicación web React.
Tome nota de las instrucciones para integrar Firebase SDK en su proyecto en Complemento SDK de Firebase.
A continuación, cree su aplicación React e instale el SDK de Firebase en su aplicación. Además, importa el paquete react-firebase-hooks, que simplifica el trabajo con Firebase dentro de React.
npm install firebase react-firebase-hooks
Configure Firebase en su aplicación React
En su directorio src personalizado, cree un nuevo archivo y asígnele un nombre, firebase-config.js. Copie las variables de entorno del panel del proyecto de Firebase y péguelas en este archivo.
import { initializeApp } from “firebase/app”;
import { getFirestore } from ‘@firebase/firestore’;
import { getAuth, GoogleAuthProvider } from “firebase/auth”;
const firebaseConfig = {
apiKey: “API_KEY”,
authDomain: “authDomain”,
projectId: “project ID”,
storageBucket: “storage Bucket”,
messagingSenderId: “messanging sender ID”,
appId: “App ID”
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app)
const provider = new GoogleAuthProvider();
export {db, auth, provider} Con la configuración del proyecto de Firebase, puede configurar las funciones de autenticación de Firebase, Firestore y Firebase para usar dentro de su aplicación.
Configuración de la base de datos de Firestore
Cloud Firestore es una base de datos de desarrollo móvil, web y servidor flexible y escalable de Firebase y Google Cloud. Al igual que Firebase Realtime Database, sincroniza sus datos entre las aplicaciones de los clientes a través de escuchas en tiempo real y ofrece soporte fuera de línea para el teléfono y la web para que pueda crear aplicaciones receptivas que funcionen independientemente de la latencia de la red o la conexión a Internet. Cloud Firestore también proporciona una integración perfecta con otros productos de Firebase y Google Cloud, incluida la funcionalidad en la nube.
Esta base de datos almacenará datos de usuario y mensajes de chat. Dirígete a la página de resumen de tu proyecto y haz clic en el botón Crea una base de datos Para configurar Cloud Firestore.
Determine el estilo y la ubicación de la base de datos.
Finalmente, actualice las reglas de su base de datos Firestore para permitir lecturas y escrituras desde su aplicación React. Haga clic en la pestaña Reglas y cambie la regla de lectura y escritura a Verdadero.
Una vez que haya configurado la base de datos, puede crear un clúster de prueba, que es la base de datos NoSQL en Firestore. Las colecciones consisten en documentos como registros.
Para crear un nuevo grupo, haga clic en el botón comienzo del grupo y proporcione el ID de grupo: el nombre de la tabla.
Integración de autenticación de usuario de Firebase
Firebase proporciona soluciones de autenticación y autorización listas para implementar, como proveedores de inicio de sesión social o un proveedor de contraseña de correo electrónico personalizado.
En la página de descripción general de su proyecto, seleccione Autenticación Lista de productos ofrecidos. Después de eso, haga clic en el botón Configuración del método de inicio de sesión Para configurar el proveedor de Google. Localizar Google De la lista de proveedores, habilítelo y complete el correo electrónico de soporte del proyecto.
Crear el componente de inicio de sesión
Una vez que haya configurado el proveedor en Firebase, diríjase a la carpeta de su proyecto y cree una nueva carpeta, asígnele el nombre componentes , en el manual / src. Dentro de la carpeta de componentes, cree un nuevo archivo: SignIn.js.
En el archivo SignIn.js, agregue el siguiente código:
import React from ‘react’;
import { signInWithPopup } from “firebase/auth”;
import { auth, provider } from ‘../firebase-config’
function SignIn() {
const signInWithGoogle = () => {
signInWithPopup(auth,provider)
};
return (
<div>
<button onClick={signInWithGoogle}>Sign In With Google</button>
</div>
)
}
export default SignIn - Este código importa la autenticación y los objetos del proveedor de Google que configuró en el archivo de configuración de Firebase.
- Luego, define la función de inicio de sesión que implementa el método. Iniciar sesión con ventana emergente de Firebase que toma los componentes de autenticación y proveedor como parámetros. Esta función autenticará a los usuarios con sus inicios de sesión sociales de Google.
- Finalmente, devuelve un div que contiene un botón que, cuando se hace clic, llama a una función Inicia sesión con Google.
Crear un bloque de chat
Este componente albergará la función principal de la aplicación de chat que está creando, que es la ventana de chat. Cree un nuevo archivo dentro de la carpeta de componentes y asígnele el nombre Chat.js.
Agregue el siguiente código en el archivo Chat.js:
import React, { useState, useEffect } from ‘react’
import { db, auth } from ‘../firebase-config’
import SendMessage from ‘./SendMessage’
import { collection, query, limit, orderBy, onSnapshot } from “firebase/firestore”;
function Chat() {
const [messages, setMessages] = useState([])
const { userID } = auth.currentUser
useEffect(() => {
const q = query(
collection(db, “messages”),
orderBy(“createdAt”),
limit(50)
);
const data = onSnapshot(q, (QuerySnapshot) => {
let messages = [];
QuerySnapshot.forEach((doc) => {
messages.push({ …doc.data(), id: doc.id });
});
setMessages(messages)
});
return () => data;
}, []);
return (
<div>
<button onClick={() => auth.signOut()}>Sign Out</button>
{messages && messages.map((message, id, uid, photoURL) =>
<div
key={id}
className={`msg ${userID === auth.currentUser.uid ? ‘sent’ : ‘received’}`}>
<img src={message.photoURL} />
<p>{message.text}</p>
</div>
)}
<SendMessage />
</div>
)
}
export default Chat - Este código importa la base de datos, los componentes de autenticación configurados en el archivo firebase-config.js y los métodos personalizados de Firestore que facilitan el manejo de los datos almacenados.
- Implementas métodos -- و pregunta و límitar و ordenar por , Además de en Instantánea Desde Firestore para consultar y capturar los datos actualmente almacenados en la colección de mensajes de Firestore, ordenados por hora de creación, y solo leer los 50 mensajes más recientes.
- Los métodos de Firestore están encapsulados y se ejecutan dentro de un Hook efecto de uso Para garantizar que los mensajes se muestren de inmediato, cada vez que presione el botón Enviar, sin actualizar la ventana de la página. Una vez que se leen los datos, se almacenan en el estado del mensaje.
- Luego verifica para distinguir entre mensajes enviados y recibidos, si la ID de usuario almacenada con el mensaje coincide con la ID de usuario del usuario que inició sesión, y luego, establece el nombre de la clase y aplica el estilo apropiado al mensaje.
- Finalmente, muestra Mensajes, un botón Cerrar sesión y Configurado Enviar mensaje. botón de llamadas Desconectar con un terapeuta onClick طريقة auth.firmar() proporcionado por Firebase.
Crear un componente de envío de mensajes
Cree un nuevo archivo, el archivo SendMessage.js, y agregue el código a continuación:
import React, { useState } from ‘react’
import { db, auth } from ‘../firebase-config’
import { collection, addDoc, serverTimestamp} from “firebase/firestore”;
function SendMessage() {
const [msg, setMsg] = useState(‘’)
const messagesRef = collection(db, “messages”);
const sendMsg = async (e) => {
const { uid, photoURL } = auth.currentUser
await addDoc(messagesRef, {
text: msg,
createdAt: serverTimestamp(),
uid: uid,
photoURL: photoURL
})
setMsg(‘’);
};
return (
<div>
<input placeholder=’Message…’
type=”text” value={msg}
onChange={(e) => setMsg(e.target.value)}
/>
<button onClick={sendMsg}>Send</button>
</div>
)
}
export default SendMessage - De forma similar al componente Chat.js, importe los métodos de Firestore, la base de datos configurada y los componentes de autenticación.
- Para enviar mensajes se ejecuta una función Enviar mensaje طريقة agregarDoc Firestore que crea un nuevo documento en la base de datos y almacena los datos pasados.
- tomar metodo agregarDoc Dos parámetros, un objeto de datos y un objeto de referencia que indican en qué colección desea almacenar los datos. La forma en que Firestore recopila define el grupo para almacenar datos.
- Finalmente, se muestran un campo de entrada y un botón en la página web para permitir a los usuarios enviar mensajes a la base de datos.
Importar componentes en un archivo App.js
Finalmente, en su archivo App.js, importe los componentes de inicio de sesión y chat para mostrarlos en su navegador.
En el archivo App.js, elimine el código estándar y agregue el siguiente código:
import Chat from ‘./components/Chat’;
import SignIn from ‘./components/SignIn’;
import { auth } from ‘./firebase-config.js’
import { useAuthState } from ‘react-firebase-hooks/auth’
function App() {
const [user] = useAuthState(auth)
return (
<>
{user ? <Chat /> : <SignIn />}
</>
);
}
export default App; Este código expone condicionalmente los componentes de inicio de sesión y chat al verificar el estado de autenticación del usuario. El componente de autenticación de Firebase destruye el estado de autenticación con la ayuda del gancho useAuthState del paquete react-firebase-hooks.
Lo que verifica si el usuario está autenticado y devuelve el componente de chat; de lo contrario, se presenta el componente de inicio de sesión. Finalmente, agregue cualquier estilo CSS, active el servidor de desarrollo para guardar sus cambios y diríjase a su navegador para ver los resultados finales. Verificar Cómo crear un reproductor de video en React.
Trabajos sin servidor de Firebase
Firebase ofrece una gama de características más allá de la autenticación y una base de datos en tiempo real. Puede usar su funcionalidad sin servidor para iniciar y escalar rápidamente cualquier aplicación. Además, Firebase se integra a la perfección con las aplicaciones web y móviles, lo que facilita la creación de aplicaciones multiplataforma. Puedes ver ahora Cómo crear objetos de arrastrar y soltar en React.
