jquery chat box like fb

By Chirag Patel | Last Updated on : 06 July 2016

Everyone loves the gmail and facebook inline chat modules. This jQuery chat module enables you to seamlessly integrate Facebook style chat into your existing website. It must be required to be included jquery plugin the ChatJS. ChatJS is a jQuery plugin for instant messaging for any user. It's completely client-side, not server side. Due to this reasons, we get instant message, not delay fetched by any users. so it's completely platform agnostic.

Server side communication is implemented through Adapters which handle situlation like user activities. The adapter is the piece of code that is responsible for handling client/server communucation as far client press any key then loading message like user is typing like messages displayed on the user. ChatJS comes with a demo adapter that you can see running in the bottom right of this page. It's just an echobot that will repeat what you say. You can use it as a boilerplate to implement your own. The server portion of your solution will be written according to the adapter specification. You can add multiple adapter more than one chat box.

First we needs to make html code for design any chat box.Below code for html chat box:

<body >
  <div id="fixed">
    <div class="fixedHeader">jQuery404</div>
    <div class="fixedContent"></div>
    <div class="chatbox">
        <textarea class="userinput" style="height: 25px; ">Type here...</textarea>            
    </div>
</div>
</body>

Add css class like:

.fixedHeader {
    background: none repeat scroll 0 0 #6d84b4;
    border: 1px solid #3d5a99;
    border-bottom: none;
    color: #fff;
    height: 22px;
    margin: 0 auto;
    padding: 5px;
    width: 390px;   
    font-weight:700;
    font-size:15px;
}

.fixedContent {
    background: none repeat scroll 0 0 #ffffff;
    border-left: 1px solid #b2b2b2;
    border-right: 1px solid #b2b2b2;
    margin: 0 auto;   
    width: 400px;
    height:300px;
    overflow: auto;
}

.userinput{
    width: 390px;
    height:20px;
    outline:none;
    display:block;
    resize:none;
    padding:5px;    
}

.messages{
    color: #333;
    line-height: 1.28;
    padding:5px;
    margin-left:70px;
    font-size: 14px;
    display: block;
}

.userwrap{
    position:relative;
}

.user{
    padding: 5px ;
    font-size:12px;
    color:#888;
    font-weight:700;
    position:absolute;
    left:0; top:0;
}

Jquery are added for inser message and display on the chat box.

var toggle = false;
var user="jQuery404";
var searchBoxText= "Type here...";
var fixIntv;
var fixedBoxsize = $('#fixed').outerHeight()+'px';
var Parent = $("#fixed"); // cache parent div
var Header = $(".fixedHeader"); // cache header div
var Chatbox = $(".userinput"); // cache header div
Parent.css('height', '30px');

Header.click(function(){           
    toggle = (!toggle) ? true : false;
    if(toggle)
    {
        Parent.animate({'height' : fixedBoxsize}, 300);                    
    }
    else
    {
        Parent.animate({'height' : '30px'}, 300); 
    }
    
});

Chatbox.focus(function(){
    $(this).val(($(this).val()==searchBoxText)? '' : $(this).val());
}).blur(function(){
    $(this).val(($(this).val()=='')? searchBoxText : $(this).val());
}).keyup(function(e){
    var code = (e.keyCode ? e.keyCode : e.which);       
    if(code==13){
        $('.fixedContent').append("<div class='userwrap'><span class='user'>"+user+"</span><span class='messages'>"+$(this).val()+"</span></div>");
        event.preventDefault();
     alert("enter");
        $(".fixedContent").scrollTop($(".fixedContent").height());
        $(this).val('');
    }
    
});