March 8, 2015

A sample chat app using node.js and socket.io

NodeJS is an extremely useful technology, and provides us with a great deal of power and joy, especially when considering the fact that we can write pure JavaScript. As you are going to see, with only a few lines of code, we will manage to write a fully functional real time chat application. Pretty neat!

In this we are going to write a real-time chat application using Node.js and Socket.IO. MongoDB is our database solution. We will be doing the front end and just using Node.js to handle the actual request to the server to store the data. You can run the chat locally with node, or push it to heroku or a different cloud service provider.

Before beginning, all dependencies are declared in the package.json file. They are not included in the repo and you will have to run npm install to get them.

Running the app:

Before beginning the design and implementation part, let's look out how to run this app. To run the chat app, you need to have Node.js installed, so that the node and npm commands can be called from your terminal.

Download the code from my repo and unzip the archive to a folder called chat. After this, navigate to the folder you’ve created from your terminal: cd chat/

Then, run this command to download all the libraries that the chat system uses: npm install

This will install all the dependencies that are described in package.json.

When it’s done, run the following command to start your very own local chat: node server.js

Hit ctrl+c to stop it. The bad news is that you can’t invite your friends to your chat, since it is running on your own computer. To fix this, you need to run it on a web server. Setting up a web server by yourself to run node is not a very straightforward process and involves a good deal of server administration skills. Luckily, it is very easy to get started with cloud platforms like Heroku.

Design:

First thing we are going to do is design the chat app. If you already have a design in mind you can go ahead. The important thing to remember is that when it comes to implement in the JavaScript you need to choose your selectors based on your class name or id or whatever it maybe.

Now the HTML and CSS is over. Now what we are going to do is the implementation of the app. Having Node.js installed, install MongoDB on your system for your database. The instructions on the website are very straight forward. Go ahead and install them, following the instructions given there.

Sending messages:

Next step we are going to allow user to enter messages alone with their name and have that sent to Node.js server and inserted subsequently into MongoDB database.

I am going to use an useful function called getnode. This is going to return a query selector based on what we parse through it with. This is not going to work on old browsers and older versions of IE.

Outputting Statuses:

In our case we send a status if either your name or message field is empty.

sendStatus('Name and message is required.');

Now we have to listen for status. We have to check if it's an object. If it's an object we have to construct the message. And after some seconds of displaying the status the default status will be displayed i.e Idle

Conclusion:

We've got a styled element message and name that is sent through Node.js. We've got server setup. It validates and sends messages back to the client success or not. Basically all of this put together creates a working chat. But there is much more that can be improved on it. You can change the theme of it. You can create a private chat room. You can create a secure chat room by creating passwords.