Angular2 Tutorial: Developing a Realtime Chat App

Angular 2 Chat Application
Angular 2 Chat Application

Hi guys, today we’re going to make an awesome chat application with Angular2, NodeJS and Socket.io, this tutorial will involve quite a lot of things, and there are also lots of small details, so it will be a little bit longer than usual. To easily understand and make the most of it you should already have some knowledge about all the frameworks involved, if something is unclear for you please let me know in the comments, I’ll try to explain it better. With that in mind let’s stop wasting time and get started!

Setting up the Environment

I’m going to use Express to create my project, if you’re new to express and don’t know how to do it click here to see the instructions. After creating the project there will be a file called package.json on the project folder, that’s where all the dependencies are listed, open this file and copy/paste the following code:

{
  "name": "angular2-chat",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "postinstall": "npm run typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "start": "concurrent \"node ./bin/www\" \"npm run tsc:w\"",
    "typings" : "typings"
  },
   "license": "ISC",
  "dependencies": {
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "express": "~4.13.1",
    "jade": "~1.11.0",
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0",
    "angular2": "2.0.0-beta.16",
    "systemjs": "0.19.26",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.12",
    "socket.io":"1.4.5"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^0.8.1"
  }
}

Besides the NodeJS and Express dependencies (which were already there), I’ve also added Socket.io and everything related to Angular2. If you run the command npm install on your terminal it’ll download and put all the dependencies on a folder called /node_modules. Lots of scripts from this folder will be used on the front-end, so we have to reference them on the index.html file, which we’re going to create right now.

Open the /views folder and create the index.html with the following code:

<html>
  <head>
    <base href="/">
    <title>Chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.5/socket.io.min.js"></script> 
    <script src="scripts/es6-shim/es6-shim.min.js"></script>
    <script src="scripts/systemjs/dist/system-polyfills.js"></script>
    <script src="scripts/angular2/bundles/angular2-polyfills.js"></script>
    <script src="scripts/systemjs/dist/system.src.js"></script>
    <script src="scripts/rxjs/bundles/Rx.js"></script>
    <script src="scripts/angular2/bundles/angular2.dev.js"></script>
    <script src="scripts/angular2/bundles/router.dev.js"></script>
    <script src="javascripts/jquery.js"></script>
    <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <script 
      src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('javascripts/app/main.js')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <body>
    <chat-app>Loading...</chat-app>
  </body>
</html>

This file is very similar to the one from Angular2 Quickstart, but as you can see I’ve added three more scripts: Socket.io and the Materialize css and js files (materialize is a CSS framework we’re going to use for styling). If you pay attention to this code you should notice that I’m not referencing the scripts from /node_modules, instead they’re coming from a folder called /scripts. But where does this folder come from? I’m going to explain in a moment.

One more thing, in order to make Angular2 work you’ll need three more configuration files : tsconfig.json, typings.json and main.ts. All of them can be found on the Angular2 Quickstart.

Now let’s open the app.js file that Exapress created for us, you’ll see that it already has some code, in order to make things easier I’m going to get rid of some lines of code we don’t need, after the modifications the file should look like this:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var app = express();
 
app.use('/scripts', express.static(__dirname + '/node_modules/'));
app.use('/templates', express.static(__dirname + '/views/templates/'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
 
app.use('/', routes);
 
/* Handle 404. */
app.use(function(req, res, next) {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
});
 
module.exports = app;

Just after the var app = express(); line I’ve configured the paths /scripts (which we saw in the index.html) and /templates to serve some static files from /node_modules and /views/templates respectively. I had to do this because by default Angular 2 won’t have access to these folders. But now, if I request a file from /scripts this configuration will make NodeJS understand that it’s located on /node_modules.

At the end of the code (just above module.exports) I’ve changed how 404 errors are handled, instead of forwarding an error (as it was before) I’m redirecting to index.html. This will avoid some problems when we start using Angular2 routes.

Another thing we have to do is to make NodeJS and Angular2 work together, open the file /routes/index.js and replace the existing code with the following:

var express = require('express');
var router = express.Router();
var path = require('path');
 
/* GET home page. */
router.get('/', function(req, res, next) {
  res.sendFile(path.join(__dirname, '../', 'views', 'index.html'));
});
 
module.exports = router;

By default it was rendering a .jade file (express uses jade as the default view engine), and as I’m not interested in jade for this project I just changed this file a little bit in order to make it redirect to my index.html where Angular2 can control the views. For more details about this modification click here.

At this point we’ve already configured everything we need in our project to start developing our chat app, new let’s start talking about how the application is going to work.

Defining the Structure

Our chat app will be composed of three Angular2 components, the first one will be a form where the user will be allowed to enter his name and join the chat, the second will be the chat itself, and the last will be where we’re going to configure to routes for controlling which of the other two components should be displayed.

On the back-end we’ll have Socket.io being responsible for receiving the messages and delivering them to all the other users, we won’t store the messages there, each client will have its own messages list where every received message will be added.

Creating the Socket.io Server

Before we proceed to the front-end we first have to create the Socket.io server and prepare it to receive messages from the clients, to do that you have to create a new file on your project root folder called socket.js with the following code:

var express = require('express');
var app = express();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);
 
var chat = {
	start: function(){
		server.listen(8000);
		io.set("origins", "*:*");
 
		io.on('connection', function (socket) {         // line 12
			socket.on('newMessage', function (data) {
				socket.emit('chatUpdate',data);
				socket.broadcast.emit('chatUpdate',data);
			});
			socket.on('newUser', function (data) {
				socket.emit('chatUpdate',
					{'userName':'','text':data+' has entered the room'});
				socket.broadcast.emit('chatUpdate',
					{'userName':'','text':data+' has entered the room'});
			});
		});	
	}
}
 
module.exports = chat;

Now probably is the best time for me to explain how Socket.io works, according to the official site Socket.IO is a framework that enables real-time bidirectional event-based communication, in other words you can create your own events that will allow the server to communicate with the clients and vice-versa. You can add listeners to these events and also emit events from both sides (client and server), once an event is emitted it will trigger its listener on the other side to execute an specific task. To emit events you can use the function emit() passing the event name and your data, and to add a listener you have to use the function on() with the event name as the first parameter and the callback function as the second.

Easy, right? Now that you understand how Socket.io works let’s analyze our code. The first thing I did here was to create a socket.io server that listens on port 8000, but let’s focus on the events, on the server side there is one event that we always have to use in order to start the communication with the clients, this event is called connection, it will be automatically emitted by the each client when it connects to the server (obviously), clearly we have to add a listener to proceed with the communication, as you can see in the code I’m doing it on line 12. Now take a look at the callback function associated with this listener, you’ll see that it’s registering listeners for two more events: newMessage and newUser. The first one is emitted when a user sends a message, and the second one when a new user joins the chat, the action performed by both is very similar, they will just emit another event called chatUpdate to notify all the connected clients about the new message or user. Note that when I emit this event I’m using both socket.emit() and socket.broadcast.emit(), the first one will notify the client who triggered the event, and the second will do the same to all the other clients.

Let’s add the following two lines bellow the var app = express(); on our app.js:

var socketServer = require('./socket');
socketServer.start();

Perfect! This will make the socket.io server initialize right after the application starts. We’re done with the back-end now, let’s start creating the angular2 components.

Creating the User Registration Component

We can finally start writing some Angular2 code, open the /public/javascripts folder and create a new one called /app, that’s where we’re going to put our angular2 components. Open this new folder and add a new file called userRegistration.component.js, then copy/paste the following code:

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';
 
@Component({
    selector: 'user-registration',
    templateUrl: 'templates/registration.html'
})
export class UserRegistrationComponent {
    userName = '';
    socket = null;
 
    constructor(
        private _router: Router){}
 
    ngOnInit() {
        this.socket = io('http://localhost:8000');
    }
 
    login() {
        if (this.userName !== null){
            sessionStorage.setItem("userName", this.userName);
            this._router.navigate(['Chat']);
            this.socket.emit('newUser', this.userName);
        }
    }
 
    keypressHandler(event) {
        if (event.keyCode  === 13){
            this.login();
        }
    } 
}

This will be the component where the user is going to enter his name and join the chat, I’ve used the hook ngOnInit to connect to the Websocket server, this will automatically emit the connection event I just talked about. I also have the login() method, which is responsible for putting the provided userName on the sessionStorage and emit the newUser event. Although I’m using the sessionStorage to store the user, I don’t recommend you to do it, it’s not very safe, any user with some javascript knowledge will be able to modify what’s in the sessionStorge.

Note that I’ve created a new file to put the template, it’s called registration.html and it’s located on the folder /views/templates, here’s the code:

<style type="text/css">
	.registrationContainer{margin-top:20%;padding:15px;box-shadow: 3px 2px 7px -1px}
	.registrationContainer button{float: right;}
</style>
<div class="container">
	<div class="col s11 registrationContainer">
 
        <div class="row">
            <div class="input-field col s12">
                <input [(ngModel)]="userName" id="userName" 
                	type="text" (keypress)="keypressHandler($event)">
                <label for="userName">Please enter your name</label>
            </div>
        </div>
	    <button (click)="login()" type="submit" 
	    	class="btn waves-effect waves-light col s3"  
	    	name="action" >Login</button>
	    <div style="clear:both;"></div>
	</div>
</div>

Nothing special here, just an input where the user can type his name and a button to call the login() function. The CSS classes you can see here are from materialize.

Creating the Chat Component

Now comes the most important part, the chat.component.ts:

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';
 
@Component({
    selector: 'chat',
    templateUrl: 'templates/chat.html'
})
export class ChatComponent {
    message = '';
    conversation = [];
    socket = null;
 
    constructor(
        private _router: Router){}
 
    ngOnInit() {
        if (sessionStorage.getItem("userName") === null){
            this._router.navigate(['Registration']);
        }
        this.socket = io('http://localhost:8000');
        this.socket.on('chatUpdate', function(data) {
            this.conversation.push(data);
        }.bind(this));
    }
 
    send() {
        this.socket.emit('newMessage', {
            'userName': sessionStorage.getItem("userName"),
            'text': this.message
        });
        this.message = '';
    }
 
    keypressHandler(event) {
        if (event.keyCode === 13){
            this.send();
        }
    } 
 
    isNewUserAlert(data){
        return data.userName === '';
    }
}

Again I’m using the ngOnInit hook to connect to server, but this time there are a couple more things I’m doing here, I’m checking the sessionStorage to see if it contains the userName, if it doesn’t the user will be redirected to the registration component, and I’m also adding a listener to the chatUpdate event, so when a new message arrives it’ll be added to the conversation array.

The send() method is responsible for triggering the newMessage event, it just get the message typed by the user and send it to the server, it’ll be executed when the user click on the send button or press enter.

Here’s the template:

<style type="text/css">
	.userLabel{font-weight:bold;color:#26A69A;margin-right:10px}
	.chatContainer{height:85%;padding:15px;overflow-y:auto }
</style>
<div class="col s12">
	<div class="col s12 chatContainer">
        <ul *ngFor="#msg of conversation" style="margin:0">
            <li >
            	<div *ngIf="!isNewUserAlert(msg)">
	                <span  class="userLabel" >{{msg.userName}}:</span>
	                <span>{{msg.text}}</span>
                </div>
            	<div *ngIf="isNewUserAlert(msg)">
            		<span style="font-weight:bold">{{msg.text}}</span>
	            </div>
            </li>
        </ul>
	</div>
	<div class="row">
		<div class="col s9">
          <input id="country" type="text"  
          	[(ngModel)]="message" 
          	(keypress)="keypressHandler($event)">
        </div>
		<button (click)="send()"  type="submit" 
			class="btn waves-effect waves-light s2"  name="action" >Send</button>
	</div>
</div>

Lastly we have the component app.component.ts to control the routing, with RouteConfig I’m defining the two possible routes of our app, this allows the other components to redirect from one to another. Note that in the template I have only the router-outlet which will basically render the component related to the current route.

import {Component} from 'angular2/core';
import {UserRegistrationComponent} from 'javascripts/app/userRegistration.component.js';
import {ChatComponent} from 'javascripts/app/chat.component.js';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
 
@Component({
    selector: 'chat-app',
    directives: [ROUTER_DIRECTIVES],
    template: `
            <router-outlet></router-outlet>
        `
})
@RouteConfig([ 
    { path: '/chat', name: 'Chat', component: ChatComponent, useAsDefault:true },
    { path: '/registration', name: 'Registration', component: UserRegistrationComponent }
])
export class AppComponent {}

To make the routes work we have to make a little modification in our main.ts, just add the ROUTER_PROVIDERS as follows:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from 'javascripts/app/app.component.js'
import {ROUTER_PROVIDERS} from 'angular2/router'
 
bootstrap(AppComponent, [ROUTER_PROVIDERS]);

That’s it guys, we’ve completed our chat app, to run it just execute npm start and access it on your browser by typing localhost:3000. If you have any doubts please let me know in the comments, till next time!

Recommended for you

9 comments on “Angular2 Tutorial: Developing a Realtime Chat App

  1. Jack Hopkins

    public/javascripts/chat.component.ts(20,23): error TS2304: Cannot find name ‘io’.
    index.html does load socket.io.min.js. Seems to be a reference issue ???

    I assumed the last unnamed component was main.td
    Missing tsconfig.json and typings.json???

  2. lawtonB

    I get an error on npm start:
    angular2-chat@0.0.0 start: `concurrent “node ./bin/www” “npm run tsc:w”`
    Exit status 1

    Failed at the angular2-chat@0.0.0 start script ‘concurrent “node ./bin/www” “npm run tsc:w”‘.

    there are also seems to confusion in your scripting between app.component.ts and app.component.js
    which one is correct?

Leave a Reply to Dave Cancel reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>