Achieving Short Polling with Jquery & PHP
Being a PHP developer, I am sure this is the most biggest challenge faced while populating data in real time. As PHP relies on a server, Apache mostly, a continues concurrent connections opened will slow down the server and limit its resources. This is due to the blocking architectural of Apache.
While looking into various methods from which we can actually achieve real time data, we can use polling, short polling ofcourse as long polling is literally hard to achieve with Apache.
Short polling is a method where client sends a request to the server and server responds, it is a basic HTTP request. This request can be set to initialize within a time interval to minimize server overload. for this matter we are going to use a jquery plugin that you can find at http://www.eslinstructor.net/smartupdater3/ known as smartupdater.
so lets begin with the file structure.
1- index.php [file]
2-poller.php [file]
3-scripts [folder]
– jquery-1.8.2.min.js [file]
– smartupdater.4.0.js [file]
so lets start to build the pages.
1- index.php
- Download smartupdater plugin from https://code.google.com/p/smartupdater/downloads/list
- Download jquery plugin from http://jquery.com/download/
- Include the plugins in the <head> portion of the HTML page.
|
1 2 |
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/smartupdater.4.0.js"></script> |
- Initialize the script in the header part, we give 1 second interval. Moreover the data is to populate in a div labeled in ID as “livedata”.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script>
$(document).ready(function(){
$("#livedata").smartupdater({
url : 'poller.php',
minTimeout: 1000 // 1 seconds
}, function (data) {
$("#livedata").html(data);
}
);
});
</script> |
- now that we have initialized, lets make the div in the <body> portion that will hold the live data.
|
1 |
<div id="livedata"></div> |
Full source code looks like below for index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Short polling with Jquery & PHP</title>
<script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="scripts/smartupdater.4.0.js"></script>
<script>
$(document).ready(function(){
$("#livedata").smartupdater({
url : 'poller.php',
minTimeout: 1000 // 1 seconds
}, function (data) {
$("#livedata").html(data);
}
);
});
</script>
</head>
<body>
<div id="livedata"></div>
</body>
</html> |
lets start with the next file.
2- poller.php
Here we are not going to do much, just asking PHP to echo out current time. If you want you can run mysql_queries and get the result too.
|
1 |
<?php echo date('H:i:s'); ?> |
now that both the files are ready lets run it. Have a look it in the demo.
DEMO | DOWNLOAD
Hope you like this tutorial and hope to see this in your work, Please leave your feedback.
Thank you.
I appreciate the good work you are doing! I’ve really enjoyed reading it. You’ve arouse me a great interest. I’ll investigate it more. Keep up doing it!
Nice! How can I sign up for RSS to your blog? Thanks!