Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Вы когда-нибудь задумывались, как работает WhatsApp? Или как разные пользователи подключаются и обмениваются сообщениями в чатах? Создание упрощенного чат-приложения может стать отличным способом понять основные функции чат-приложений.

Создание приложения для чата может показаться сложной задачей, однако Firebase упрощает этот процесс. Это позволяет вам быстро запускать любое приложение, устраняя необходимость в пользовательской серверной части или настройке базы данных.

Что такое облачная база данных Firebase

Firebase — это облачная платформа для разработки, которая предлагает ряд серверных услуг, таких как база данных в реальном времени, аутентификация и хостинг. В основе своих служб баз данных лежит облачная база данных NoSQL, которая использует модель документов для хранения данных в режиме реального времени.

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

Вы можете проверить код приложения чата, доступный на этом Репозиторий GitHub и это бесплатно для использования по лицензии MIT. Убедитесь, что вы настроили Firebase перед запуском приложения.

Для начала перейдите на Firebase и зарегистрируйте аккаунт. На панели управления пользователя нажмите Создать проект создать новый проект.

После создания проекта выберите и щелкните значок кода на странице обзора проекта, чтобы зарегистрировать свое приложение. Регистрация в Firebase позволяет вам получить доступ к его ресурсам и использовать их для создания веб-приложения React.

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

Следующий, создать React-приложение и установите Firebase SDK в свое приложение. Кроме того, импортируйте реагировать-firebase-крючки пакет, упрощающий работу с Firebase In React.

npm установить firebase реагировать-firebase-хуки

Настройте Firebase в вашем приложении React

В вашей источник каталог, создайте новый файл и назовите его, firebase-config.js. Скопируйте переменные среды с панели управления проекта Firebase и вставьте их в этот файл.

Импортировать {инициализировать приложение} от"firebase/приложение";
Импортировать {получитьFirestore} от'@firebase/firestore';
Импортировать { getAuth, GoogleAuthProvider } от"firebase/авторизация";
константа firebaseConfig = {
 ключ API: "API_KEY",
 authDomain: "домен авторизации",
 идентификатор проекта: "идентификатор проекта",
 хранилищеВедро: «Ведро для хранения»,
 идентификатор отправителя сообщений: "идентификатор отправителя сообщения",
 идентификатор приложения: "Идентификатор приложения"
};
константа приложение = InitializeApp (firebaseConfig);
константа БД = getFirestore (приложение);
константа авторизация = getAuth (приложение)
константа провайдер = новый GoogleAuthProvider();
экспорт {дб, авторизация, провайдер}

Используя конфигурацию вашего проекта Firebase, вы инициализируете функции аутентификации Firebase, Firestore и Firebase для использования в вашем приложении.

Настройте базу данных Firestore

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

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

Наконец, обновите правила базы данных Firestore, чтобы разрешить операции чтения и записи из приложения React. Нажать на Правила вкладку и измените Прочитайте и напишите правило истинный.

После того, как вы закончите настройку базы данных, вы можете создать демонстрационную коллекцию — это база данных NoSQL в Firestore. Коллекции состоят из документов в виде записей.

Чтобы создать новую коллекцию, нажмите кнопку Начать сбор кнопку и укажите идентификатор коллекции — имя таблицы.

Интеграция аутентификации пользователей Firebase

Firebase предоставляет готовые аутентификация и авторизация решения, которые легко внедрить, такие как провайдеры входа через социальные сети или провайдер пользовательских паролей электронной почты.

На странице обзора вашего проекта выберите Аутентификация из списка отображаемых продуктов. Далее нажмите на Настроить способ входа кнопку для настройки провайдера Google. Выберите Google из списка поставщиков, включите его и заполните адрес электронной почты поддержки проекта.

Создайте компонент входа

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

в SignIn.js файл, добавьте код ниже:

Импортировать Реагировать от«реагировать»;
Импортировать {signInWithPopup} от"firebase/авторизация";
Импортировать { авторизация, провайдер } от'../firebase-config'

функцияВойти() {
константа войти с Google = () => {
 signInWithPopup (авторизация, провайдер)
 };
возвращаться (




экспортпо умолчанию Войти
  • Этот код импортирует объекты аутентификации и поставщика Google, которые вы инициализировали в файле конфигурации Firebase.
  • Затем он определяет Войти функция, реализующая знакинвиспопап метод из Firebase, который принимает аутентификация и провайдер компоненты в качестве параметров. Эта функция будет аутентифицировать пользователей с помощью их социальных логинов Google.
  • Наконец, он возвращает div, содержащий кнопку, которая при нажатии вызывает войти с Google функция.

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

Этот компонент будет содержать основную функцию вашего приложения чата, окно чата. Создайте новый файл внутри компоненты папку и назовите ее Чат.js.

Добавьте код ниже в Чат.js Файл:

Импортировать Реагировать, {useState, useEffect} от«реагировать»
Импортировать { БД, авторизация } от'../firebase-config'
Импортировать Отправить сообщение от'./Отправить сообщение'
Импортировать {коллекция, запрос, лимит, orderBy, onSnapshot} от"База огня/база огня";
функцияЧат() {
константа [сообщения, setMessages] = useState([])
константа {идентификатор пользователя} = auth.currentUser
 использоватьЭффект(() => {
константа д = запрос (
 коллекция (дб, "Сообщения"),
 Сортировать по("создан в"),
 лимит(50)
 );
константа данные = onSnapshot (q, (QuerySnapshot) => {
позволять сообщения = [];
 QuerySnapshot.forEach((документ) => {
 messages.push({...doc.data(), идентификатор: doc.id });
 });
 setMessages (сообщения) 

 });
возвращаться() => данные; 

 }, []);

возвращаться (
  • Этот код импортирует базу данных, компоненты аутентификации, инициализированные в firebase-config.js файл и настраиваемые методы Firestore, упрощающие работу с сохраненными данными.
  • Он реализует коллекция, запрос, ограничение, Сортировать по, и onSnapshot Методы Firestore для запроса и захвата моментального снимка текущих сохраненных данных в коллекции сообщений Firestore, упорядоченных по времени их создания, и считывают только 50 самых последних сообщений.
  • Методы Firestore завернуты и запускаются внутри использованиеЭффект ловушка, чтобы гарантировать, что сообщения отображаются немедленно, каждый раз, когда вы нажимаете кнопку отправки, без обновления окна страницы. Как только данные прочитаны, они сохраняются в состоянии сообщений.
  • Затем он проверяет, чтобы различать отправленные и полученные сообщения — если идентификатор пользователя, сохраненный в сообщении, совпадает. идентификатор пользователя для вошедшего в систему пользователя, а затем устанавливает имя класса и применяет соответствующий стиль для сообщение.
  • Наконец, он отображает сообщения, выход кнопка, и Отправить сообщение компонент. выход кнопка по щелчку обработчик вызывает auth.signOut() метод, предоставленный Firebase.

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

Создайте новый файл, SendMessage.js файл и добавьте следующий код:

Импортировать Реагировать, {useState} от«реагировать»
Импортировать { БД, авторизация } от'../firebase-config'
Импортировать {коллекция, addDoc, serverTimestamp} от"База огня/база огня";
функцияОтправить сообщение() {
константа [msg, setMsg] = useState('')
константа messagesRef = коллекция (db, "Сообщения");

константа отправитьСообщение = асинхронный (е) => {
константа {uid, photoURL} = auth.currentUser

Ждите addDoc (messagesRef, {
 текст: сообщение,
 createdAt: serverTimestamp(),
 ИД: ИД,
 фотоURL: фотоURL
 })
 setMsg('');
 };


возвращаться (




'Сообщение...'
 тип="текст" значение = {сообщение} 
 onChange={(e) => setMsg (e.target.value)}
 />


экспортпо умолчанию Отправить сообщение
  • Подобно Чат.js компонент, импортируйте методы Firestore и инициализированную базу данных и компоненты аутентификации.
  • Чтобы отправлять сообщения, Отправить сообщение функция реализует добавитьДокумент Метод Firestore, который создает новый документ в базе данных и сохраняет переданные данные.
  • добавитьДокумент Метод принимает два параметра: объект данных и ссылочный объект, указывающий, в какой коллекции вы хотите сохранить данные. Метод коллекции Firestore указывает коллекцию для хранения данных.
  • Наконец, он отображает поле ввода и кнопку на веб-странице, чтобы пользователи могли отправлять сообщения в базу данных.

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

Наконец, в вашем App.js файл, импортируйте Войти и Чат компоненты для отображения их в вашем браузере.

В вашей App.js файл, удалите шаблонный код и добавьте следующий код:

Импортировать Чат от'./компоненты/Чат';
Импортировать Войти от'./компоненты/Войти';
Импортировать { авторизация } от'./firebase-config.js'
Импортировать { useAuthState } от'реакция-firebase-крючки/аутентификация'
функцияПриложение() {
константа [пользователь] = useAuthState (авторизация)
возвращаться (
 <>
 {пользователь? <Чат />: <Войти />}
 </>
 );
}
экспортпо умолчанию Приложение;

Этот код отображает Войти и Чат компоненты условно, проверяя статус аутентификации пользователя. Статус аутентификации деструктурируется из компонента аутентификации Firebase с помощью использование AuthState крючок из реагировать-firebase-крючки упаковка.

Он проверяет, аутентифицирован ли пользователь, и отображает Чат компонента, в противном случае Войти компонент визуализируется. Наконец, добавьте любые стили CSS, запустите сервер разработки, чтобы сохранить изменения, и перейдите в браузер, чтобы просмотреть окончательные результаты.

Бессерверные функции Firebase

Firebase предоставляет ряд функций помимо базы данных в реальном времени и аутентификации. Вы можете использовать его бессерверные функции для быстрой загрузки и масштабирования любого приложения. Кроме того, Firebase легко интегрируется как с веб-приложениями, так и с мобильными приложениями, что упрощает создание кроссплатформенных приложений.