Hey guys, how are you today?
Today we are going to create a Simple Real-Time chat application using PHP and JavaScript.
Let's assume that we have created a suitable database. Following are the details of the database that i have created for the demo application.
Database Name - DemoChat
Table Name - ChatTbl
Column 1 - User
Column 2 - Message
Now we are good to go.
First we have to create the user interface for the chat application.
Here is the sample code:-
<html>
<head><title>Chat Application</title></head>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
function submitChat(){
if(form1.uname.value==""||form1.msg.value==""){
alert("Fill all fields!!");
return;
}
var uname = form1.uname.value;
var msg = form1.msg.value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById('chatLog').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg,true);
xmlhttp.send();
}
//jquey lines
$(document).ready(function (e){
$.ajaxSetup({cache:false});
setInterval(function(){$('#chatLog').load('logs.php');},2000);
}
)
</script>
<body>
<form name="form1">
Enter chat name : <input type="text" name="uname"/>
Your Message : <textarea name="msg"></textarea><br/>
<a href="#" onclick="submitChat()">Send</a><br/><br/>
<div id="chatLog">
This is the Chat LOG
</div>
</form>
</body>
</html>
Well let's see the code in detail.
In the first script tag we have added a jQuery file which will be needed in the code.
Then the function submitChat() is created. In this function first it checks whether the user name and the message fields are filled by the user. If not it will create an alert.
If these fields are not empty, the contents of these fields are assigned to JavaScript variables.
Then XML and HTTP object is created as follows.
var xmlhttp = new XMLHttpRequest();
This will allow us to load a PHP code without reloading the page.
Later,
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById('chatLog').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('GET','insert.php?uname='+uname+'&msg='+msg,true);
xmlhttp.send();
}
In this code it sends the user name and message content to a PHP page named
insert.php.
Then,
$(document).ready(function (e){
$.ajaxSetup({cache:false});
setInterval(function(){$('#chatLog').load('logs.php');},2000);
}
)
In this code it runs the code in
logs.php and prints the content inside the div tag where the id is equal to
chatLog. And refreshes only the content of that particular div tag in every 2000 mili-seconds.
Code after the <body> tag is plain HTML, so I hope you will understand it.
Now let's look at the
insert.php file.
Here is the sample code:-
<?php
$uname = $_REQUEST['uname'];
$msg = $_REQUEST['msg'];
//create DB connection and select DB
#Hope you know how to connect to a database and select the database in PHP
#If not please refer Connecting Database in PHP
mysql_query("INSERT INTO ChatTbl VALUES('$uname','$msg');");
?>
In this code it will insert or save the values what the user enters to the database. This code will run when the user hits the
SEND link in the user interface.
Now let's look at the
logs.php file.
Here is the sample code:-
<?php
//create DB connection and select DB
#Hope you know how to connect to a database and select the database in PHP
#If not please refer Connecting Database in PHP
$result = mysql_query("SELECT * FROM ChatTbl");//order by ACSC
while($row = mysql_fetch_array($result)){
echo($row['User'].":".$row['Message']);
}
?>
In this code it selects the content of the table
ChatTbl and prints to the user interface.
Hope you got it correctly. Please comment for the questions.
Past Topics:-
Like Us on Facebook:-
Comment Box is open for your Ideas, Complaints, Questions, Suggestions and Comments.
