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).

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

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

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

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

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

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.

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. :)

 

  • David Lazarev

    Hey , thanks for this tutorial , i start to follow your tutorial and i got this error

    • Please check once if you have included the in the index.html. Also try running it bro. I think this is the typescript linter plugin installed in atom that shows this error. After coding it, try running it and see if the issue still persists. (Persists as in persists in the application, not just the linter plugin)..

    • Fernando

      El error te sale porque el IDE no reconoce el “io” pero si tienes el resto de codigo bien te va a funcionar perfectamente. Ami me salia el mismo error en Visual Studio Code y me pase a Sublime Text 3, incluso a mi no me funcionaba era porque en el servidor tenia

      io.on(‘Connection’) y es
      io.on(‘connection’)

      Revisa puede ser eso..

  • Excellent app. Let’s put the source code on http://www.noodl.io!

  • Edward Shih

    Thanks for the tutorial!! Easy and simple!! Like it!

  • Alugbin Abiodun

    please, how can i use the socket on a new page without creating a new socket connectio???

  • Gerardo Marin

    I am developing an app in ionic 2 and it is a question of video social denunciations, the idea is while this recording is going to save the video in a web server, until this moment the application records and when finished recording it is sent to a server by means of plugins Of cordova, but my question is if it is possible to save the video through socket.io with cordova and angular, thank you very much I am waiting for your answer.