Automatic message notification.

[dalip_007]

When we are on facebook page and someone sends us a message,(not chat message), or any notification does occurs, Then a red number is appeared at the top to notify us (user) about the message. even if we don't refresh the page. This happens without the page refresh,
Same thing does occur when some one posts new tweets on twitter, page is not refreshed and tweets appears automatically.

Does anyone know how to do this? Any example or tutorial on related topic will really be helpful.

Many Thanks in advance

[scrappedcola]

In normal web communications the browser(client) determines what is going on through requests to the server. The server doesn't know anything but what the client requests and generally doesn't have a mechanism for telling the client anything that the client doesn't make a request for (has to do with the current HTTP protocol and it's limitations). There are however a few techniques for simulating the type of behavior you describe above(no duh or you wouldn't have examples). Search strings that will get you a good start include "Server Push" and "Comet (programming)".A few good links to start with are: Comet Wiki, John Resig on Streaming/Server Push.

[dalip_007]

When we are on facebook page and someone sends us a message,(not chat message), or any notification does occurs, Then a red number is appeared at the top to notify us (user) about the message. even if we don't refresh the page. This happens without the page refresh,
Same thing does occur when some one posts new tweets on twitter, page is not refreshed and tweets appears automatically.

Does anyone know how to do this? Any example or tutorial on related topic will really be helpful.

Many Thanks in advance

thanks for the reply, going through the tutorials sent by you. I hope its the same technique which Gmail uses to instantly show up the new mail, while yahoo doesn't show it without refreshing the page.

[Moderns]

Hi developer,

I have the solution for you.

Using the Jquery function below, it refreshes the target_div each 5 seconds with the content from content.php page.

$(document).ready(function() {
 	 $("#target_div").load("content.php");
   var refreshId = setInterval(function() {
      $("#target_div").load('content.php?randval='+ Math.random());
   }, 5000);
});

Now the trick is how to play with this code to refresh specific DIV each 5 seconds in a specific PHP page.

Assume you have DIV called facebook_status in test.php page, and you need to refresh its content each 5 seconds.

You have to add to test.php page an empty DIV like below:

<div id = target_div></div>

and through another included PHP file, let us say content.php, use AJAX request and same Jquery syntax above to retrieve data from database as below

echo "<script>RefreshDIV('facebook_status');</script>";

In Javascript side:

function RefreshDIV(div_id){
// AJAX call to database..
// on callback function:
//Get the result from the database through AJAX request that will retrieve the result in XML node <result>
// XML to retrieve the content
result = XML_result;
document.getElementById('facebook_status').innerHTML = result; // result from database
}

Of course you will use the GET Method to update your database records.

In this case, the DIV (facebook_status) will be refreshed with the content from the database every 5 seconds. I do not know if there is a way to do that on server response only! If yes, it would be interesting!