I have a facebook like system, I want the DIV containing the messages to automatically update when a new message is posted. Is this possible? If so, how would i go about doing this?
<?php include('config.php'); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Alpha</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<?php
// Logged IN
if(!empty($_SESSION['LoggedIn']) && !empty($_SESSION['Email'])) {
// Post to Database
if(!empty($_POST['message']))
{
$message = mysql_real_escape_string($_POST['message']);
$postmessage = mysql_query("INSERT INTO Wall (Message, UserID) VALUES('".$message."', '".$_SESSION['UserID']."')");
}
// Collet Latest Posts
$query = "
SELECT Users.UserID, Wall.Message, Users.Forename, Users.Surname
FROM Wall
INNER JOIN Users ON Wall.UserID = Users.UserID
ORDER BY Wall.MessageID DESC
LIMIT 20;";
$result = mysql_query($query) or die('Invalid query: ' . mysql_error());
// Collet Post User
?>
<div id ="container">
<div id="insideleft">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="profile.php">Edit Profile</a></li>
<li><a href="wall.php">Community Wall</a></li>
<li><a href="logout.php">Logout</a></li>
</ul>
</div>
<div id="insideright">
<h1>Community Wall</h1>
<br />
<div id="postcontainer">
<form method="post" action="wall.php" name="wallpost" id="wallpost">
<input type="text" name="message" id="message" class="message" />
<input type="submit" name="messagesub" id="messagesub" value="Post Message" class="post"/><br /><br />
</fieldset>
</form>
</div>
<?php while ($row = mysql_fetch_assoc($result)) { ?>
<div id="messagecontainer">
<p class="messageposter">
<?php echo "<b>{$row['Forename']} {$row['Surname']}</b><br />"; ?>
</p>
<p class="message">
<?php echo stripslashes($row['Message']); ?>
</p>
</div>
<?php
} ?>
</div>
</div>
<?php
}
else {echo "<meta http-equiv='refresh' content='0;index.php'>";}
?>
</body>
</html>
you can use one of the techniques that are known as Comet
Or you could use XMPP over BOSH
See also http://xmpp.org/extensions/xep-0124.html and http://xmpp.org/extensions/xep-0206.html
make an ajax call to request for updated data. wrap it in a function that recursively calls itself using setTimeOut(). Basically same principle as making a javascript clock (lookup tuts for that) except you use ajax to get current data instead of displaying time.
Ajax is a client-based stateless system:
the client must contact the server,it can't be the server contacting the user but you can create a simple ajax function that check a page every X seconds if there are news.
if you want you can reduce the amount of ajax request you can hold the page for example for 5 seconds checking it 10 times and sleeping 0.5s each time it fails to get news.
XMPP over Bosh is the best solution here if your application really need real-time-update (Real time in the real sense). Jaxl library provides integrated support for XMPP over Bosh, you might want to try this for your application http://github.com/abhinavsingh/JAXL
<html>
<head>
<!-- For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 9000);
});
</script>
</head>
<body>
<div id="responsecontainer">
</div>
</body>
As you can see, the JS code in the header is calling a file called response.php. That’s the file which will refresh every 10 seconds. Just change the value to increase/decrease the refresh period. The #responsecontainer div is where the response.php will be displayed.
It’s as easy as that.