Do you also wonder how your favourite chatting application works? Why not build our own chatting application.

In this project we would create a real-time, anonymous chatting application, which you would be able to use to chat with your friends. The features of the chat application includes :

• Real Time : Because the project uses socket.io library, so all the communication between the client and the server is going to be in real time.
• Rooms : To separate out two different groups of friends.
• Gapshap Bot : Welcoming the new user and alerting all the present users on joining of a new user and again alerting when an existing user leaves the chat room.

• All the dependencies along with the versions for the project have been registered in the package.json file.
• The project uses cloudflare's font-awesome library to generate the different icons (such as door for room, paperplane for send button etc).

This is the first page that the user will land onto. It contains the login details. The user will enter the username and the room (a new, or an existing one) and it will direct him to the main chatting page for that room. The Css file for this html page has been stored in the login_style.css.

It is the main page where the chatting happens. Most of the elements in this webpage are dynamic(messages, users list, room name) that we will fill as the chatting proceeds. The css file for this page is stored in the style.css .

This file contains our server's instance created with the help of Express that would be listening on port 3000 (you can use any non-reserved port). It keeps listening to the client.It maintains an users array that stores {unique_user_id(generated by socket.io), username, room} for all the users.

Whenever a client joins the chat(and fires 'room-joined' event), the server reacts by adding the user to the respective room(provided during login). It then sends the welcome message to the new-joinee through the gapshap bot, and alerts the existing users(except the new joinee) about the newcomer, and updates the displayed side panel users list.

Whenever a client sends a text message ('text-message' event), the server broadcasts that message to the users in the room.

Whenever a user leaves the chat (socket's 'disconnect' event), it deletes the user form the users list and updates the displayed active users list on the side panel. It also alerts all the room members about the leaving member.

This is the file that is run when the user joins the chat. We extract out the user name and the room name from the address bar using the query-string library. We also extract out the elements from the index.html file that we need to fill dynamically.

The first event to be fired is the 'room-joined' event, which will be listened by the server.js file to take the necessary steps(adding user to the list, welcoming, alerting others,and updating the panel).

If the server has some message for the client (sent by some other person, or alerts) then it appends that message to the user's screen.

Whenever the client types some message over the chatbox and clicks the 'send' button, we extract the typed message (using the id from index.html), emit the message to the server('text-message' event) and clears the textbox.

And our chatting goes on. Isn't that cool!!

DEMO LINK : GapShap_Chatting

• Making the rooms more secure through a password mechanism.
• Storing and authenticating users so as to prevent spams.