chat application (RxJS) and (Angular 2)

This repo shows an example chat application using RxJS and Angular 2. The goal is to show how to use the Observables data architecture pattern within Angular 2. It also features:

• Angular CLI, which configures Webpack with TypeScript, Karma, and tslint
• Writing async components that work with RxJS
• How to write injectable services in Angular 2
• And much more

Try the live demo here

# 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

Then visit http://localhost:4200 in your browser.

The app has three models:

• Message – holds individual chat messages
• Thread – holds metadata for a group of Messages
• User – holds data about an individual user

And there are three services, one for each model:

• MessagesService – manages streams of Messages
• ThreadsService – manages streams of Threads
• UserService – manages a stream of the current User

There are also three top-level components:

• ChatNavBar – for the top navigation bar and unread messages count
• ChatThreads – for our clickable list of threads
• ChatWindow – where we hold our current conversation

Each service publishes data as RxJS streams. The service clients subscribe to these streams to be notified of changes.

The MessagesService is the backbone of the application. All new messages are added to the newMessages stream and, more or less, all streams are derived from listening to newMessages. Even the Threads exposed by the ThreadsService are created by listening to the stream of Messages.

There are several other helpful streams that the services expose:

For example, the MessagesService exposes the messages stream which is a stream of the list of the all current messages. That is, messages emits an array for each record.

Similarly, the ThreadsService exposes a list of the chronologically-ordered threads in orderedThreads and so on.

Understanding how RxJS streams can be tricky, but this code is heavily commented. One strategy to grokking this code is to start at the components and see how they use the services.