Comet demo

====== How to implement COMET with PHP ====== [[http://en.wikipedia.org/wiki/Comet_(programming)|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 [[http://kerphi.zeitoun.net/articles/comet_and_php/comet-iframe/|first one]] is based on hidden ""; } 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); ==== Download it ==== Here is the {{comet-iframe.tar.gz|tar.gz archive}} of this demo. ==== Online demo ==== Here is the [[http://kerphi.zeitoun.net/articles/comet_and_php/comet-iframe/|online 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 [[http://www.prototypejs.org/|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

==== The client script (HTML) ==== This HTML document first load the prototype library in the "" tag, then it create the tag "

" 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.


  
  
    
      Comet demo

==== Download it ==== Here is the {{comet-ajax.tar.gz|tar.gz archive}} of this demo. ==== Online demo ==== Here is the [[http://kerphi.zeitoun.net/articles/comet_and_php/comet-ajax/|online demo]]. ~~DISCUSSION~~ {{tag>article informatique comet ajax php javascript}}