Simple chat Application using Javascript APIs

Today I will show you the basic design of chat application without using any MySQL or any databases, instead we use Javascript API.

This is popularly known as Firebase. To learn the API fully please visit Documentation Site

Chat app using JavaScript

Displaying No. of messages..

chat2

Chat app using JavaScript APIS

Live Demo

The code might look like…

For styling the textboxes and the chat display area…


#comment-container {
border: 1px solid #d0d0d0;
height: 400px;
overflow-y: scroll;
}

.comment-container {
padding: 10px;
margin:6px;
background: #f5f5f5;
font-size: 13px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.comment-container .label {
margin-right: 20px;
}

.comment-container:last-of-type {
border-bottom: none;
}

For the mark-up…


<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>A Simple chat API Using FIREBASE</h4>
</div>
<div class="panel-body">
<div class="comment-container" id="comment-container">
<!-- To display the inserted messages//-->
</div>
</div>
<div class="panel-footer">
<div class="form-group">
<label for="comments" class="sr-only">Comments Here...</label>
<input type="text" id="name" class="form-control primary" placeholder="Enter your name..."/>
<input type="text" id="comments" class="form-control" placeholder="Place your comments here..."/>
</div>
<button type="submit" class="btn btn-success" id="submit" >Submit</button>
<button type="reset" onClick="javascript:clearData();" class="btn btn-danger" id="clear">Clear</button>
</div>
</div>
</div>

For the Javascript Calls…


$(document).ready(function(){
var firebaseRef = new Firebase('<Your_FIREBASE_URL LOCATION>');
$('#submit').click(function(){

var comment = $('#comments').val();
var name = $('#name').val();
if(comment.length === 0)
{
alert("Please Fill this field...");
}
else{
firebaseRef.push({name:name,text:comment});

}
$('#comments').val('');
});
firebaseRef.on('child_added',function(snapshot){
var message = snapshot.val();
$('<div/>').text(message.text).prepend($('<em/>')
.text(message.name+': ')).appendTo($('#comment-container'));
$('#comment-container')[0].scrollTop = $('#comment-container')[0].scrollHeight;
});

});

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s