Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Някога чудили ли сте се как работи WhatsApp? Или как различни потребители се свързват и обменят съобщения в чатове? Създаването на опростено приложение за чат може да бъде чудесен начин да разберете основните функции зад приложенията за чат.

Създаването на приложение за чат може да изглежда като трудна задача, но Firebase опростява процеса. Тя ви позволява бързо да стартирате всяко приложение, премахвайки необходимостта от персонализиран бекенд или настройка на база данни.

Какво е Firebase Cloud Database

Firebase е базирана на облак платформа за разработка, която предлага набор от бекенд услуги като база данни в реално време, удостоверяване и хостинг. В основата на неговите услуги за бази данни е облачна база данни NoSQL, която използва документен модел за съхраняване на данни в реално време.

Настройте проекта Firebase и клиента React

Можете да проверите наличния код на приложението за чат тук

instagram viewer
GitHub хранилище и е безплатен за използване под лиценза на MIT. Уверете се, че сте конфигурирали Firebase, преди да стартирате приложението.

За да започнете, преминете към Firebase и се регистрирайте за акаунт. Щракнете върху потребителското табло Създаване на проект за създаване на нов проект.

След като създадете своя проект, изберете и щракнете върху иконата на кода на страницата за преглед на проекта, за да регистрирате вашето приложение. Регистрирането във Firebase ви позволява да получите достъп и да използвате неговите ресурси, за да създадете своето уеб приложение React.

Обърнете внимание на инструкциите за интегриране на SDK на Firebase във вашия проект по-долу Добавете Firebase SDK.

Следващия, създайте приложение React и инсталирайте Firebase SDK във вашето приложение. Освен това импортирайте реагират-firebase-куки пакет, който опростява работата с Firebase In React.

npm инсталирайте firebase react-firebase-hooks

Конфигурирайте Firebase във вашето приложение React

Във вашия src директория, създайте нов файл и го наименувайте, firebase-config.js. Копирайте променливите на средата от таблото за управление на вашия проект Firebase и ги поставете в този файл.

импортиране { initializeApp } от"firebase/приложение";
импортиране { getFirestore } от„@firebase/firestore“;
импортиране { getAuth, GoogleAuthProvider } от"firebase/auth";
конст firebaseConfig = {
 apiKey: „API_KEY“,
 authDomain: "authDomain",
 projectId: "ID на проекта",
 StorageBucket: "кофа за съхранение",
 messagingSenderId: "ИД на изпращача на съобщения",
 appId: „ИД на приложение“
};
конст приложение = initializeApp (firebaseConfig);
конст db = getFirestore (приложение);
конст auth = getAuth (приложение)
конст доставчик = нов GoogleAuthProvider();
износ {db, auth, provider}

Като използвате конфигурацията на вашия проект Firebase, вие инициализирате функциите за удостоверяване на Firebase, Firestore и Firebase за използване във вашето приложение.

Настройте база данни на Firestore

Тази база данни ще съхранява потребителски данни и чат съобщения. Преминете към страницата с преглед на вашия проект и щракнете върху Създайте база данни бутон, за да настроите своя Cloud Firestore.

Определете режима и местоположението на базата данни.

И накрая, актуализирайте правилата на базата данни на Firestore, за да позволите операции за четене и запис от приложението React. Кликнете върху правила и променете Чети и пиши правило за вярно.

След като приключите с настройването на базата данни, можете да създадете демонстрационна колекция — това е NoSQL база данни във Firestore. Колекциите са съставени от документи като записи.

За да създадете нова колекция, щракнете върху Започнете събиране бутон и осигурете ID на колекция — име на таблица.

Интегриране на Firebase User Authentication

Firebase предоставя готово удостоверяване и оторизация решения, които са лесни за внедряване, като например доставчици на социално влизане или потребителски доставчик на имейл парола.

На страницата с общ преглед на вашия проект изберете Удостоверяване от списъка с показани продукти. След това щракнете върху Настройте метод за влизане бутон за конфигуриране на доставчика на Google. Изберете Google от списъка с доставчици, активирайте го и попълнете имейла за поддръжка на проекта.

Създайте компонент за влизане

След като приключите с конфигурирането на доставчика във Firebase, преминете към папката на вашия проект и създайте нова папка, компоненти, в /src указател. Вътре в компоненти папка, създайте нов файл: SignIn.js.

В SignIn.js файл, добавете кода по-долу:

импортиране Реагирайте от"реагира";
импортиране { signInWithPopup } от"firebase/auth";
импортиране {автор, доставчик} от'../firebase-config'

функцияВпиши се() {
конст signInWithGoogle = () => {
 signInWithPopup (автор, доставчик)
 };
връщане (




износпо подразбиране Впиши се
  • Този код импортира обектите за удостоверяване и доставчик на Google, които сте инициализирали в конфигурационния файл на Firebase.
  • След това определя a Впиши се функция, която реализира signInWithPopup метод от Firebase, който приема удостоверяване и доставчик компоненти като параметри. Тази функция ще удостоверява потребителите с техните социални данни за вход в Google.
  • Накрая връща div, съдържащ бутон, който при щракване извиква влезте с Google функция.

Създайте компонент за чат

Този компонент ще съдържа основната функция на вашето приложение за чат, прозорецът за чат. Създайте нов файл вътре в компоненти папка и я наименувайте Chat.js.

Добавете кода по-долу в Chat.js файл:

импортиране Реагирайте, {useState, useEffect} от"реагира"
импортиране {db, auth} от'../firebase-config'
импортиране Изпрати съобщение от'./Изпрати съобщение'
импортиране {колекция, заявка, лимит, orderBy, onSnapshot} от"firebase/firestore";
функцияЧат() {
конст [съобщения, setMessages] = useState([])
конст { userID } = auth.currentUser
 useEffect(() => {
конст q = заявка(
 колекция (db, "съобщения"),
 подредени по("създадено В"),
 лимит(50)
 );
конст данни = onSnapshot (q, (QuerySnapshot) => {
позволявам съобщения = [];
 QuerySnapshot.forEach((док) => {
 messages.push({ ...doc.data(), документ за самоличност: doc.id });
 });
 setMessages (съобщения) 

 });
връщане() => данни; 

 }, []);

връщане (
  • Този код импортира базата данни, компонентите за удостоверяване, инициализирани в firebase-config.js файл и персонализирани методи на Firestore, които улесняват манипулирането на съхранените данни.
  • Той прилага колекция, заявка, лимит, подредени по, и onSnapshot Методи на Firestore за запитване и заснемане на моментна снимка на текущо съхранените данни в колекцията от съобщения на Firestore, подредени по времето, когато са създадени, и чете само 50-те най-нови съобщения.
  • Методите на Firestore са обвити и се изпълняват вътре в a useEffect кука, за да гарантира, че съобщенията се изобразяват незабавно, всеки път, когато натиснете бутона за изпращане, без да опреснявате прозореца на страницата. След като данните бъдат прочетени, те се съхраняват в състояние на съобщения.
  • След това проверява, за да направи разлика между изпратени и получени съобщения - дали потребителският идентификатор, съхранен със съобщението, съвпада потребителския идентификатор за влезлия потребител и след това задава името на класа и прилага подходящия стил за съобщение.
  • И накрая, той изобразява съобщенията, a отписване бутон и Изпрати съобщение компонент. The отписване бутон onClick манипулаторът извиква auth.signOut() метод, предоставен от Firebase.

Създайте компонент за изпращане на съобщение

Създайте нов файл, SendMessage.js файл и добавете кода по-долу:

импортиране Реагирайте, {useState} от"реагира"
импортиране {db, auth} от'../firebase-config'
импортиране {колекция, addDoc, serverTimestamp} от"firebase/firestore";
функцияИзпрати съобщение() {
конст [msg, setMsg] = useState('')
конст messagesRef = колекция (db, "съобщения");

конст sendMsg = асинхронен (e) => {
конст {uid, photoURL} = auth.currentUser

изчакайте addDoc (messagesRef, {
 текст: съобщение,
 createdAt: serverTimestamp(),
 uid: uid,
 photoURL: photoURL
 })
 setMsg('');
 };


връщане (




„Съобщение...“
 тип="текст" стойност={msg} 
 onChange={(e) => setMsg (e.target.value)}
 />


износпо подразбиране Изпрати съобщение
  • Подобно на Chat.js компонент, импортирайте методите на Firestore и инициализираната база данни и компонентите за удостоверяване.
  • За да изпращате съобщения, Изпрати съобщение функцията изпълнява addDoc Метод Firestore, който създава нов документ в базата данни и съхранява предадените данни.
  • The addDoc метод приема два параметъра, обект на данни и референтен обект, който показва в коя колекция искате да съхраните данните. Методът за събиране на Firestore указва колекцията за съхраняване на данни.
  • И накрая, той изобразява поле за въвеждане и бутон на уеб страницата, за да позволи на потребителите да изпращат съобщения до базата данни.

Импортирайте компонентите във файла App.js

И накрая, във вашия App.js файл, импортирайте Впиши се и Чат компоненти, за да ги изобразите в браузъра си.

Във вашия App.js файл, изтрийте шаблонния код и добавете кода по-долу:

импортиране Чат от'./components/Chat';
импортиране Впиши се от'./components/SignIn';
импортиране { auth } от'./firebase-config.js'
импортиране {useAuthState} от'react-firebase-hooks/auth'
функцияПриложение() {
конст [потребител] = useAuthState (auth)
връщане (
 <>
 {потребител? <Чат />: <Впиши се />}
 </>
 );
}
износпо подразбиране Приложение;

Този код изобразява Впиши се и Чат компоненти условно чрез проверка на състоянието на удостоверяване на потребител. Състоянието на удостоверяване се деструктурира от компонента за удостоверяване на Firebase с помощта на useAuthState кука от реагират-firebase-куки пакет.

Той проверява дали даден потребител е удостоверен и изобразява Чат компонент в противен случай Впиши се компонентът се изобразява. Накрая добавете всякакви CSS стилове, завъртете сървъра за разработка, за да запазите промените, и се насочете към браузъра си, за да видите крайните резултати.

Безсървърни функции на Firebase

Firebase предоставя набор от функции извън база данни в реално време и удостоверяване. Можете да използвате функциите му без сървър за бързо зареждане и мащабиране на всяко приложение. Освен това Firebase безпроблемно се интегрира както с уеб, така и с мобилни приложения, което улеснява изграждането на междуплатформени приложения.