How To Write Your Chat App Using Sockets?

/, web development/How To Write Your Chat App Using Sockets?

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 web apps which are highly interactive. 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, there is no knowledge 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.

 chat-example

Now, we will use npm install to populate the dependencies with things.

npm install express

After installation, we are creating an index.js file. It will set up our app.

 creating an index.js file

    • 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. run code node.js

    If you type http://localhost:3000, you will see a ‘’hello world’’ like the image below.

    local host

    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.

    router handle use sendfile

    Now, add the following in the index.html file

    add the following in the index.html

    Now restart the process (Ctrl + C) and run again, and refresh the page. The page should look like below.

    restart the process

    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

    npm install socket.io

    It installs the mode and dependency in package.json. Now we have to edit index.js to put it.

     dependency in package.json.

    Now, add the snippet before the in the index.html.

    add the snippet

    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

    run node.js

    Here, each socket sends a disconnect event.

    socket sends 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.

    chat app using sockets

    In index.js, we get a print-out chat message event like below.

    print out chat message

    Broadcasting

    Now, the main purpose is to emit messages from the server to all the users. Socket.io has a io.emit().

    users.Socket.io

    If you want to send a message to everyone except some, a broadcast flag will do the job.

    broadcast flag

    But by doing this, you will send a message to everyone, including the sender.
    chat message 2

    The total client-side Javascript code is:

    total client side JavaScript

    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 very easy to create, although a less knowledgeable person can also create it. Scoket.io makes it super easy to send and receive messages between clients.

By | 2021-09-01T12:02:46+00:00 August 3rd, 2021|Mobile Apps, web development|0 Comments