This article is about how to make simple chatroom with jQuery. This article continues next steps of tutorial simple chatroom (Part 1)
Simple Chatroom with PHP & jQuery
process.js
Code:
process.js
Code:
// If page is loaded let's load our functions
$(function(){
// If submit button has been clicked
$("#submitbutton").click(function(){
// Let's get what user has entered to the text field
var message = $("#text").val();
// Now let's post this text
$.post("includes/actions.php?act=post", {
text: message
});
// When user's text is posted
// Remove it from the text field
$("#text").attr("value", "");
return false;
});
// Now let's load our messages
function load_messages(){
// Let's use AJAX to get them from our actions file
$.ajax({
url: "includes/actions.php?act=getmessages",
cache: false,
success: function(html){
// Let's get old posts from there
// Where user's posts are shown
$("#chatscreen").html(html);
// Now let's get this area's height where
// All posts are displayed and then let's animate
// It little bit so the scrollbar is always
// Scrolled down so you can see the new posts
var newheight = $("#chatscreen").attr("scrollHeight") - 20;
$("#chatscreen").animate({ scrollTop: newheight }, 'fast');
},
});
}
// Now let's load chatroom's active users
function load_users(){
// Let's use AJAX also to get chatroom's users
$.ajax({
url: "includes/actions.php?act=getusers",
cache: false
});
}
// Now let's set the time when we will
// Check for new messages and new users
// First, we set the time of our posts
// setInterval(load_messages, 500) loads our posts every 0.5 seconds
// setInterval(load_users, 5000) loads our posts every 5 seconds
setInterval(load_messages, 500);
setInterval(load_users, 5000);
});
Now everything is almost done.. we need a index file so let's build it..
index.php
Code:
// Let's start session and let's include our files
session_start();
include("includes/config.php");
include("includes/actions.php");
?>
// Now if our username is "Guest"
// Let's display the login form
if(get_username() == "Guest"){
echo ""
.login_form()
."";
// If it isn't let's display the chatroom
}else{
?>
// Let's say greetings to the user and display the "Log out link"
echo "Welcome: ".get_username()."! (".get_link().")";
?>
// Now here is the same thing that is in actions file
// Let's select all info from "chat" table
$sql = "SELECT * FROM chat";
$query = mysql_query($sql);
// Little error checking again
if(!$query){
echo "Can not get messages from database.";
}else{
// If everything is good let's display
// User's messages
while($row = mysql_fetch_array($query)){
echo "(".$row[time].") "."".$row['user'].": ".$row['text']."
" ;
}
}
?>
// This is also like in actions file
// Get all info from "auth" table
$sql = "SELECT * FROM auth";
$query = mysql_query($sql);
// Check for errors
if(!$query){
echo "Can not get users from database. ".mysql_error();
}else{
// If everything is fine
// Let's display active users
while($row = mysql_fetch_array($query)){
echo "".$row['user']."";
}
}
?>
}
?>
As you can see it from here:
HTML Code:
"includes/jquery.js" type="text/javascript">
"includes/process.js" type="text/javascript">
"includes/style.css" rel="stylesheet" type="text/css" />
|
