Как построить чат в реальном времени с Firebase и реагировать (крючки)

Автор оригинала: FreeCodeCamp Community Member.

Aswin M Prabhu

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

У Firebase есть две варианты базы данных, которые имеют удивительные Возможности в реальном времени Отказ Например, вы можете подписаться на изменения в документе, хранящемся в FireBase Cloud FireStore, со следующим фрагментом JavaScript.

db.collection("cities").doc("SF")    .onSnapshot(function(doc) {        console.log("Current data: ", doc.data());    });

Обратный вызов, предоставленный для onsnapshot () Функция срабатывает каждый раз, когда документ меняется. Местные пишеты из вашего приложения будут немедленно выстрелить с функцией, называемой задержкой компенсации.

Реактивные крючки являются предстоятельными функциями RECT, которые позволяют использовать состояние и другие функции реагирования без записи класса. В настоящее время они в реакции V16.7.0-alpha. Создание этого приложения – отличный способ изучить будущее реагирования с реактивными крючками.

Конечный продукт станет IRC, как Global Chatroom App, в котором мы сначала попросите пользователю ввести прозвище. Простой.

Леса

Новое приложение React App может быть легко создано с официальным Create-React-App CLI Tool со следующими терминальными командами (React Clots нуждается в Rection и React-DOM V16.7.0-ALPHA).

npm i -g create-react-appcreate-react-app react-firebase-chatroomcd react-firebase-chatroomnpm i -S react@16.7.0-alpha.2 react-dom@16.7.0-alpha.2

Настройка Firebase также довольно прямая. Создайте новый проект от Консоль Firebase Отказ Установите базу данных в режиме реального времени FireBase в режиме тестирования. Инициализировать локальный проект с Firebase-Tools команда. Выберите базу данных в реальном времени и хостинг в качестве включенных функций. Выберите построить как общественный каталог. Каждый другой вариант может быть оставлен как есть.

npm i -g firebase-toolsfirebase-tools initnpm i -S firebase

Это может потребоваться в логине, прежде чем вы сможете инициализировать репозиторий.

Структура базы данных будет выглядеть следующим образом.

Создание приложения, используя новые компоненты на основе старика

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

Пользователю будет предложено присоединиться к псевдому и электронным письмом, если присоединился к Переменная – это ложный . Изначально установлено значение false в конструктор .

constructor() {    super();    this.state = {      joined: false,      nickname: "",      email: "",      msg: "",      messages: {},    };    this.chatRoom = db.ref().child('chatrooms').child('global');    this.handleNewMessages = snap => {      console.log(snap.val());      if (snap.val()) this.setState({ messages: snap.val() });    };  }

  componentDidMount() {    this.chatRoom.on('value', this.handleNewMessages);  }

  componentWillUnmount() {    this.chatRoom.off('value', this.handleNewMessages);  }

Все сообщения первоначально выбираются из Firebase в ComponentDidmount Способ жизненного цикла. на Метод на БД Ref принимает Тип события и обратный вызов как аргументы. Каждый раз, когда пользователь отправляет новое сообщение и обновляет базу данных, Handlwmessages Функция получает снимок обновленных данных и обновляет состояние с новыми сообщениями. Мы можем отписаться от обновлений базы данных в ComponentWillunmount Метод жизненного цикла с использованием Выкл. Метод на БД Ref.

Сообщение может быть отправлено путем добавления сообщения в чат REF в базе данных. толчок Метод реф генерирует уникальный идентификатор для новой записи и добавляет его к существующим данным.

this.chatRoom.push({  sender: this.state.nickname,  msg: this.state.msg,});

Сообщения отображаются зацикливанием по Сообщения объект.

{Object.keys(this.state.messages).map(message => {  if(this.state.messages[message]["sender"] === this.state.nickname)    // render the user's messages        else    // render messages from other users})}

Финал Приложение Компонент будет выглядеть так.

Найти гист здесь Отказ

Мигрирование для реактивных крюков

Простейший крючок – это Уместите крюк. Он принимает начальное состояние и возвращает переменную состояния и функцию, которая позволяет вам обновить. Эта функция действует как замена для this.setState Отказ Например, логика состояния псевдонима может быть изменена следующим образом.

const [nickname, setNickname] = useState("");const handleNameChange = e => setNickname(e.target.value);...// during render

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

useEffect(() => {  const handleNewMessages = snap => {    if (snap.val()) setMessages(snap.val());  }  chatRoom.on('value', handleNewMessages);  return () => {    chatRoom.off('value', handleNewMessages);  };});

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

По умолчанию Useffect работает как после первого визуализации и после каждого обновления.

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

function useEmail(defaultEmail) {  const [email, setEmail] = useState(defaultEmail);  const [isValidEmail, setValidEmail] = useState(defaultEmail);

  function validateEmail(email) {    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;    return re.test(String(email).toLowerCase());  }

function handleEmailChange(e) {    if (validateEmail(e.target.value)) {      setValidEmail(true);    }    setEmail(e.target.value);  }  return {    email,    handleEmailChange,    isValidEmail  };}

А в ваших компонентах вы можете использовать пользовательский крюк, как показано ниже.

// in your componentsconst { email, handleEmailChange, isValidEmail } = useEmail("")...// show error message based on isValidEmail

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

Финал Приложение Компонент выглядит следующим образом.

Найти гист здесь Отказ

Есть больше для чтения на крючках

Найти Окончательное приложение с голым минимальным стилем.

Спасибо за чтение и счастливого взлома!

Найди меня на Twitter и Github Отказ

Оригинал: “https://www.freecodecamp.org/news/how-to-build-a-real-time-chatroom-with-firebase-and-react-hooks-eb892fa72f1e/”

Леса

Создание приложения, используя новые компоненты на основе старика

Мигрирование для реактивных крюков

Есть больше для чтения на крючках

Читайте ещё по теме: