In this aid, we will make an essential chat based application. It requires no fundamental information of Node.js or Socket.io, so it is perfect for developers belonging to all learning levels. Composing a chatting application with mainstream web applications stacks like LAMP (PHP) has generally been hard. It includes surveying the server for changes, staying informed concerning timestamps, and it is considerably measuring slower than it ought to be.

node-1

Sockets have generally been the arrangement around for most frameworks composed, giving a bi-directional correspondence channel between a server and a client. This implies that the server can push messages to other intended clients. When you compose a message, the server will get it and push it to all other associated clients.

Web Structure

The primary objective is to setup a straightforward HTML website page that serves out a structure and a rundown of messages. We are going to utilize the Node.js web structure ensuring that it is installed.

cod1

Let us have the dependencies to be populated easily with the help of things that we require such as an npm install –save:

npm install –save express@4.10.2

Since we are done with installing express, now we can have our application setup by creating an index.js file.

code2

What we did here is give below:

HTTP server supplied with a function handler initialized by Express.

As soon as website home hit, a route handler is called that is predefined.

Port 3000 occupied with http server listen created by us.

Following screen is displayed when node index.js executed:

node-2

When http://localhost:3000: visited in your browser, you should see this:

node-3

HTML Coding

Until this time, we have passed it into an HTML string after res.send called inside index.js. It would be very confusing in terms of display, if the entire HTML code placed within. Hence, instead we will serve an index.html file after creating it.

To do this, let us use the sendFile through route handler refactoring:

code3

And also perform index.html populating in parallel:

code4

Refresh the page after the process restart (running node index after hitting Ctrl+C) and you should see something like this:

node-4

Socket.IO Integration

Two parts combine together to form Socket.io:

Node.JS HTTP Server: socket.io integration with a server

Socket.io-client browser side that loads a client library

Now only one module needs to be installed and the client is served automatically by Socket.io, while still in the development phase:

npm install –save socket.io

Let us now add after editing index.js. This is done for adding package.json dependency once module is installed.

code5

Recognize that I instate another example of Socket.io through HTTP (the HTTP server) object passing. At that point, I log in the incoming sockets connection event to the console. Presently in index.html, I included the accompanying snippet before the end of body:

code6

This is all about loading the Socket.io-client, getting connected after uncovering an io worldwide. Recognize that I’m not determining any URL when I call io(), since it defaults to attempting to connect with the host serving that particular page. Now if both website and server is reloaded, you ought to see the message, “a user connected”. See same message few more times when several tabs opened together:

node-5

A peculiar disconnect event is also fired by every socket:

code7

Now you can see the below change in messages after a tab is refreshed multiple times:

node-6

Emitting

The principle thought behind Socket.io is that you can receive and send as many events as you want, with any information you need. Any JSON encoded objects will work supported by binary data as well. Let us just do it in a way wherein the server receives a chat message whenever the user types a message. Now the inindex.html section should be highlighted as below:

code8

And the chat message event printed in index.js is as below:

code9

Broadcasting

The final step is all users should get the message from the server when the event is emitted. An io.emit is given by the socket for targeting everyone with the message.

Make use of the broadcast flag if a certain socket is not to be targeted excluding it from a message being sent to everyone.

code10

Let us send message to everyone including the sender as well for simplicity sake:

code11

The message is included in the page once captured on the client side. The JavaScript code on the client side totals up by:

code12

Hurray, we build our first chat application with just 20 lines of code.