Realtime Chat with Node.js

Realtime Chat with Node.js

In this tutorial, we are going to build a realtime chat system with Node.js and the socket.io library. The chat permits users to create private chat rooms that they can share with a friend. For avatars, we will use gravatar. You can run the chat locally with node, or push it to heroku or a different cloud service provider.

The code

You can grab the source code from the download button above. It has plenty of comments and is easy to follow. Start with the app.js file and read from there. Here are a few things to look for:

  • All dependencies are declared in the package.json file. They are not included in the zip and you will have to run npm install to get them.
  • We are using separate JavaScript files for the configuration and routes, to make the code more manageable.
  • In the routes file, socket.io stores the username, avatar and room of the person as properties of the socket object itself. This saves us a lot of code and makes managing rooms easy.
  • We use socket.io‘s rooms feature to isolate one chat from another, which is exactly what that feature was developed for.
Enter your name to chat

Enter your name to chat

The design

The PSD for this tutorial is available for free in our members area, along with other goodies that you will love. Become a member here!

Running the chat

To run the chat, you need to have node.js installed, so that the node and npm commands can be called from your terminal. Download the code and unzip the archive to a folder called nodejs-private-webchat. After this, navigate to the folder you’ve created from your terminal:

cd nodejs-private-webchat/

Running the ls (or dir if you are on windows) command should show app.js, package.json and the other files from the archive. 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. This may take one or two minutes. When it’s done, run the following command to start your very own local chat, which you can see on http://localhost:8080

node app.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, which is what I will show you next.

Node.js Realtime Chat

Node.js Realtime Chat

Hosting the chat on Heroku

Heroku is a cloud hosting platform that automates the deployment and scaling of web apps. It offers a free plan, which is sufficient for less busy apps like our chat. Here is what you need to do:

  1. Create an account, if you don’t have one already.
  2. Install the heroku toolbelt for your operating system. It will give you access to the heroku command from a terminal window.
  3. Initialize an empty git repository (explained below)
  4. Push your code to heroku. This will deploy it and give you a URL which you can share with your friends.

You can also read this getting started guide, followed by this guide about running node.js applications.

Creating a git repo

The heroku toolbelt installs the heroku command and the git version control system. You need to create a git repo in order to be able to deploy your app to heroku (there is no ftp here). To do this, run this command:

git init

Then, we need to tell git not to include the node_modules folder to your repo. This folder can grow quite large and it simply does not belong in git. To ignore the folder, create a new empty text file named .gitignore with the following content:

node_modules/

Now you can commit your code to your fresh new repo! Write these commands:

git add .
git commit -m 'Initial commit'

There is a special file that Heroku expects to find in your repo, in order to be able to start the application. It is called a Procfile – it is already created for you in the zip archive, so you don’t have to do anything. But if you are curious, it contains the following command:

web: node app.js

We are now ready to push the application to heroku!

Pushing to Heroku

The following two commands are only done the first time you start using the heroku utility. First you need to login to heroku from the command line tool:

heroku login

Then, you need to add your ssh key, so you can push code without entering a password:

heroku keys:add

Next, you need to create a new heroku application from the code in this folder:

heroku create

And finally, we are ready to push code! Type this command:

git push heroku master

This line will send your application code to heroku, where their servers will process your package.json file and install all libraries that your app needs. Do this every time you need to upload a new version of the code (you must have made a commit beforehand). To open your very own web chat in your browser run this command:

heroku open

This will open it in a tab in your default browser.

Hope you like our little chat!

But there is much more that can be improved on it. You may implement alerts of new messages with HTML5 audio, make it possible for more than two people to join the same room, to require passwords before joining and more. If you make something cool, be sure to share it in the comments for everybody to see :)

Join our newsletter and get our PSDs!20,236 people learn about HTML5, JS and more. Join them!

by Nick Anastasov

Nick is a JavaScript programmer who loves Node and all things HTML5. He is interested in photography and is the resident food expert at Tutorialzine's office.

15 Comments

  1. Me says:

    It needs to be modified a bit as it posts an empty comments..

    1. Nick Anastasov says:

      Fixed.

  2. sandeep says:

    http://demo.tutorialzine.com:1338/
    demo not working , It showing bold This web page is not available bold

  3. brian piercy says:

    My only issue was having to delete an existing heroku gem before installing the toolbelt. Everything else - perfect. Thanks!

  4. Shawn Rubel says:

    Hey Nick,

    thanks for the amazing tutorial. I hope you don't mind me showing another application I've come across recently: cryptonet, which is basically same as yours, only uses Unix and AES192 encryption.

    Great tutorial, and love the depth of it.

    - Shawn

    1. Nick Anastasov says:

      Hey Shawn,

      I am glad that you liked it. It is free so you can enjoy it.

      - Nick

  5. Laszlo Espadas says:

    Very nice tutorial!! Great!

  6. Haashir says:

    OMG! People can just tweak the UI a little bit. Maybe a photobooth and sending pictures's ability will empower this to be a revolutionary chat client. Honestly speaking and my mind is already floating with bleeding edge ideas :P

    Thank You a LOT!
    (By "LOT", I really mean A LOT!)

  7. Alex says:

    Awesome! It works! Nice tutorial!

  8. Ritesh says:

    Very nice tutorial. Easy to setup my own chat.
    Thanks.

  9. vimal says:

    Great!
    But it gives error when you deploy it to heroku.

    you might need to use express 3.x
    Even though, it gives "Application error" when hosted in heroku

    1. Nick Anastasov says:

      Hello,
      I migrated express from 3.* to 4.* and socket.io from 0.9 to 1.0. No problem at all. Just followed the instructions from this article about heroku and everything was fine. I think you should do the steps one more time.

      Thanks for the feedback,
      Nick.

  10. Vinoy says:

    Nice tutorial! Thank you.

  11. Lauro Moraes says:

    Great! It's nice chat. But I have a doubt as to run in Heroku and mostralo as a widget on the site in php? It is possible?

  12. Arif Hussain says:

    Is it possible to make a private chat system with node ?

Add Comment

Add a Reply

HTML is escaped automatically. Surround code blocks with <pre></pre> for readability.
Perks:   **bold**   __italics__   [some text](http://example.com) for links