Home / AngularJS / Private chatroom using socket.io and NodeJS

Private chatroom using socket.io and NodeJS

In this tutorial I will teach you how to create a chatroom using SOCKET.IO and NodeJS. There are various tutorials that teach how to build a chatroom with ajax but SOCKET.IO has a number of advantages over ajax. One big advantage which SocketIO is you can write both the client and server code with javascript and it is faster than anything else!

Get started

  1. Download a copy of NodeJS for your Operating system and install it
  2. Go to Command prompt and check if node works
    live-chatroom-node-installation
  3. Setup your project folder
    live-chatroom-project-folder-setup
  4. Navigate to your project folder via Command prompt and install socket io
    live-chatroom-npm-socketio
  5. Now install express
    live-chatroom-npm-express
  6. Just in case if you are confused what to do after installation here is my folder structure
    live-chatroom-folder-structure
  7. Grab a copy of socket.io.js and put it in your js folder
  8. Let’s write some code!

Mark up

I usually do not explain the mark up part in my tutorial but here I am bound to throw some light. We will not be using ajax to request data but simply use socket.io and to manipulate data I will use jQuery. You should be able to understand the code at your first glance.

So now we have all the containers ready. The steps involved in a successful chat is

1. A users gives a username and hits the enter key
2. The user is taken to the chat page
3. The user will be able to see all the online users on the Left Hand Side of the chat container
4. On the right hand side the user can write their message and also see other’s messages
5. Upon refreshing the page the user has to re-enter their username

I believe you would have understood what we are up to. I will write the server side and client side code one after the other for easy understanding.

Server side code -> root/server.js
Client side code -> root/js/chat.js

Server side – Calling the dependencies (socket.io and express)

We now have setup the dependencies. Let’s check if the server runs without throwing any error. Use the command node server.js

live-chatroom-server-check

and just like the $(function(){ }); in jQuery socket runs an event connection when it is ready

So far so good. Lets write some code on the client side now

Client side – Connect to server via socket

There are two important events,

1. emit() – register a custom event
2. on() – listen to an event (emitted by emit())

So ’emit’ works as a commander and ‘on’ works like a soldier.

Client side – Register a username (no duplicates)

When the user presses the enter key get the username and emit an event new user to the server. The server on the other side will listen to this event in the following way

Server side – Handling the new user event and removing users when they leave the page

Get the users array, iterate using the jQuery’s $.each() method and populate the names-list class. Remember to empty the names-list class every time you update the users.

Client side – Sending message

When the user starts typing in the messsage-box class use the keyup event to check if Enter key is pressed. On receiving the enter key signal emit an event new message with the user’s message to the server.

Server side – Handling new message event

The moment the server receives the message from client, get the sender’s username from their socket (This is the place I mentioned the advantage of storing the username in the user’s socket itself) and also the message. Now emit the data to all the client with the event push message.

Client side – Receiving message

When the clients receives the push message event from server append their username and message to messages class. That’s it!

Now you can test the Node app by using the command node server.js

live-chatroom-run-app

In my next tutorial I will teach you how to save the messages to MySQL database along with lazy load.

Download

About Ashik

I am a Full Stack Developer and love to work on APIs and Apps. Hardcore lover of Ionic and Laravel <3

Check Also

Weather forecast API using jQuery, Ajax and PHP

Weather forecast API is widely used as widgets in small blogs to huge news website …

Do you wan't to get notified?

I will not spam your inbox. I will only send email whenever I publish a new article or to share information about technology

You have Successfully Subscribed!