Представление приложения для чата в реальном времени + особенности и демонстрация

Привет всем, я рад поделиться своим путешествием по созданию приложения для чата в реальном времени с использованием Firebase, React, Express, MongoDB и Socketio. Я буду рассказывать о том, как все склеивается, и о любых заминках на этом пути, так что следите за новостями.

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

Вот несколько скриншотов того, что мы будем иметь к концу серии.

Основные функциональные возможности

  • Пользователи могут регистрироваться/входить в систему с помощью электронной почты и пароля.
  • Страница профиля, где пользователи могут обновить свой аватар и имя.
  • Генерация случайных аватаров с помощью API DiceBear.
  • Пользователи могут создать комнату для общения с другими пользователями.
  • Пользователи могут видеть статус онлайн.
  • Функциональность поиска.
  • Общение в чате происходит в режиме реального времени.
  • Интегрирована функция выбора Emoji.
  • Можно включить темный режим.

Используемые технологии

1) React: React — это востребованная JavaScript-библиотека для создания пользовательских интерфейсов безболезненно. Мы будем использовать react router для маршрутизации между различными страницами, socket.io-client для двунаправленной связи с сервером, контексты для передачи текущего аутентифицированного пользователя каждому компоненту, и такие методы, как filter и includes для функциональности поиска.

Не хочу начинать очередную войну между Angular и React, но 👇 😃.

2) TailwindCSS: TailwindCSS — это CSS-фреймворк для быстрой разработки пользовательского интерфейса. Кто не испытывает трудностей с центрированием div? Но если говорить серьезно, то Tailwind делает работу с CSS гораздо более легкой. Кроме того, в отличие от Bootstrap, он не ограничивает вас набором дизайнерских решений.

3) Firebase: Firebase — резервное копирование как услуга (Baas). Облачные вычисления изменили то, как мы используем технологии. Модель облачных сервисов BaaS позволяет разработчикам сосредоточиться на фронтенде приложения, абстрагируясь от всего того, что находится за ним. Мы собираемся использовать сервис аутентификации, предоставляемый Firebase.

Вот поток аутентификации проекта с использованием Firebase:

  • React отправит запрос в Firebase для регистрации/входа пользователя.
  • Firebase передаст токен в React.
  • React будет использовать этот токен для отправки последующих запросов на сервер Express.
  • Сервер Express проверит токен с помощью Firebase admin SDK и отправит ответ обратно в React.

4) Node/Express: Я использовал Django для бэкенда большинства моих проектов. DRF + React — это хорошая штука. Однако, если я разрабатываю приложение с полным стеком, переключение туда-сюда между Python и JavaScript — это, хм, ну, немного больно. Кроме того, для такого приложения, как это, асинхронная природа Express кажется лучше. Мы создадим конечные точки API чата, а также промежуточное ПО, которое будет проверять токены, поступающие из React.

5) MongoDB: MongoDB является одним из крупнейших игроков, когда речь идет о нереляционных базах данных. Приложение будет иметь 2 модели, ChatRoom и ChatMessage. Пользователи сначала создадут комнату, чтобы начать обмен сообщениями. В каждой комнате будет 2 участника, а модель ChatMessage будет содержать комнату и отправителя вместе с сообщением.

6) Socketio: Каким будет приложение для чата без веб-сокетов? Socketio обеспечивает двунаправленную связь между веб-клиентами и серверами в режиме реального времени. Используя Socketio, мы сделаем приложение работающим в реальном времени, а также добавим функцию онлайн/оффлайн.

Исходный код готового приложения: https://github.com/earthcomfy/lets-chat.

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

Оцените статью
devanswers.ru
Добавить комментарий