What’s App Chat Clone – An Ionic Framework ,Socket.io and Nodejs Full Hybrid App

Introduction

In this tutorial, we will be building a WhatsApp chat clone using Ionic Framework, Socket.io, and Node.js. The app will have a simple chat interface where users can send and receive messages, similar to WhatsApp. We will be building a full hybrid app, meaning it will run on both desktop and mobile devices.

The technologies we will be using are:

1. Ionic Framework: A popular framework for building hybrid mobile apps using web technologies such as HTML, CSS, and JavaScript.
2. Socket.io: A JavaScript library for real-time communication between the client and server.
3. Node.js: A JavaScript runtime environment for building the server-side logic.

Prerequisites

Before starting this tutorial, make sure you have the following installed on your computer:

• Node.js
• npm (Node Package Manager)
• Ionic Framework
• A code editor or IDE (Integrated Development Environment)
• A text editor

Step 1: Create a new Ionic Project

Open a terminal or command prompt and run the following command to create a new Ionic project:

ionic start whatsapp-clone blank

This will create a new directory called whatsapp-clone containing the basic structure for an Ionic app.

Step 2: Set up the Server

Create a new directory called server inside the whatsapp-clone directory:

mkdir server

Inside the server directory, create a new file called index.js:

// server/index.js

const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

app.use(express.static('public'));

let users = [];

server.listen(3000, () => {
  console.log('Server started on port 3000');
});

io.on('connection', (socket) => {
  console.log('New client connected');

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });

  socket.on('message', (data) => {
    console.log(`Received message from ${data.username}: ${data.message}`);

    io.emit('message', data);
  });

  socket.on('newUser', (data) => {
    console.log(`New user joined: ${data.username}`);
    users.push(data);

    io.emit('users', users);
  });
});

This code sets up an Express.js server that listens on port 3000. It also sets up Socket.io for real-time communication between the client and server.

Step 3: Create the Chat Interface

Inside the whatsapp-clone directory, create a new file called chat.page.html:

<!-- chat.page.html -->

<ion-header>
  <ion-toolbar>
    <ion-title>Chat</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let message of messages">
      {{ message.text }}
    </ion-item>
  </ion-list>
  <ion-input [(ngModel)]="newMessage" placeholder="Type a message"></ion-input>
  <ion-button (click)="sendMessage()">Send</ion-button>
</ion-content>

This HTML file defines the basic layout for the chat interface.

Step 4: Add the Chat Logic

Inside the chat.page.ts file, add the following code:

// chat.page.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { WebSocket } from 'ws';
import { ChatService } from './chat.service';

@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.page.html',
})
export class ChatPage {

  newMessage: string;
  messages: any[];

  constructor(private navCtrl: NavController, private navParams: NavParams, private chatService: ChatService) {
    this.messages = [];
  }

  ionViewDidLoad() {
    this.chatService.connect();
  }

  sendMessage() {
    if (this.newMessage) {
      this.chatService.sendMessage(this.newMessage);
      this.newMessage = '';
    }
  }

}

This code sets up the chat page and defines the sendMessage method that sends a message to the server using the ChatService class.

Step 5: Add the Chat Service

Inside the chat.service.ts file, add the following code:

// chat.service.ts

import { Injectable } from '@angular/core';
import { WebSocket } from 'ws';

@Injectable()
export class ChatService {

  private socket: WebSocket;

  connect() {
    this.socket = new WebSocket('ws://localhost:3000');

    this.socket.onopen = () => {
      console.log('Connected to the server');
    };

    this.socket.onmessage = (event) => {
      this.messages.push(JSON.parse(event.data));
    };

    this.socket.onerror = () => {
      console.log('Error occurred while connecting to the server');
    };

    this.socket.onclose = () => {
      console.log('Connection to the server closed');
    };
  }

  sendMessage(message: string) {
    this.socket.send(JSON.stringify({ text: message, username: 'John' }));
  }

}

This code sets up the ChatService class that establishes a connection to the server using WebSocket and defines the sendMessage method that sends a message to the server.

Step 6: Add the User List

Inside the chat.page.html file, add the following code:

<!-- chat.page.html -->

<ion-list>
  <ion-item *ngFor="let user of users">
    {{ user.username }}
  </ion-item>
</ion-list>

This HTML file defines the user list that will be displayed at the top of the chat interface.

Step 7: Add the User List Logic

Inside the chat.page.ts file, add the following code:

// chat.page.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { WebSocket } from 'ws';
import { ChatService } from './chat.service';

@IonicPage()
@Component({
  selector: 'page-chat',
  templateUrl: 'chat.page.html',
})
export class ChatPage {

  newMessage: string;
  messages: any[];
  users: any[];

  constructor(private navCtrl: NavController, private navParams: NavParams, private chatService: ChatService) {
    this.messages = [];
    this.users = [];
  }

  ionViewDidLoad() {
    this.chatService.connect();
  }

  sendMessage() {
    if (this.newMessage) {
      this.chatService.sendMessage(this.newMessage);
      this.newMessage = '';
    }
  }

  get users() {
    return this.chatService.users;
  }

}

This code sets up the user list and defines the get users method that retrieves the list of users from the ChatService class.

Step 8: Run the App

Run the following command to start the app:

ionic run android

This will start the app on an Android emulator or a physical Android device.

Conclusion

In this tutorial, we built a WhatsApp chat clone using Ionic Framework, Socket.io, and Node.js. We established a connection to the server using WebSocket, sent and received messages, and displayed the user list. With this tutorial, you now have a basic understanding of how to build a real-time chat app using Ionic and Socket.io.