August 19, 2015 8:25 pm

How to Create Real-time Chat Application with Node.js Part 4

Finishing up the back-end: When a user disconnects from our app, we remove the saved nickname from Redis using the lrem method which we use to remove one occurrence of the value stored in the socket.nickname property. Then, we get all users online again and broadcast them to all connected.

Create Real-time Chat Application with Node

[wpdm_file id=147]DEMO
socket.on("disconnect", function () {
client.lrem('nicknames', -1, socket.nickname);
client.lrange('nicknames', 0, -1, function (err, result) {
io.sockets.emit('online', result);

    });
})

Outside of our callbacks for database and socket connection, we serve the index.htmlfile when somebody accesses the root of our website:

app.get("/", function (req, res) {
    res.sendfile("public/views/index.html");
})

Submitting the app to Heroku

Heroku is a cloud application platform which allows you to upload applications in many different languages such Node.js, Ruby, PHP, Python, Java, Clojure and Scala. They have different tiers depending on the server load your application will cause but they also have a free tier that you can use when developing applications. To use Heroku, first you would have to install the Heroku toolbelt from: https://toolbelt.heroku.com/

A PATH variable would be added so you can just open a CLI (Terminal, cmd.exe, Powershell, whatever  command line interface you have available) and type: heroku login.
Typing it and pressing Enter will ask for your credentials (email and password)

heroku login phpgang chat app

You would also need to have Git installed and preferably added to your PATH variables:

You have to enter the root directory of your app using something like: cd E:\Talkyand type git init

This will initialize an empty git repository in that directory. You need to have a package.json file that contains all dependencies of your app (such as Express and Redis). Our package.json file looks like that:

{
"name": "Talky",
"version": "0.0.1",
"description": "A real-time chat where messages come with audio",
"author": "PHPGang",
"dependencies": {
"express": "^4.12.0",
"html-entities": "^1.1.3",
"redis": "^0.12.1",
"socket.io": "^1.3.4"
}
}

You do not have to upload the node_modules directory so you can just create a .gitignore file in the root of your app (it tells Git to ignore particular files/directories or wildcards when adding files to the version control) with the following text:

node_modules

Then, you type git add –allto add all new or modified files to the staging area followed by git commit –m “MESSAGE TO KNOW WHAT CHANGES YOU HAVE MADE”.

Finally, type git push heroku master, wait a bit and your app will be live at the URL that is going to be mentioned in the command-line interface.

You can find the sample application online at: https://infinite-brook-7325.herokuapp.com/

Part 1: How to Create Real-time Chat Application with Node.js Part 1

Part 2: How to Create Real-time Chat Application with Node.js Part 2

Part 3: How to Create Real-time Chat Application with Node.js Part 3

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:

10 responses to “How to Create Real-time Chat Application with Node.js Part 4”

  1. Sud says:

    Hello Ivan there is an error in demo can you please correct it

  2. Sud says:

    Hello Ivan there is an error in demo can you please correct it

    • Ivan Dimov says:

      Change the capitalized words below to point to your local Redis server or to the credentials given by Redis Labs or other service:

      client = redis.createClient(PORT,’HOST’,{no_ready_check: true});

      client.auth(‘PASSWORD’, function (err) {

      if (err) throw err;

      });

  3. Jonathan Odette Sengi says:

    Please correct demo link

  4. Newbia says:

    Hey Sir;

    I downloaded the chat project then I put it in my website as an chat folder. After that I opened it but it directed to me this link https://infinite-brook-7325.herokuapp.com/ then I digged the source code I changed io(“my chat folder link”); like that then when I check chat application I saw the html page as your project but When I try to type something there was no reaction. What am I doing wrong ? pls help me….

  5. Newbia says:

    Hey Sir;

    I downloaded the chat project then I put it in my website as an chat folder. After that I opened it but it directed to me this link https://infinite-brook-7325.herokuapp.com/ then I digged the source code I changed io(“my chat folder link”); like that then when I check chat application I saw the html page as your project but When I try to type something there was no reaction. What am I doing wrong ? pls help me….

Leave a Reply

Your email address will not be published. Required fields are marked *