How To Write Your Chat App Using Sockets?
Have you ever created a simple chat app using socket? If not, then here, we are going to write a simple chat app using socket.io. Socket.io is used for building real-time, highly interactive web apps. Developers create many web apps like multiplayer games or chat systems using socket.io.
To make it easy to manage, you can use backbone.js in client-side code. It is also recommended that you should be familiar with node.js and backbone; if not, then no worries at all because no knowledge is required, ideal for all users.
But, with LAMP (PHP), It is very hard to write a chat app because it involves a polling server, needs to keep track of timestamps and is slow. The socket is the old but Golden solution to build real-time chat systems with dual communication between client and server.
Let’s Get Started (Web Framework)
First, we will have to create a simple HTML webpage. It will serve as a form and will contain messages lists. Make sure that you have installed Node.js on your machine. We are going to use framework express
.
Now, let’s make a package.json manifest file for our chat app project. We will place it in a different empty directory. I named it chat-example.
Now, we will use npm install to populate the dependencies with things.
After installation, we are creating an index.js file. It will set up our app.
- Here, the app is a function handler initialized by express. You can supply it to the HTTP server.
- ‘’/’’ is a router handler. It gets called when you hit the website home.
- Now, we will make an http server with a listening port to 3000.
Now, if you will run node index.js, then you will see below.
If you type http://localhost:3000, you will see a ‘’hello world’’ like the image below.
The code will look very confusing. If we use HTML of the whole app there, we need to create an index.html file to serve that.
Now let our router handler use sendFile.
Now, add the following in the index.html file
Now restart the process (Ctrl + C) and run again, and refresh the page. The page should look like below.
Integrating Socket.IO
Socket.io is made of two parts
- A client library on the Browser side
- A node.js http server socket.io
Socket.io servers the client automatically, and now we have to install one module
It installs the mode and dependency in package.json. Now we have to edit index.js to put it.
Now, add the snippet before the in the index.html.
You can find a client-side JS file at node_modules/socket.io/client-dist/socket.io.js if you want to use the local version.
Here, you can see that I haven’t specified the URL to io() because it automatically connects to hosts serving the page.
Now, restart the process (press Ctrl + C) and run node index.js again. Refresh the page then you will see something like below
Here, each socket sends a disconnect event.
If you refresh the page for some time, you can see the below image.
Here the main purpose of socket.io is that you can send and receive any events you want with data. You can send any object that can be encoded as JSON, and binary data is also supported.
When a user types a message, the server receives it as a chat message event. The script will look like below in index.html.
In index.js, we get a print-out chat message event like below.
Broadcasting
Now, the main purpose is to emit messages from the server to all the users. Socket.io has a io.emit().
If you want to send a message to everyone except some, a broadcast flag will do the job.
But by doing this, you will send a message to everyone, including the sender.
The total client-side JavaScript code is:
Now the chat app is created in 20 lines of code. You can add some improvements like online status, private messaging, nicknames, ‘’user is typing’’ and more.
Final Words
I hope you got an idea about creating a simple chat app using socket.io. It is effortlessly to create, although a less knowledgeable person can also create it. Scoket.io makes it super easy to send and receive messages between clients.
