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

Команда 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. Вместо наблюдаемых объектов для улучшения производительности компонентов.