How to implement COMET with PHP
Comet is a programming technique that enables web servers to send data to the client without having any need for the client to request it. This technique will produce more responsive applications than classic AJAX. In classic AJAX applications, web browser (client) cannot be notified in real time that the server data model has changed. The user must create a request (for example by clicking on a link) or a periodic AJAX request must happen in order to get new data fro the server.
I will now explain how to implement Comet with PHP programming language. I will demonstrate it on two demos which uses two techniques: the first one is based on hidden ”<iframe>” and the second one is based on classic AJAX non-returning request. The first demo will simply show the server date in real time on the clients and the second demo will display a mini-chat.
Comet with iframe technique : server timestamp demo
We need:
- A PHP script that will handle the persistent http request (backend.php)
- A HTML file that will load Javascript code and that will show the data coming from the server (index.html)
- The prototype library that will help us to write simple JS code
To understand how it works this schema should help:
The backend script (PHP)
This script will do an infinite loop and will return the server time as long as the client is connected. Call it “backend.php”:
<?php header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); flush(); ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Comet php backend</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> // KHTML browser don't share javascripts between iframes var is_khtml = navigator.appName.match("Konqueror") || navigator.appVersion.match("KHTML"); if (is_khtml) { var prototypejs = document.createElement('script'); prototypejs.setAttribute('type','text/javascript'); prototypejs.setAttribute('src','prototype.js'); var head = document.getElementsByTagName('head'); head[0].appendChild(prototypejs); } // load the comet object var comet = window.parent.comet; </script> <?php while(1) { echo '<script type="text/javascript">'; echo 'comet.printServerTime('.time().');'; echo '</script>'; flush(); // used to send the echoed data to the client sleep(1); // a little break to unload the server CPU } ?> </body> </html>
The client script (HTML)
This HTML document first load the prototype library in the ”<head>” tag, then it create the tag that will contains the server timer ”<div id=“content”></div>”, and finally it create a “comet” javascript object that will connect the backend script to the time container tag.
The comet object will create some invisible “iframe” tags (depends on the web browser). These iframes are in charge to create the background persistent http connection with the backend script. Notice: this script do not handle possible connection problems between client and server.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Comet demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div id="content">The server time will be shown here</div>
<script type="text/javascript">
var comet = {
connection : false,
iframediv : false,
initialize: function() {
if (navigator.appVersion.indexOf("MSIE") != -1) {
// For IE browsers
comet.connection = new ActiveXObject("htmlfile");
comet.connection.open();
comet.connection.write("<html>");
comet.connection.write("<script>document.domain = '"+document.domain+"'");
comet.connection.write("</html>");
comet.connection.close();
comet.iframediv = comet.connection.createElement("div");
comet.connection.appendChild(comet.iframediv);
comet.connection.parentWindow.comet = comet;
comet.iframediv.innerHTML = "<iframe id='comet_iframe' src='./backend.php'></iframe>";
} else if (navigator.appVersion.indexOf("KHTML") != -1) {
// for KHTML browsers
comet.connection = document.createElement('iframe');
comet.connection.setAttribute('id', 'comet_iframe');
comet.connection.setAttribute('src', './backend.php');
with (comet.connection.style) {
position = "absolute";
left = top = "-100px";
height = width = "1px";
visibility = "hidden";
}
document.body.appendChild(comet.connection);
} else {
// For other browser (Firefox...)
comet.connection = document.createElement('iframe');
comet.connection.setAttribute('id', 'comet_iframe');
with (comet.connection.style) {
left = top = "-100px";
height = width = "1px";
visibility = "hidden";
display = 'none';
}
comet.iframediv = document.createElement('iframe');
comet.iframediv.setAttribute('src', './backend.php');
comet.connection.appendChild(comet.iframediv);
document.body.appendChild(comet.connection);
}
},
// this function will be called from backend.php
printServerTime: function (time) {
$('content').innerHTML = time;
},
onUnload: function() {
if (comet.connection) {
comet.connection = false; // release the iframe to prevent problems with IE when reloading the page
}
}
}
Event.observe(window, "load", comet.initialize);
Event.observe(window, "unload", comet.onUnload);
</script>
</body>
</html>
Download it
Here is the tar.gz archive of this demo.
Comet with classic AJAX : litte chat demo
As on the above technique, we need:
- A file to exchange data (data.txt)
- A PHP script that will handle the persistent http request (backend.php)
- A HTML file that will load Javascript code and that will show the data coming from the server (index.html)
- The prototype library that will help us to write simple JS code
The backend script (PHP)
This script will do two things:
- Write into “data.txt” when new messages are sent
- Do an infinite loop as long as “data.txt” file is unchanged
<?php $filename = dirname(__FILE__).'/data.txt'; // store new message in the file $msg = isset($_GET['msg']) ? $_GET['msg'] : ''; if ($msg != '') { file_put_contents($filename,$msg); die(); } // infinite loop until the data file is not modified $lastmodif = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0; $currentmodif = filemtime($filename); while ($currentmodif <= $lastmodif) // check if the data file has been modified { usleep(10000); // sleep 10ms to unload the CPU clearstatcache(); $currentmodif = filemtime($filename); } // return a json array $response = array(); $response['msg'] = file_get_contents($filename); $response['timestamp'] = $currentmodif; echo json_encode($response); flush(); ?>
The client script (HTML)
This HTML document first load the prototype library in the ”<head>” tag, then it create the tag ”<div id=“content”></div>” that will contains the chat messages comming from “data.txt” file, and finally it create a “comet” javascript object that will call the backend script in order to watch for new chat messages.
The comet object will send AJAX requests each time a new message has been received and each time a new message is posted. The persistent connection is only used to watch for new messages. A timestamp url parameter is used to identify the last requested message, so that the server will return only when the “data.txt” timestamp is newer that the client timestamp.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Comet demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="prototype.js"></script>
</head>
<body>
<div id="content">
</div>
<p>
<form action="" method="get" onsubmit="comet.doRequest($('word').value);$('word').value='';return false;">
<input type="text" name="word" id="word" value="" />
<input type="submit" name="submit" value="Send" />
</form>
</p>
<script type="text/javascript">
var Comet = Class.create();
Comet.prototype = {
timestamp: 0,
url: './backend.php',
noerror: true,
initialize: function() { },
connect: function()
{
this.ajax = new Ajax.Request(this.url, {
method: 'get',
parameters: { 'timestamp' : this.timestamp },
onSuccess: function(transport) {
// handle the server response
var response = transport.responseText.evalJSON();
this.comet.timestamp = response['timestamp'];
this.comet.handleResponse(response);
this.comet.noerror = true;
},
onComplete: function(transport) {
// send a new ajax request when this request is finished
if (!this.comet.noerror)
// if a connection problem occurs, try to reconnect each 5 seconds
setTimeout(function(){ comet.connect() }, 5000);
else
this.comet.connect();
this.comet.noerror = false;
}
});
this.ajax.comet = this;
},
disconnect: function()
{
},
handleResponse: function(response)
{
$('content').innerHTML += '<div>' + response['msg'] + '</div>';
},
doRequest: function(request)
{
new Ajax.Request(this.url, {
method: 'get',
parameters: { 'msg' : request
});
}
}
var comet = new Comet();
comet.connect();
</script>
</body>
</html>
Download it
Here is the tar.gz archive of this demo.
Discussion
Very good demo, but: 1/ it doesn't work on my Windows machine, only on my LAMP 2/ would be so cool if there was a demo without the prototype library :D
Great demo. But with your ajax chat, isn't this just polling constantly for changes to the text file rather than using “push” functionality normally associated with Comet?
It's not really polling because each AJAX request stay alive as long as no fresh data is found.
It's “long polling” isn't it? It has to make a new http request after it receives a new message. Is there a way to keep the connection alive even after it receives a new message?
Yes the second example uses the “long polling” technique. If you need to keep the connection alive, have a look to the first example (the iframe technique).
test
hitest
it returned undefined in the div element.
Good idea, but not working or in my IE 6 and not in my MOZ 2.0
Very nice, indeed! I've been playing around with your chat-demo and changed the “backend.php”, so that the msg-text is wrapped in an iframe and images and websites can be displayed, instead of text. It works fine in the frontend where I type my message, but isn't updated in the other browser. Any hint where I would have to modify the “comet.chat.js” to get this to work? Thanks for this great code!
Sorry for my previous post. Everything works fine in firefox 2 (Mac). It just doesn't work in Safari.
first example online demo appears to be currently broken for Opera on OS X
in fact tried mozilla and safari, all broken for OS x
One thing I did notice is that the memory usage do go up with each “tick”. You need to be able to remove the previous script tag before adding another one.
Here's my solution! On the backend.php
Then in the main html page - in the JS add this below the printServerTime line:
reload : function(){comet.iframediv.setAttribute('src', './backend.php'); },The reload() function will initiate new requests to the server, which I don't think is a good solution, because the whole point of the COMET concept is to use long-live connections to push data from server to clients.
To solve your problem, you can actually clear the .innerHTML of the iframe body within the printServerTime() function, like this:
printServerTime: function(time) { $('content').innerHTML = time; /* assume doc refers to the document object of the <iframe> target */ doc.body.innerHTML = '';This will reduce the memory usage with each tick.
This is what I came up with going along with Ganquan suggested in case anyone is interested
printServerTime: function (time) { $('content').innerHTML = time; oIframe = document.getElementById('comet_iframe'); oDoc = (oIframe.contentWindow || oIframe.contentDocument); if (oDoc.document) oDoc = oDoc.document; oDoc.body.innerHTML = ''; }oDoc.body is null. In IE dev tool, the script tags are written inside the head element. Any method to manipulate the head tag contents?
if I want multiple scripts writing to data.txt (second example) should I use LOCK_EX paramater in file_put_contents() line?? or will this screw up the javascript end of things?
or should I be looking into creating a unix socket and sending timestamp data?
or should data.txt reside in /tmp (ramdrive)?
Use LOCK_EX in file_put_content to prevent content corruption when two (or more process) are writing together in the file. So yes you can use it and it will improve the behavior. However it will not completely solve the concurrent write problem because the file_get_contents is not synchronized with the writes. A solution is to use another file to store an index used to synchronize the read and write tasks.
using firefox (both versions 2 and 3) on mac, your chat demo seems to lose connection after about 2 minutes of inactivity..
any sugestions as to what needs to be changed to fix this?
it appears in safari, however, it forces a reconnect after a period of inactivity.. I verified this by attaching a sound to the onComplete() javascript function…
any way to send javascript down the comet pipe? (using example2)?
Thanks for an excellent example. I'm using your second example for “pushing” updates in a database to the browser. It is working excellent in Firefox, and half-good in IE 5,6. On refresh of the page IE hangs. It seems to be somewhere in the javasript. The same happens on your chat demo. Refresh a few times and you will see. Do you have any idea on the cause of this? And of course, above all, a possible solution?
Thanks again.
please explain
For those who can't get the first example to work, beware of the output buffering of Apache/PHP/Browser. On my Windows Server, it worked after I turned the 'output_buffering' directive to 'Off' in my php.ini, I believe if you are using the iframe method, buffering at any layers can effect.
Your tip solves my problem, but the data stops to echoing after a few seconds… =/
I've tried the first example and it works but both width IE7 or Firefox, after a few minutes of comet-connection, the channel stops and the connection is broken. So there is no more push. Any help?
Nice example, maybe we will use it in www . glory-online . com First Ajax realtime 2D game It's Strategy , there is a movie to see it in action, go and see. It's best Java script browser game, I have see on the net.
How is the script in the second example ever finished? If it keeps looping over and over looking for new messages it will never quit even though the user has closed his browser?
What if no messages are available within the PHP timeout?
Yes, the script is terminated when the user close its browser. However it depends on your php.ini configuration. To be sure of this behavior, you can add this code at the beginning of the server script:
Rather than depending on the .ini mebbe add an onunload=“quitter()” event to the basic page, and there abort() the connection?
I would say that if you want to run a Comet enabled site then run the server with something other than PHP and Apache, the threaded nature makes scaling a bitch.
ewewe
I´m having problems in Internet Explorer. After some minutes, he doesn´t change the content anymore. So, when i try to reload the page, the IE show me an alert: “Stack overflow at line 0”, and the code doesn´t work anymore. Any help?
If i wrote any word wrong, sorry. My english isn´t too good.
Vinicius,
I got the same problem. Did you manage to resolve it?
Thanks.
Heru
I want the full demonstration with screen shots for my project Web Application Hacking in PHP..
how incredibly rude.
True.
Hi,
WE have implemented in one of our projects and thats works fine on FireFox but does not work on IE6 and IE7.
Have anyone found solution for the same.
I would be really thankful since we have spent lot of time developing the application only at the end to find out it does not work on IE. After 2-3 seconds IE does not display the updated data from the server.
We are using LAMP.
Regards, Rajshekhar Sipoy
Has anyone had trouble with getting a response using the ActiveXObject(“htmlfile”) for Inernet Explorer in general? I have tried this with a handful of example codes and never get a response. Some developers have complained of getting a certain number of responses and then it stops, but I get none at all. With some example codes if I comment out the while loop and flush and sleep statements I am able to get a single response. I'm thinking it may have something to do with my server configuration or something between me and my server. Can anyone think of other variables that might be effecting the ActiveXObject(“htmlfile”) functionality?
I am using PHP5 on a Media Temple shared server(Grid-Server). I have tried using: ini_set('output_buffering', 'Off'); and: set_time_limit(0);
Note that this particular example doesn't work for me in any browser. With other code I am able to use XHR streaming for Firefox, Safari, and Chrome, and Server-Sent Events for Opera. ActiveXObject(“htmlfile”) functionality for Internet Explorer remains elusive.
Putting session_start() in the backend.php file will put both requests in a loop until they both time out. Any suggestions to fix this, or work around it using sessions anyway? Setting a session to break the while loop obviously won't work, and inserting special messages into the text file to force a break would be too much of a hassle.
At first I thought the file locking was a problem so I attempted to use the global session object to store the data. However, I started getting serious hangs that were crashing Apache, it was like the session became corrupt or was locked some how. Then I realised the PHP session is just a file so I changed back to the original file technique in this post. I tested concurrent access with hundreds of simultanous connections and there is never a problem writing. Either PHP is behaving single threaded or OS X server has a decent file system robust to this, I'm not sure. Anyway I came across another idea that you can store a session in memory instead, there is no problem with writing numbers to the same memory I don't think. Here is the link I am going to try: http://devzone.zend.com/article/141-Trick-Out-Your-Session-Handler “For high-performance session storage, you can store session data in memory with the mm shared-memory module. ”
Hi,
we have written an application using the technology mentioned. Scaling up is a big issue in this.. Our Server hangs for 25 concurrent users. We need to support around 1,000 concurrent users. Please let me know anyone are able to successfully implement this solution for around 1000 concurrent users. Malcolm Hall, were u able to successfully implement using high-performance session storage technique.
Regards, Raj S
In Example 1: We have used the same code, After Installing mozilla first time I accessed my jsp I faced the problem of hanging of jsp ( where I have used comet)
var comet = window.parent.comet;
My question now is whether is their any chance some kinda browser settings required to solve this issue
Also please let me know how Keep-Alive is related to comet.
Opening multiple mozilla/firefox with example 1 does not work. Only the first window shows time. Works fine with other browsers.
Any reason or fix!!
@Malcolm Hall: That's kind of what I did a few months ago, in order to fix my aforementioned glitch. I'm inserting sessions into the database instead, though. So, now when visiting a page that uses sessions, while having another AJAXed page in a loop, it will no longer hang.
Solution: Don't use a file-based session method.
I have resolved the IE problem by cleaning the browser cache. And lately adding a header with no caché.
I think the file technique it's just an example, obviously will hang out because I/O latency. Try to work with sessions to persist data
hi everyone! i'm using the second exaple for a project and have some problems with IE. after refresh i get: Stack overflow at line: 0
does anyone know how to fix that?
thank you, marko
i have a solution about the connection.
Very good!
The format of this web site is ridiculous. It's only readable at 1024×768, but 50% of the space is wasted with margins. Not everyone wants to go blind reading at 1024×768. Spend more time making your page display at lower resolutions like 800×600 and less time on all this useless fancy layout and pretty color formatting.
man.. calm down.. just relax
please help me about php &mysql
Folks, in working with comet, my theory is that a good portion of the hangs reported here may be due to an attempt to exceed the browser's standard per-server connection limit of two.
Do browsers expose this data?
I wonder if anyone has a convenient way of checking to see what this collection is? And if not, any theory of how to check?
sorry i don't understand you please help me about wamp
Jack, see http://www.wampserver.com/phorum/list.php?2
I am having problems with the chrome browser continuously showing the page loading on both examples where as IE and Firefox don't do this. Also both examples work great hosted on a LAMP server but I can't seem to get the iframe technique to work when hosted on a WAMP server. Any ideas what would be causing these problems?
I'd look at the page you're trying to load into the iframe. I've seen different browser behaviors when encountering errors. Also different rendering strategies between browsers, so taht a given object may or may not yet exist, resulting in an error in referring to it.
hi please one body send me ebook:advance php for web professional
Why in backend.php can't put session_start() at first line to use sesions? Then don't work the script :S
Hi To All, I have an interesting problem the comet push works on my intranet but won't work outside on the www. Any ideas on why this would be happening would be much appreciated! Thanks for the great code ;)
I believe php only detects a user abort if data is passed (flushed) thru the connection (and ignore_user_abort is false). My connections are not being closed/aborted on the server when the user navigates away from the page
Any ideas? Arnie Shore's idea about aborting the connection will not abort php until the php script tries to send data thru the connection and that might never happen. Timeouts might be an option but defeats “long polling”. I am kind of stumped here…
Charlie, re “My connections are not being closed/aborted on the server …”: How can you tell that?
(I'm not at all disagreeing with yr post; I'm trying better to understand the connection mechanics.)
Heresy: I wonder whether anyone here has tried to find an alternative way of interacting with the server. Like through a Java applet, or a (hopefully, smallish) flash script.
IIRC, I saw something some time ago re an applet that cd do socket functions, which certainly sounds promising, but I haven't been able to find anything recent or relevant.
Arnie, i'm no expert on COMET or AJAX whatsoever, however i think that the problem with implementing a custom socket applet or flash movie is that using a HTTP connection brings to your web page very useful features that common http servers have, namely:
Besides, rolling your own would be making the wheel again… something that can give you some benefits, but most of the time ends as a maintenance headache.
I'm going to implement a system that'll probably use comet techniques for the backend, so i'll be getting some real experience soon tih it and would be getting back here soon
Has anyone checked that the connection dropping problem isn't related to any of these following problems:
I'm no expert in comet, but the first thing that came to my mind when reading these comments was this.
I will try it for a while and test whether it is great or not.
Thanks for the code. Perhaps this is a dumb question but has anyone come up with a disconnect function to stop the ajax?
how to make comments box in my on site
What is the difference between these two methods?
From the first example - When i try to retrieve records from the database and pass it to the function as below - echo 'comet.printServerTime('.$data.');'; the connection is gone. and nothing happens can you please explain why ?
How do you avoid the max execution time error with your code? I don't get how when you are in the while loop the script does not time out.
Cool solutions. Is there any way to use it where javascript is not enabled? on mobile sites
- I frame version works really well! But the loading bar is going crazy… and some user could think the page is not loaded at all!
- ajax version, works nice and you don't notice some script is going in background! But, i think is less performant, imagine 1000 users in chat, if there's a new message, means 1000 connection will close/reopen!
What's the best solution to you?
Hello,
How do we achieve Comet with MySQL Database? I've sorta tried it but the response is very very slow
不错