Приложение чата на RxJS и Angular 2

Богдан Мирченко

24.05.2021 18:25

Команда ng-book 2 разработала чат-приложение с использованием Angular 2, RxJS, Angular CLI, Webpack, TypeScript, Services, Injectables, Karma, Forms и tslint. Цель — показать, как использовать шаблон архитектуры данных Observables, как писать инъекционные сервисы в Angular 2 и асинхронные компоненты, работающие с RxJS.

Приложение чата

Демо-версия доступна по ссылке.

Быстрый старт

# clone the repo
git clone https://github.com/ng-book/angular2-rxjs-chat.git

# change into the repo directory
cd angular2-rxjs-chat

# install
npm install

# run
npm start

Перейдите по адресу http://localhost:4200 в браузере.

Архитектура приложения

Приложение состоит из трех модулей:

Message — содержит отдельные сообщения чата;
Thread — содержит метаданные для группы Message;
User — содержит данные об отдельном пользователе.

Структура приложения

Также для каждой модели есть три услуги:

MessagesService — управляет потоками сообщений;
hreadsService — управляет потоками Threads;
UserService — управляет потоком текущего пользователя User.

Три компонента верхнего уровня:

ChatNavBar — для верхней панели навигации подсчета непрочитанных сообщений;
ChatThreads — для интерактивного списка тем;
ChatWindow — окно, где проводится текущий разговор.

Компоненты верхнего уровня

Сервисы управления наблюдаемыми объектами

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

MessagesService — это основа приложения. Все новые сообщения добавляются в потом newMessages. Все новые потоки являются производными от прослушивания newMessages. Потоки, предоставляемые ThreadsService, создаются путем прослушивания потока сообщений.

Примечание: есть несколько других полезных потоков, которые предоставляют сервисы:

Например, MessagesService предоставляет поток сообщений, который является потоком списка всех текущих сообщений. messages выдает массив для каждой записи. Аналогично ThreadsService предоставляет список хронологически упорядоченных потоков в orderThreads и так далее.

Боты

В приложении реализовано несколько чат-ботов. Например:

Echo-бот;
Reverse-бот;
Waiting-бот.

Бот для приложения

Установка

Шаг 1: Установите Node.js (авторы рекомендуют версию 4.1 и выше).

Проверить версию можно следующей командой:

$ node -v
vv4.1...

Шаг 2: Установите зависимости.

npm install

Запуск приложения

npm run go

Затем перейдите по адресу http://localhost:4200 в браузере.

Тестовый запуск

Запуск тестов можно проводить с помощью следующей команды:

npm run test

Вот и все! После стабилизации разработки Angular 2 авторы планируют внести в репозиторий два больших изменения:

Добавить HTTP-запросы. Сейчас все боты работают на стороне клиента, в чатах нет HTTP-запросов. Чат-боты будут перенесены на сервер;
Обнаружение изменений ON_PUSH. Вместо наблюдаемых объектов для улучшения производительности компонентов.