How To Make Chatting Application with Jquery and Ajax

People are always want to know from me how to develop a Facebook live chat application. In this post, i will be giving an idea about chat application with simple JavaScript Codes.

Chatting Application with Jquery and Ajax

Database

CREATE TABLE chat

(

id INT PRIMARY KEY AUTO_INCREMENT,

user VARCHAR(50) UNIQUE,

msg VARCHAR(200),

);

chat.php

Contains PHP, Javascript and HTML code. Run this file with chat.php?user=yourname

<?php

include('db.php');

if($_GET['user'])

{

$user=$_GET['user'];

?>

<script type="text/javascript" src="http://ajax.googleapis.com/

ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">

var user='<?php echo $user;?>';

// Requesting to Database every 2 seconds

var auto_refresh = setInterval(function ()

{

var last_id=$("ol#update li:last").attr("id");

$.getJSON("chat_json.php?q="+user,function(data)

{

$.each(data.posts, function(i,data)

{

if(last_id != data.id)

{ 

var div_data="<li id='"+data.id+"'><b>"+data.user+"</b>: "+data.msg+"</li>";

$(div_data).appendTo("ol#update");

}

});

});

}, 2000); 

// Inserting records into chat table

$(document).ready(function()

{

$('.post').click(function()

{

var boxval = $("#content").val();

var user = '<?php echo $user;?>';

var dataString = 'user='+ user + '&msg=' + boxval;

if(boxval.length > 0)

{

$.ajax({

type: "POST",

url: "chatajax.php",

data: dataString,

cache: false,

success: function(html)

{

$("ol#update").append(html);

$('#content').val('');

$('#content').focus();

}

});

}

return false;

});

});

</script>

// HTML code

<div>

<form method="post" name="form" action="">

<input type='text' name="content" id="content" />

<input type="submit" value="Post" id="post" class="post"/>

</form>

</div>

<?php } ?>

chatajax.php

Contains PHP code. Inserting records into chat table.

<?php

include('db.php');

if($_POST)

{

$user=htmlentities($_POST['user']);

$msg=htmlentities($_POST['msg']);

$user=mysql_escape_String($user);

$msg=mysql_escape_String($msg);

mysql_query("insert into chat(user,msg)values('$user','$msg')");

$sql=mysql_query("select id from chat where user='$user' order by id desc limit 1");

$row=mysql_fetch_array($sql);

$id=$row['id'];

?>

<li id="<?php echo $id; ?&gt;">

<b><?php echo $user; ?>:</b><?php echo $msg;?>

</li>

<?php

}

?>

chat_json.php

Contains PHP code getting the latest record from the chat table and output result in JSON format. Have Any Problem inform me via the comment section.

<?php

include('db.php');

if($_GET['q'])

{

$user=$_GET['q'];

$sql = mysql_query("select * from chat order by id desc limit 1");

$row=mysql_fetch_array($sql);

$userx=$row['user'];

$id=$row['id'];

$msg=$row['msg'];

if($userx!=$user)

{

echo '{"posts": [';

echo '

{

"id":"'.$id.'",

"user":"'.$userx.'",

"msg":"'.$msg.'"

},'; 

echo ']}';

} } 

?>

db.php

PHP database configuration file

<?php

$mysql_hostname = "Host name";

$mysql_user = "UserName";

$mysql_password = "Password";

$mysql_database = "Database Name";

$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");

mysql_select_db($mysql_database, $bd) or die("Could not select database");

?>

Hopefully, you are done this programs successfully. If you have any query to ask me via comment. Here I have given all date for make chatting application with jquery and ajax.

About Luthfar Rahman

I am Luthfar Rahman is the founder of Megaupdate24. I am a Computer Science Engineer, Online Marketer, and Public Speaker. Like to traveling and have been blogging last 7 years. Follow me on Facebook, Google+ and Twitter.