Ionic 2

Chat application with Ionic 2 and socket.io tutorial

In this tutorial I am going to show you how to use socket.io 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 https://nodejs.org. 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 socket.io and save it in package.json file by following command.

npm install socket.io --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('socket.io'),
    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 socket.io

cd chat-client
npm install socket.io-client --save

 

Now for the client side we have to send our message to the server. Then place a socket.io 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 'socket.io-client';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  socket:any
  chat_input:string;
  chats = [];

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

    this.socket.on('message', (msg) => {
      console.log("message", msg);
      this.chats.push(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-list>
    <ion-item *ngFor="let message of chats">{{message}}</ion-item>
  </ion-list>

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

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

Ionic 2 chat application

Finally run this to see check the application in browser.

ionic serve

 

Therefore let me know how this going yours.