Вы когда-нибудь задумывались, как работает WhatsApp или любое другое приложение для обмена сообщениями? Или как разные пользователи могут беспрепятственно общаться и обмениваться сообщениями и фотографиями в беседах? Создание упрощенного приложения для чата может стать отличным способом понять основные функции приложений для чата.
Создание приложения для чата может показаться сложной задачей, но Firebase упрощает весь процесс. Это позволяет вам быстро загружать любое приложение, устраняя необходимость в выделенной серверной части или настройке базы данных. Проверять Лучшие зашифрованные приложения для приватного чата для пользователей Linux.
Что такое облачная база данных Firebase?
Firebase — это облачная платформа разработки, предоставляющая серверные услуги (BaaS), такие как база данных в реальном времени, аутентификация и хостинг (SDK), которая используется для обеспечения совместимости с различными системами.
Это платформа, призванная обеспечить комплексный подход к созданию, улучшению и разработке веб-сайтов и мобильных приложений с помощью множества инструментов, необходимых любому разработчику для получения услуг, создание которых вручную потребует много времени и усилий, особенно для тех, кто не имеют достаточного опыта.
В основе его служб баз данных лежит облачная база данных NoSQL, которая использует модель документов для хранения данных в режиме реального времени.
Настройка проекта Firebase и клиент React
Заметка: Вы можете проверить код для приложения чата, доступного на Репозиторий GitHub Его можно использовать бесплатно по лицензии MIT. Перед запуском приложения убедитесь, что Firebase настроен.
Для начала перейдите в Firebase И зарегистрируйте аккаунт. На панели управления пользователя нажмите Создание проекта Чтобы создать новый проект.
После создания проекта выберите значок Веб-разработка на странице «Обзор проекта» и нажмите, чтобы зарегистрировать свое приложение. Регистрация в Firebase позволяет вам получить доступ к его ресурсам и использовать их для создания собственного веб-приложения React.
Запишите инструкции по интеграции Firebase SDK в ваш проект в разделе Надстройка Firebase SDK.
Затем создайте приложение React и установите в него Firebase SDK. Кроме того, импортируйте пакет react-firebase-hooks, который упрощает работу с Firebase в React.
npm install firebase react-firebase-hooks
Настройте Firebase в своем приложении React
В вашем пользовательском каталоге src создайте новый файл и назовите его, firebase-config.js. Скопируйте переменные среды с панели управления проекта Firebase и вставьте их в этот файл.
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} С конфигурацией проекта Firebase вы можете настроить функции аутентификации Firebase, Firestore и Firebase для использования в вашем приложении.
Настройка базы данных Firestore
Cloud Firestore — это гибкая и масштабируемая база данных для разработки мобильных, веб- и серверных приложений от Firebase и Google Cloud. Как и Firebase Realtime Database, он синхронизирует ваши данные между клиентскими приложениями с помощью прослушивателей в реальном времени и предлагает автономную поддержку для телефона и Интернета, чтобы вы могли создавать отзывчивые приложения, которые работают независимо от задержки в сети или подключения к Интернету. Cloud Firestore также обеспечивает бесшовную интеграцию с другими продуктами Firebase и Google Cloud, включая облачные функции.
Эта база данных будет хранить пользовательские данные и сообщения чата. Перейдите на страницу обзора вашего проекта и нажмите кнопку Создать базу данных Чтобы настроить Cloud Firestore.
Определите стиль и расположение базы данных.
Наконец, обновите правила базы данных Firestore, чтобы разрешить чтение и запись из вашего приложения React. Перейдите на вкладку «Правила» и измените правило чтения и записи на «Истина».
После настройки базы данных вы можете создать тестовый кластер — базу данных NoSQL в Firestore. Коллекции состоят из документов в виде записей.
Чтобы создать новую группу, нажмите кнопку групповой старт и укажите идентификатор группы — имя таблицы.
Интеграция аутентификации пользователей Firebase
Firebase предоставляет готовые к реализации решения для аутентификации и авторизации, такие как провайдеры входа в социальные сети или провайдеры настраиваемых паролей электронной почты.
На странице обзора проекта выберите Аутентификация Список предлагаемых товаров. После этого нажмите на кнопку Установка способа входа Для настройки провайдера Google. Найдите Google В списке провайдеров включите его и заполните адрес электронной почты поддержки проекта.
Создайте компонент входа
После того, как вы настроили провайдера в Firebase, перейдите в папку своего проекта и создайте новую папку, назовите ее компоненты , в мануале / src. Внутри папки компонентов создайте новый файл: SignIn.js.
В файле SignIn.js добавьте следующий код:
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 - Этот код импортирует объекты аутентификации и Google Provider, которые вы настроили в файле конфигурации Firebase.
- Затем вы определяете функцию входа в систему, которую реализует метод. Войти с попапом из Firebase, который принимает компоненты аутентификации и провайдера в качестве параметров. Эта функция будет аутентифицировать пользователей с помощью их социальных логинов Google.
- Наконец, он возвращает div, содержащий кнопку, которая при нажатии вызывает функцию. Войти с Google.
Создать блок чата
Этот компонент будет содержать основную функцию создаваемого вами чат-приложения, а именно окно чата. Создайте новый файл в папке компонентов и назовите его Chat.js.
Добавьте приведенный ниже код в файл 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 - Этот код импортирует базу данных, компоненты аутентификации, настроенные в файле firebase-config.js, и пользовательские методы Firestore, которые упрощают обработку сохраненных данных.
- Вы реализуете методы лыжных шлемов و запрос و предел و Сортировать по , В добавление к onSnapshot Из Firestore для запроса и захвата данных, хранящихся в настоящее время в коллекции сообщений Firestore, отсортированных по времени создания, и чтения только 50 самых последних сообщений.
- Методы Firestore инкапсулированы и запускаются внутри хука. использованиеЭффект Чтобы сообщения отображались немедленно, каждый раз, когда вы нажимаете кнопку отправки, без обновления окна страницы. Как только данные прочитаны, они сохраняются в состоянии сообщения.
- Затем вы проверяете различие между отправленными и полученными сообщениями — если идентификатор пользователя, хранящийся в сообщении, совпадает с идентификатором пользователя, вошедшего в систему, а затем вы устанавливаете имя класса и применяете соответствующий стиль к сообщению.
- Наконец, он показывает сообщения, кнопку «Выход» и «Настроено». Отправить сообщение. кнопка вызова Выход с терапевтом по щелчку метод авторизация.signOut() предоставлено Firebase.
Создайте компонент отправки сообщения
Создайте новый файл SendMessage.js и добавьте следующий код:
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 - Как и в случае с компонентом Chat.js, импортируйте методы Firestore, настроенную базу данных и компоненты аутентификации.
- Для отправки сообщений выполняется функция Отправить сообщение метод добавитьДокумент Firestore, который создает новый документ в базе данных и сохраняет переданные данные.
- взять метод добавитьДокумент Два параметра, объект данных и объект ссылки, которые указывают, в какой коллекции вы хотите хранить данные. Способ сбора Firestore определяет группу для хранения данных.
- Наконец, на веб-странице отображаются поле ввода и кнопка, позволяющие пользователям отправлять сообщения в базу данных.
Импорт компонентов в файл App.js
Наконец, в файле App.js импортируйте компоненты входа и чата для отображения в браузере.
В файле App.js удалите стандартный код и добавьте код ниже:
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; Этот код условно раскрывает компоненты входа и чата, проверяя статус аутентификации пользователя. Состояние аутентификации уничтожается компонентом аутентификации Firebase с помощью хука useAuthState из пакета react-firebase-hooks.
Который проверяет, аутентифицирован ли пользователь, и возвращает компонент чата, в противном случае представлен компонент входа. Наконец, добавьте любые стили CSS, запустите сервер разработки, чтобы сохранить изменения, и перейдите в браузер, чтобы просмотреть окончательные результаты. Проверять Как создать видеоплеер в React.
Бессерверные задания Firebase
Firebase предлагает ряд функций, помимо аутентификации и базы данных в реальном времени. Вы можете использовать его бессерверную функциональность для быстрого запуска и масштабирования любого приложения. Более того, Firebase легко интегрируется как с веб-приложениями, так и с мобильными приложениями, что упрощает создание кроссплатформенных приложений. Вы можете просмотреть сейчас Как создавать объекты перетаскивания в React.
