Ionic 2

Chat application with Ionic 2 and tutorial

In this tutorial I am going to show you how to use to create a simple chat application using Ionic 2 and extend this with chat rooms. This application has 2 parts. First one is server or backend part and other is ionic mobile application part. At first let see the server part of it.

Nodejs Chat server

I assume you already have installed node in your computer. If not install it from After installation completed successfully let’s start initiating node project. Create a new directory name “chat-server”.

mkdir chat-server
cd chat-server
npm init

Then put this values accordingly:

name: (chat-server)
version: (1.0.0)
description: Real-time chat application.
entry point: (index.js) index.js
test command: node index.js
git repository:
keywords: ionic2 ionic2-chat chat node realtime
author: MobiDevLog
license: (ISC) MIT

Confirm server creation by putting ‘yes’.


Going to install and save it in package.json file by following command.

npm install --save


Then we have to create simple HTTP server. Which contains a socket to listen to this server. On receiving an incoming connection it will create a socket to listen messages. We’ll emit those messages to all the clients.

We will create a new file named index.js and write the code the code bellow in it:

var socket = require(''),
    http = require('http'),
    server = http.createServer(),
    socket = socket.listen(server);

socket.on('connection', function(connection) {
    console.log('User Connected');
    connection.on('message', function(msg){
        socket.emit('message', msg);

server.listen(3000, function(){
    console.log('Server started');

Now save and start the server running the following command:

node index.js

Congratulations! the server is ready to work.


Ionic Chat Client

At first create a blank Ionic 2 application

ionic start --v2 chat-client blank


Now get inside ‘chat-client’ directory and install

cd chat-client
npm install --save


Now for the client side we have to send our message to the server. Then place a listener which will listen incoming messages and add them to the chats array. Finally show all the messages.

Open up src/pages/home/home.ts file and place the code below.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as io from '';

  selector: 'page-home',
  templateUrl: 'home.html'
export class HomePage {
  chats = [];

  constructor(public navCtrl: NavController) {
    this.socket = io('http://localhost:3000');

    this.socket.on('message', (msg) => {
      console.log("message", msg);

  send(msg) {
        if(msg != ''){
            this.socket.emit('message', msg);
        this.chat_input = '';


Then open the src/pages/home/home.html file and replace the code below.

<ion-content padding>
    <ion-item *ngFor="let message of chats">{{message}}</ion-item>

    <ion-input type="text" [(ngModel)]="chat_input" placeholder="Enter message"></ion-input>

  <button ion-button block (click)="send(chat_input)">Send</button>

Ionic 2 chat application

Finally run this to see check the application in browser.

ionic serve


Therefore let me know how this going yours.