Real-time chat application using Ionic 2 and sockets.io

Hi friends,

Hope you are all doing good. In this post I will show you how to use sockets to build a real-time chat application using Ionic 2. We will be using a nodejs app for backend(along with sockets) and Ionic 2 (along with sockets-client) in the front-end.

The complete code of this tutorial can be found here:

Backend – Click here.

Front-end – Click here.

A screencast of this tutorial:

Let’s get started.

First create a nodejs app and install sockets.io using the following commands one by one. (Better do this inside a new directory).

1	npm init (fill in the details accordingly)

1	npm install socket.io --save

Now create a new file index.js in the project directory and enter the below code.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var io = require('socket.io'),     http = require('http'),     server = http.createServer(),     io = io.listen(server); io.on('connection', function(socket) {     console.log('User Connected');     socket.on('message', function(msg){         io.emit('message', msg);     }); }); server.listen(3000, function(){     console.log('Server started'); })

Let’s break this down.

1. We have created a simple http server that runs on port 3000.
2. We have made the variable io listen to this server. This is actually the socket.io object.
3. Upon receiving an incoming connection it will generate a socket which can then be used to listen for messages from that connection.
4. We emit the message to other connected clients listening on that flag (Here it is message).

Now save this code and start the app using the command

1	node index.js

Our back-end is ready.

Create a front-end app using blank template of Ionic 2.

Navigate to www/index.html and add the below line of code in

1	<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

(Add this line just above the <script src=”cordova.js”></script> line).

Now open up home.html file and add the below code.

1 2 3 4 5

<ion-list>      <ion-item *ngFor="#message of chats">{{message}}</ion-item> </ion-list>   <ion-input type="text" [(ngModel)]="chatinp" placeholder="Enter a message"></ion-input>   <button fab (click)="send(chatinp)">Send</button>

Now we have a list for displaying the messages and an input field and a button for sending out our chats.

Now open up home.js file and add the below code.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

import {Page} from 'ionic-angular'; import {NgZone} from 'angular2/core'; @Page({   templateUrl: 'build/pages/home/home.html' }) export class HomePage {     static get parameters() {         return [NgZone];     }     constructor(ngzone) {         this.zone = ngzone;         this.chats = [];         this.chatinp ='';         this.socket = io('http://localhost:3000');         this.socket.on('message', (msg) => {             this.zone.run(() => {                 this.chats.push(msg);             });         });     }          send(msg) {         if(msg != ''){             this.socket.emit('message', msg);         }         this.chatinp = '';     } }

Let’s break this down.

1. We have a send method which will send our message to the server.
2. We have a socket.on listener which listens for incoming messages and adds them to the array chats. (Note the use of zone to update the DOM in realtime).

That’s it guys. Now if you run the app(Backend should be running as well) you should see an awesome app through which you could chat or send messages in real time.

Thanks for reading guys. Peace.