August 16, 2015 7:11 pm

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

In the next tutorials, we will be building a simple Node.js chat application. Messages will be delivered in real-time and we are going to take advantage of the Speech Synthesis API for the supporting browsers so that the computer can read aloud the messages as they arrive in the chat. We will be using Node.js, Express and Redis for persistence. Express is a very popular framework for Node.js that eases development and provides many useful features.Create Real-time Chat Application with Node

[wpdm_file id=147]DEMO

Redis is a key-value data store which uses the machine memory to cache key-value pairs. Because our application would not save all the chat history and will keep only around 20 messages at a time I believe Redis is a good choice as the fact that it stores the data in memory makes it really efficient and quick. We will be using cloud hosting (Redis Labs) for our database and Heroku (another cloud provider) for our application.

In the public/views folder we have only one view for this application: index.html.

The markup

In the head tag we load jQuery, Bootstrap and the client-side part of Socket.io from CDNs, then we load our app’s unique stylesheet.

<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.socket.io/socket.io-1.3.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="/stylesheets/styles.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"/>
<title>Talky Talk</title>
</head>

We create two boxes – the first taking 5 out of 12 columns on medium screens (it represents a box pinpointing the number of users online and their nicknames) and another box which takes 7 out of the 12 columns on medium screens which represents the chat itself.

<div class="col-md-12">
<div class="col-md-5"  id="online">
<h1 class="text-center">Users Online:</h1>
<ulid="users-online"></ul>
</div>
<div class="col-md-7" id="chatbox">
</div>
</div>
</div>

On the bottom, there is a form with which users can add new messages to the chat:

<form action="" class="col-lg-6 col-lg-offset-3" method="GET">
<label for="msg">Message:</label>
<input required maxlength="100" id="msg" class="form-control" type="text" placeholder="Enter your message..." name="msg">
<input type="submit" class="btnbtn-md btn-primary" value="Send"/>
</form>

The styles

Our styles give the two boxes (users online and the chat container) fixed dimensions and set the vertical overflow to scroll so that when there are many users or many long messages the users could scroll only the boxes to see what is inside. We also make some decorative modifications to the default boxes.

#online {
border-left: 4px solid #CFCFCF;
border-right: 4px solid #CFCFCF;
border-top: 1.5px dashed #CDCDCD;
border-bottom: 1.5px dashed #CDCDCD;
width: 300px;
background-color: #fc8c84;
color: #fefefe;
font-size: 1.5em;
padding: 0;
margin: 15px;
overflow-y: scroll;
height: 400px;
}

#users-online {
list-style: none;
}

.user {
color: #444;
}

#chatbox{
height: 400px;
overflow-y: scroll;
margin-top: 15px;
background-color: #eee;
color: crimson;
font-size: 2em;

}

#chatbox p:before {
content:"-";
}

#chatbox p {
border-bottom: 2px dashed #CDCDCD;
}

.error {
display: none;
}

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

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

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:

One response to “How to Create Real-time Chat Application with Node.js Part 1”

  1. Saeed Ansari says:

    Please explain in deep about auto refreshing front end and getting response from database its the hardest thing please explain as much as you can that part when time will come

Leave a Reply

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