ashay mandwaryaBlockedUnblockFollowFollowing

Oct 23

You are here reading this article means you want to create a chat app or you have probably heard about Node.js or Socket.js. Node.js is a JavaScript run-time environment which helps JavaScript run outside the browser(Back-end).Socket.io on the other hand is a JavaScript library which helps in bi-directional communications between client and the server. Express.js is also a JavaScript library.

In this article we will be creating a Chat web-app which will be a group chat app in which anyone can connect and message. This article wouldn't be focusing on UI but only the back-end part of the app.

Follow the steps below and you will be ready with the app in minutes.

Using npm install Socket.io and Express.js and include them in your project.

npm to install socket.io and express.js

Include Express in your file, which will be used to create a server which will ultimately help in communications and logic implementations.

Include Express and call http module for server creation

~~Line #1 calls for the express module and line #2 calls for the calls for http module. The .Server() at the end in line #2 is a function which helps in creating the server using the express module.

Now when our server is created we need to host it on a port.

Server hosting

~~ Line # 3 and 4 are used to host the server on the given port. Whenever the server is up and running a message is logged on the console.

Define routes

Routing

~~We define a route handler / that gets called when we hit our website home.

If you run the file now using command- node filename in the command line you will find a message on your screen as Hello World.

Create an HTML file to serve whenever the server is fired.

HTML File

Include socket.io in the server.

Include Socket.io

~~ Line #3 integrated socket.io module in the server.In line #6 a path referring to our HTML file is created. Line # 9 and 10 are the heart and soul of socket.io. The .on property takes in a name of the event which takes place and follows up with a callback to perform certain action regarding that event. In the pic above an inbuilt event is triggered which is connection. Whenever a new client connects the connection event is fired up. We can create any event and provide callback for the same. .On is used to respond to an event and is not actually used to create events.

Include Sockets in the client side too.

Socket.io on client side

~~Line # 21 to 24 states the process to add socket file in client side.

Emit an event from client side.

Event from Client

~~ Line #28 shows how to emit an event.

Print the message received.

Print the message received from Client

~~ Line #11 responds to the chat message event raised by the client and the callback prints the message on console.

This is a very basic example of a chat app and socket.io. But is shows how powerful it is. We hardly wrote 20 lines of code and we have a chat app ready.

In my next post I will be telling about private messaging.