Get Down to Socialize: Omegle@IITD, the random chat app
Ever thought of making new friends at any time or sharing some deep secret with someone with the excitement of not knowing who the other person is? Keeping these kinds of feelings in mind we at DevClub IITD thought of creating our own Omegle for the vacation season to learn what it takes to build a chat app by ourselves.
Creating a chat app of your own, as it turns out is very simple given the right tools. Adding features to it is even easier henceforth.
For our Omegle, we used the Socket.io framework which is a framework specially created to abstract out the problems of connecting the clients using the network. It gives direct access to server sockets by using a server and client architecture. Being a simple NodeJS app, the server can be easily hosted on any simple app hosting site (like Heroku). The sockets connect to the server which can broadcast all the events (explained in the next para) from any socket (client) to all the sockets connected to it.
An event is the only thing you will need to understand to implement any basic app in Socket.io. It is basically a packet of data with a label. This packet is a JSON object and can contain any type of objects in it (the magic of javascript).
The first step in the direction of the app from the Socket.io example is the assignment of partners. Whenever a client connects to the server he is either told to wait or instantly connected if another client is already waiting. The client's sockets are broadcasted each other's id which is generated by socket so that the server does not have to handle the pairing for all the clients. After this, if a client sends a message to the server, we add the partner's id in the event data packet along with the message and the server just forwards this to the respective destination.
Another feature to make the chat app more interesting was to add random names and avatars to the users. For this, we used the Faker library on the server. The server automatically assigns a fake username and avatar to every client and sends it as an initialization event.
Next, we wanted to add an ‘other user is typing’ feature. This was rather simple, whenever there was a change event (with jQuery) in the browser window of any of the client's message box, an event was sent to the partner indicating that the user has started typing and a small text display was shown on the partners display and vice versa for stopping the display.
As this app was created during the winter vacation ’s, we themed the app suitably with a Christmas theme with snow (Canvas in HTML) and a light rope. (Tip:- The snow effect can be easily changed to a shower of hearts or anything that takes your fancy by changing the source of the image)
Do check out our project at GitHub with Love.
