Приложение чата с реактивным встроенным (часть 5): Создайте и получить сообщения в реальном времени с Firestore

В Часть 4 , мы построили основу создания приложения чата путем добавления экранов UI, которые сосредоточены на отправке, получении и отображении сообщений чата. Мы использовали React-Nature-tabled-Chat Удивительная библиотека с открытым исходным кодом и погрунен в глубокое, чтобы использовать его «из коробки», чтобы добавить функции в приложение чата.

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

Хранить Чат Сообщения каждого потока/чата в коллекции Firestore
Как создавать Sub Collections внутри коллекции Firestore
Добавьте функцию для отображения последнего сообщения для каждого чата на главном экране
Получить данные из сбора огневых

И мало других вещей по пути. Давайте начнем.

Как получить текущую информацию о пользователе в приложении?

Помните, в Часть 2 При настройке аутентификации электронной почты между приложением чата и службой FireBase вы устанавливаете следующее AuthProvider который дает доступ к текущему пользователю, а также другим методам, которые уже используются в компонентах Экран входа в систему и Экран регистрации Отказ Вот ода для SRC/навигация/authprovider.js для вашей справки.

import React, { createContext, useState } from 'react';
import auth from '@react-native-firebase/auth';

/**
 * This provider is created
 * to access user in whole app
 */

export const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  return (
     {
          try {
            await auth().signInWithEmailAndPassword(email, password);
          } catch (e) {
            console.log(e);
          }
        },
        register: async (email, password) => {
          try {
            await auth().createUserWithEmailAndPassword(email, password);
          } catch (e) {
            console.log(e);
          }
        },
        logout: async () => {
          try {
            await auth().signOut();
          } catch (e) {
            console.error(e);
          }
        }
      }}
    >
      {children}
    
  );
};

Чтобы получить зарегистрированную информацию о пользователе (aka текущего пользователя), начните при импорте Authcontext в файле Roomscreen.js Отказ

// ... rest of the import statements
import React, { useContext, useEffect } from 'react';
import { AuthContext } from '../navigation/AuthProvider';

Далее, чтобы убедиться, что то вы получаете текущую информацию о текущей пользовательской информации, внутри Комнатный экран Компонент, добавьте следующие две строки.

export default function RoomScreen({ route }) {
  const { user } = useContext(AuthContext);
  const currentUser = user.toJSON();

  // ...
}

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

useEffect(() => {
  console.log({ user });
}, []);

Как использовать инструменты Chrome DEV с нативным приложением ADCT?

Существует два способа проверить выходные данные консольных утверждений в реактивный нативное приложение. Во-первых, консоль затвердевает триггеры в окне терминала, то будет Журнал запись как ниже с желаемым результатом.

Однако для лучшего полного контроля над Отладка , вы можете использовать инструменты Chrome DEV. Это можно сделать, открывая меню разработчика In-App, либо путем встряхивания устройства, либо, если вы используете симулятор iOS, нажмите команда + d Отказ На Android вам нужно нажать команда + м На Mac (для Windows нажмите Control + M ).

Меню разработчика, как приведено ниже.

Выберите опцию Отладка Отказ В вашем браузере по умолчанию Chrome он собирается открыть, как ни внизу.

Перейти к Консоль вкладка. Введите комнату чата из приложения. Если вам еще не нужно создавать чат, создайте один. На вкладке консоли вы собираетесь получить следующий результат.

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

Как хранить сообщения в FireStore?

В этом разделе вы собираетесь добавить бизнес-логику, а также возможность хранить разговор чата между несколькими пользователями в чате. Эти сообщения будут храниться в подборке.

Основная причина создания Sub Collection состоит в том, что когда создается новый чат, сохраняя все данные, связанные с этим чатом, в своей собственной коллекции – хорошая идея. Это сказано, когда создан новый чат, внутри коллекции Темы Создается новый документ с уникальным идентификатором.

Внутри этого вы собираетесь добавить другую коллекцию под названием СООБЩЕНИЯ Это только собирается хранить разговор чата, который происходит в этом чате. Это станет ясно, как вы действуете в этом разделе.

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

import React, { useState, useContext, useEffect } from 'react';
import firestore from '@react-native-firebase/firestore';

Чтобы получить ID текущего чата ( это важно ) Вы должны пройти Маршрут как параметр для Комнатный экран Функциональный компонент. С тех пор, от предыдущего экрана, нить Объект пропускается, что дает идентификатор комнаты чата ( или Threat ID ) в коллекции Firebase Темы Отказ Использование Route.Params Вы можете получить весь нить объект. Это возможно из-за Реагистрационная навигация Отказ

export default function RoomScreen({ route }) {
  // ... rest of the code
  const { thread } = route.params;
}

Далее измените метод асинхронного помощника рукоятки Отказ Этот метод используется для отправки сообщения, как вы, возможно, уже видели в части 4.

Внутри этого метода помощника получают текст каждого сообщения отправить пользователем. Затем создайте Sub Collection Сообщения Ссылаясь на правильный идентификатор текущего потока, пользователь разговаривает. Использование Добавить () Вы можете добавить новый документ с автоматическим сгенерированным уникальным идентификатором для каждого сообщения внутри Sub Collection.

Пройти на объекте с полями, такими как текст Это представляет текст каждого сообщения, Timestamp он отправляет или создается в информации, а пользовательская информация (такая как пользователь uid и Email ).

async function handleSend(messages) {
  const text = messages[0].text;

  firestore()
    .collection('THREADS')
    .doc(thread._id)
    .collection('MESSAGES')
    .add({
      text,
      createdAt: new Date().getTime(),
      user: {
        _id: currentUser.uid,
        email: currentUser.email
      }
    });
}

Вернитесь на симулятор, создайте новую комнату и отправьте сообщение.

В консоли Firebase вы собираетесь заметить, что внутренняя Темы Коллекция, подкозда под названием Сообщения создается, как показано ниже.

Игнорировать Последнее уточнение Поле, мы охватим это в следующем разделе. Изображение ниже отображается, что сообщения хранятся с правильной информацией.

Отображение последнего сообщения для каждого чата на главном экране

В этом разделе вы собираетесь обновить Темы Коллекция с новым полем под названием Последнее уточнение Что вы уже видели в предыдущем разделе, в консоли Firebase.

Преимущество этого поля даст нам (что мы будем завершены позже) – это показать последнее или последнее сообщение отправить в определенном чате, чтобы отображаться на главном экране, где уже существует поле описания комнаты. Это сохранит пользователя, чтобы заглянуть на последнее сообщение, не открывая комнату, чтобы увидеть, есть ли какие-либо новые сообщения или нет.

Для начала все, что вам нужно сделать, это обратитесь к текущему потоку, используя его идентификатор, то Установить объект, имеющий поле Последнее уточнение с текст и Создать Свойства времени времени. Затем пройдите во второй объект, который имеет свойство слияние .

async function handleSend(messages) {
  // ...

  await firestore()
    .collection('THREADS')
    .doc(thread._id)
    .set(
      {
        latestMessage: {
          text,
          createdAt: new Date().getTime()
        }
      },
      { merge: true }
    );
}

В огнестрельном, когда Установить используется с слияние , он обновляет поля в документе или создать этот документ, если он не существует. Если вы используете Установить здесь без слияние Он перезаписывает весь документ.

Как извлечь сообщения от Firestore, чтобы отобразить в чате?

Для отображения сообщений в чате, как только они отправляют пользователем, эти сообщения должны быть выгодны из подковыки FireStore, созданные предыдущие разделы, Сообщения Отказ

Чтобы получить данные, давайте использовать Useffect крюк. Эффект крюк Позволяет добавить побочные эффекты на функциональные компоненты. В предыдущих версиях реагирования и реагирования на родных, это можно сделать, используя методы жизненного цикла, такие как ComponentDidMount () и другие разные методы в компонентах класса. Useffect Крюк может выполнять несколько побочных эффектов, таких как получение данных и более по-разному.

Чтобы получить сообщения, сначала вы должны пройти через текущую нить, используя свой идентификатор, то подсекание СООБЩЕНИЯ . При пересечении подкладки обязательно заказывайте сообщения, чтобы отобразить их в порядке убывания в соответствии с тем, как они были отправлены.

Тогда используя Querysnapshot Вы можете карта Массив сообщений из Sub Collection. Снимок запроса в FireStore содержит нулевые объекты или более объектов внутри массива, представляющего результаты запроса.

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

В части 4 вы видели, как выглядит сгенерированное системой сообщение. Это означает, что если сообщение генерируется при создании чата или нет.

Если сообщение не сгенерировано системой, это означает, что он отправляет пользователем. Вам придется добавить электронную почту пользователя (или любые другие данные могут быть добавлены, такие как отображаемое имя пользователя) к данные объект. Добавьте следующую фрагмент.

async function handleSend(messages) {
  // ...

  useEffect(() => {
    const messagesListener = firestore()
      .collection('THREADS')
      .doc(thread._id)
      .collection('MESSAGES')
      .orderBy('createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        const messages = querySnapshot.docs.map(doc => {
          const firebaseData = doc.data();

          const data = {
            _id: doc.id,
            text: '',
            createdAt: new Date().getTime(),
            ...firebaseData
          };

          if (!firebaseData.system) {
            data.user = {
              ...firebaseData.user,
              name: firebaseData.user.email
            };
          }

          return data;
        });

        setMessages(messages);
      });

    return () => messagesListener();
  }, []);
}

Сообщения в чате будет отображаться как следующее.

Чтобы сделать всю эту работу, обязательно измените следующие два реквизита в операторе возврата.

);

Как установить системное сообщение в качестве последнего сообщения в чате?

Прямо сейчас Темы Коллекция для каждого зала для чата может отображать последнее сообщение, отправленное пользователем, но когда создается поток, вы можете отобразить систему, сгенерированное сообщение, чтобы передать одно и то же сообщение для ввода чата. Сделать это, открыть Addroomscreen.js Файл и измените его помощник методом помощника HandleButtonpress добавить следующий фрагмент.

Сначала вы собираетесь добавить Последнее уточнение Объект с его текстовым полем, говоря, что комната создана. Не забудьте добавить поле Timestamp вместе с текстовым полем.

Второй шаг – добавить Docref или ссылка на документ на подборку СООБЩЕНИЯ . Обратите внимание, что на данный момент, когда пользователь создает новую комнату, эта подкорация будет создана для каждого чата.

Ссылка на документ в FireStore используется для записи, прочитанного или прослушивания определенного местоположения или подсекание внутри коллекции Firestore.

Документ или в текущем случае, коллекция СООБЩЕНИЯ может не существовать, но добавление этого шага создаст коллекцию. Это первое сообщение в чате также собирается создать систему сообщение.

function handleButtonPress() {
  if (roomName.length > 0) {
    firestore()
      .collection('THREADS')
      .add({
        name: roomName,
        latestMessage: {
          text: `You have joined the room ${roomName}.`,
          createdAt: new Date().getTime()
        }
      })
      .then(docRef => {
        docRef.collection('MESSAGES').add({
          text: `You have joined the room ${roomName}.`,
          createdAt: new Date().getTime(),
          system: true
        });
        navigation.navigate('Home');
      });
  }
}

Теперь, когда вы создаете новую комнату через приложение, вот полный обзор того, как он отражается в FireStore.

И вот системное сообщение отображается в новом чате.

Настройка системного сообщения в React – Nature-tabled-Chat

Прямо сейчас генерируется системное сообщение не является апелляцией и транспортировкой внутри чата. В этом коротком участке давайте узнаем, как настроить это в React-Nature-tabled-Chat Отказ

Начните, импортируя SystemMessage Компонент из React-Nature-tabled-Chat внутри Roomscreen.js файл.

import {
  GiftedChat,
  Bubble,
  Send,
  // Add this
  SystemMessage
} from 'react-native-gifted-chat';

Создать новый помощник методом под названием RenderSystemMessage Внутри компонента экрана со следующим фрагментом. В текущем сценарии вы собираетесь изменить фон отображения системы системы, а также стили текста. Для этого вам нужно редактировать реквизиты wrapperstyle и TextStyle SystemMessage компонент.

Сделать модифицировать Stylesheet Объект для добавления стилей, как показано ниже.

function renderSystemMessage(props) {
  return (
    
  );
}

// appropriate styles

const styles = StyleSheet.create({
  // ... rest of the styles remain unchanged
  systemMessageText: {
    fontSize: 14,
    color: '#fff',
    fontWeight: 'bold'
  }
});

Наконец, добавьте опоры RenderSystemMessage к GiftedChat компонент.

return (
  
);

Вот выход, вы собираетесь получить после этого шага.

Как отобразить последнее сообщение на главном экране?

Для каждого чата на главном экране есть описание поле, которое говорит, что статическое сообщение Описание товара Отказ В этом разделе позвольте нам изменить, что для динамического отображения последнего сообщения в режиме реального времени выявлено из коллекции Firestore.

Открыть Homescreen.js и orderby () При получении имени чата комнаты в эффекте крюк. Затем при возврате данных DocumentNaPshot есть объект, который содержит поля, такие как _id и Имя Отказ Добавьте еще один объект как поле под названием Последнее уточнение как показано ниже.

useEffect(() => {
  const unsubscribe = firestore()
    .collection('THREADS')
    // add this
    .orderBy('latestMessage.createdAt', 'desc')
    .onSnapshot(querySnapshot => {
      const threads = querySnapshot.docs.map(documentSnapshot => {
        return {
          _id: documentSnapshot.id,
          name: '',
          // add this
          latestMessage: {
            text: ''
          },
          // ---
          ...documentSnapshot.data()
        };
      });

      setThreads(threads);

      if (loading) {
        setLoading(false);
      }
    });

  return () => unsubscribe();
}, []);

Далее иди к Список. Предмет внутри Плотник Компонент и измените поле описания, как показано ниже.

description={item.latestMessage.text}

Вернитесь к симулятору, и вы собираетесь увидеть последнее сообщение.

Попробуйте отправить новое сообщение, и это будет последнее сообщение, отображаемое на главном экране для чата.

Есть преимущество в том, чтобы заказать чаты комнаты в соответствии с последним сообщением для каждой комнаты. Теперь на главном экране будет отображаться этот чат на вершине, которая получила его самым последним сообщением в соответствии с временем (созданием), связанного с сообщением.

Что дальше?

В следующей части серии мы собираемся исправить небольшую ошибку, связанную с стилями строки состояния для каждого компонента экрана в текущем приложении. Это будет сделано путем создания пользовательского крючка и используя Реагистрационная навигация Отказ Быть в курсе.

😺 Вы можете найти полный код здесь в этом Github repo Отказ

👉 Вот список ресурсов, используемых в этом руководстве:

Первоначально опубликовано в HeartBeat.fritz.ai

👉 Для получения дополнительных постов на реагировать родных и реагирует, оформить мой личный блог на amanhimself.dev Или подписаться на мою бидовой бюллетень здесь И никогда не пропустите пост 🙃.

Оригинал: “https://dev.to/amanhimself/chat-app-with-react-native-part-5-create-and-fetch-real-time-messages-with-firestore-5fdc”