Приложение чата на 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
. Вместо наблюдаемых объектов для улучшения производительности компонентов.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: