Saturday, March 29, 2014

Tutorial Realtime Chat with Node.js

Do you want to share?

Do you like this story?

Demo                 Download

In this tutorial, we are going to build a realtime chat system with Node.js and the 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, 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‘s rooms feature to isolate one chat from another, which is exactly what that feature was developed for.

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.

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:
Now you can commit your code to your fresh new repo! Write these commands:
git add .
git commit -m 'Initial commit'
There is one last thing that we have to do. Heroku requires that your application has a text file named Procfile, which contains the command used to start your node.js app. Create it, and add the following content:
web: node app.js
Then commit the changes with these commands:
git add Procfile
git commit -m 'Added a procfile'
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). All that is left, is to enable websockets so that our real-time chat can work (read more here):
heroku labs:enable websockets
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.


0 komentar:

Post a Comment