Hi Friends,
Hope you are all well. This tutorial is a sequel to my post ‘Realtime chat using Ionic 2 and sockets‘. Though it’s not necessary I would recommend you to have a look at that once.
In this tutorial we will be seeing how lifecycle hooks in Ionic 2 work. We will be building a realtime chat application using lifecycle hooks and sockets.io. Our application will contain 2 chatrooms.
The complete code of this tutorial can be found in the links below.
Frontend – here.
Backend – here.
A screencast of this tutorial is available here.
Let’s begin.
First of all what is a lifecycle hook ?
A lifecycle hook is a function or an event handler that is triggered while navigating between views. This comes in handy in several aspects of the application. Our views don’t get removed while we navigate; they simply get cached. So such lifecycle hooks come in handy. You can read more about them here.
Ionic 2 has 7 hooks namely
- onPageLoaded – Similar to ngOnInit
- onPageWillEnter – Before view becomes active
- onPageDidEnter – After view becomes active
- onPageWillLeave – Before view loses focus
- onPageDidLeave – After view loses focus
- onPageWillUnload – Before page is removed from the DOM.
- onPageDidUnload – After page is removed from the DOM.
Now these lifecycle hooks come along with NavController in Ionic 2. To understand them better let’s use a couple of these to build a Realtime Chat application with sockets.io
As I mentioned before, this application is a sequel to my previous post on building a chat application.
First, lets clone the frontend and backend repos using the below commands.
|
1 2 |
git clone https://github.com/rajayogan/ionic2chat-client.git git clone https://github.com/rajayogan/ionic2chat-server.git |
First let’s work with the client.
Navigate to the folder where you have cloned our app and generate two pages using the below command.
|
1 2 |
ionic generate page firstroom ionic generate page secondroom |
Now open home.html and move the code to firstroom.html. Similarly open home.js and move the code to firstroom.js
Open home.html again and add the below code.
|
1 2 3 4 5 |
<h2>Enter your name to proceed</h2> <ion-input [(ngModel)]="nickname" placeholder="Enter your nickname"></ion-input> <button [hidden]="nameset" (click)="setname(nickname)">Set</button> <button [hidden]="!nameset" (click)="navtoroomone()">Room 1</button> <button [hidden]="!nameset" (click)="navtoroomtwo()">Room 2</button> |
It just adds a text input and 3 buttons. Open home.js 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, NavController} from 'ionic-angular'; import {FirstroomPage} from '../firstroom/firstroom'; import {SecondroomPage} from '../secondroom/secondroom'; @Page({ templateUrl: 'build/pages/home/home.html' }) export class HomePage { static get parameters() { return [NavController]; } constructor(nav) { this.nav = nav; this.nickname = ''; this.nameset = false; } setname(name) { window.localStorage.setItem('nickname', name); this.nameset = true; } navtoroomone(){ this.nav.push(FirstroomPage); } navtoroomtwo() { this.nav.push(SecondroomPage); } } |
We are simply storing the name entered in the textfield to localStorage and navigating the user to the room of his choice based on which button he clicks.
Now open up firstroom.js and modify the code so that it looks as below.
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
import {Page} from 'ionic-angular'; import {NgZone} from 'angular2/core'; /* Generated class for the FirstroomPage page. See http://ionicframework.com/docs/v2/components/#navigation for more info on Ionic pages and navigation. */ @Page({ templateUrl: 'build/pages/firstroom/firstroom.html', }) export class FirstroomPage { static get parameters() { return [NgZone]; } constructor(ngzone) { this.zone = ngzone; this.chats = []; this.chatinp =''; this.pkt = { data: '', room: 'room1' }; this.socket = io('http://localhost:3000'); this.socket.on(this.pkt.room +'message', (msg) => { this.zone.run(() => { this.chats.push(msg); }); }); this.socket.on(this.pkt.room +'userentered', (user) => { this.zone.run(() => { this.chats.push(user + ' has entered'); }); }); this.socket.on(this.pkt.room +'userleave', (user) => { this.zone.run(() => { this.chats.push(user + ' has left'); }); }); } send(msg) { if(msg != ''){ this.pkt.data = msg; this.socket.emit('message', this.pkt); } this.chatinp = ''; } onPageDidEnter(){ this.pkt.data = window.localStorage.getItem('nickname'); this.socket.emit('userentered', this.pkt); } onPageDidLeave(){ this.pkt.data = window.localStorage.getItem('nickname'); this.socket.emit('userleave', this.pkt); } } |
Let’s break it down.
- Instead of sending the data as such in the sendmsg() function, we now send the data along with the room value.
- OnPageDidEnter is a lifecycle hook. Whenever the view becomes active it will get triggered and emit a msg about the user who entered the room.
- OnPageDidLeave is again a lifecycle hook. Whenever the page gets out of viewport it gets triggered and emits a similar message.
- We have 3 listeners which listen for flags pertaining to that specific room.
For eg: this.socket.on(this.pkt.room +’message’) – this will listen to pings with the flag room1message or the room1message stream.
This is all we need in the front end.
Now copy the contents of firstroom.html and firstroom.js into secondroom.html and secondroom.js respectively.
Make the below change.
|
1 2 3 4 |
this.pkt = { data: '', room: 'room2' }; |
Now let’s tweak the backend.
Open the index.js file and modify the contents as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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(datamsg){ io.emit(datamsg.room+'message', datamsg.data); }); socket.on('userentered', function(user){ io.emit(user.room+'userentered', user.data); }); socket.on('userleave', function(user){ io.emit(user.room+'userleave', user.data); }); }); server.listen(3000, function(){ console.log('Server started'); }) |
Let’s break this down.
- The listeners listen for the streams, and once data is received they get it, concatenate the room name along with the stream indicator and emit the data.
- This will work for any number of rooms since the server processes the room from the incoming data and emits the data back to all the listening nodes accordingly.
There, now we have a simple, clean and effective code demonstrating lifecycle hooks and a neat chatroom app.
To request me for a tutorial or ask me anything, please use the ask me page.
Thanks for reading guys. Peace. 
