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.
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
Tutorial Categories:
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