Creando un pequeño sistema de chat
Para esto necesitamos:
- PHP >= 5.2.0 (incluye función json_encode por defecto)
- Un archivo para el intercambio de datos – simple archivo de texto (datos.txt).
- Un script PHP que se encargará de la petición HTTP persistente (peticion.php).
- Un archivo HTML que cargue el código JavaScript y que muestre los mensajes/datos del servidor (index.html).
- La biblioteca Prototype.
El script peticion.php
Este script hará dos cosas:
- Escribir en el archivo datos.txt los nuevos mensajes que envie el cliente.
- Hacer un bucle infinito siempre y cuando datos.txt no haya sido modificado.
<?php
// dirname -> parte del path correspondiente al directorio
$filename = dirname(__FILE__).'/datos.txt';
// almacenamos un nuevo mensajes en el archivo
$msg = isset($_GET['msg']) ? $_GET['msg'] : '';
if ($msg != ''){
//file_put_contents -> escribir una cadena sobre un archivo
file_put_contents($filename,$msg);
die();
}
// bucle infinito mientras los datos del archivo no son modificados
$lastmodif = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
//filemtime -> obtiene la hora de modificación del archivo
$currentmodif = filemtime($filename);
while($currentmodif <= $lastmodif){ // verificar si el archivo de datos ha sido modificado
usleep(10000); // hacemos descansar al CPU por 10ms
//clearstatcache -> limpia la cache de estado de un archivo
clearstatcache();
$currentmodif = filemtime($filename);
}
// devolvemos array en formato json
$response = array();
//file_get_contents -> lee un archivo entero en una cadena
$response['msg'] = file_get_contents($filename);
$response['timestamp'] = $currentmodif;
echo json_encode($response);
//flush -> vaciar el búfer de salida
flush();
?>
El archivo index.html
Este documento HTML cargará la librería Prototype dentro de las etiquetas <head>, luego en el cuerpo del documento (<body>) creamos un contenedor: <div id="content"></div>, donde se mostrarán los mensajes procedentes de datos.txt. Finalmente, se creará mediante JavaScript un objeto Comet que llamará al script peticion.php para ver los nuevos mensajes del chat.
El objeto comet enviará respuesta AJAX cada vez que un nuevo mensaje se ha recibido y cada vez que un nuevo mensaje se ha enviado. La conexión persistente es usado solo para ver los nuevos mensajes. Usamos un parámetro url (timestamp) para identificar el último mensaje, así el servidor devolverá el contenido de datos.txt solo cuando la fecha/hora de modificación sea mas reciente que la fecha/hora del cliente.
<!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="Enviar" />
</form>
</p>
<script type="text/javascript">
var Comet = Class.create();
Comet.prototype = {
timestamp: 0,
url: './peticion.php',
noerror: true,
initialize: function(){ },
connect: function(){
this.ajax = new Ajax.Request(this.url, {
method: 'get',
parameters: { 'timestamp' : this.timestamp },
onSuccess: function(transport) {
// manejamos la respuesta del servidor
var response = transport.responseText.evalJSON();
this.comet.timestamp = response['timestamp'];
this.comet.handleResponse(response);
this.comet.noerror = true;
},
onComplete: function(transport) {
// enviamos nueva petición ajax cuando esta haya finalizado
if (!this.comet.noerror)
// si conexión tuvo problemas, intentar reconectar cada 5 segundos
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>
Anteriormente hicimos un ejemplo de Chat con AJAX + PHP. Donde cada cierto tiempo el cliente pide al servidor información de nuevos mensajes. En esta oportunidad no es así, por que se mantiene una conexión persistente con el servidor de acuerdo a una condición. Eso si cuando se trata de conexiones persistente hay que darle descanso al servidor. Ahora si nosotros cambiamos el archivo datos.txt por una tabla en MySQL(… ó cualquier otro manejador de BD). Entonces debemos avergiuar sobre como mantener conexiones persistentes en base de datos. Que en realidad se puede, pero no es una configuración por defecto en los Hostings. Quizás de manera local podamos hacer pruebas y así tener una idea de como estás técnicas – que comunmente vemos implementadas en servicios como Meebo, Google Talk (web) y más – funcionan.
Estos dos ejemplos mostrados fueron tomados de Zeitoun.net, los cuales modificamos y testeamos para poder darlo a conocer en nuestra querida lengua.
Fuente original: How to implement COMET with PHP
Barbaro!! una simpleza admirable.
Gracias
No es comet, hace peticiones cada cierto tiempo y no guarda los mensajes en el archivo
Lo poco que he leído creo que SÍ es comet. Que yo lea ahí NO hace peticiones cliente-servidor (que es lo que consume mucho ancho de banda) sino que el mismo servidor se hace peticiones así mismo (por decirlo de alguna amnera). Ser carga el servidor, pero muchísimo menos costoso que las peticiones desde el cliente. Además para eso se deja descansar 10 segundos cada tanda.
Un muy buen ejemplo, se agradece.
Un saludo