Sencillo Chat con AJAX y PHP (Segunda Parte)

16/05/2006 -

Esta es la segunda parte, continuación del tutorial Sencillo Chat con AJAX y PHP (Primera Parte)

En la primera parte mostré el código pero sin explicar el funcionamiento. Voy a pasar a explicar las partes fundamentales del mismo recorriendolo desde el inicio hasta el final. Lo primero es iniciar variables de sessión puesto que utilizo una variable de session para saber en todo momento cuál es el último mensaje que se ha cargado en el chat y a partir de ese mensaje comprobar periódicamente si en la base de datos hay mensajes más recientes que no han sido cargados.

<?php
session_start(); 
?>

Lo siguiente son las funciónes javascript, que son las que dotan de "funcionalidad AJAX" al chat o shoutbox. La primera función es la creación de una instancia "petición" del objeto XMLHttpRequest:

var peticion = false;
  try {
peticion = new XMLHttpRequest();
  } catch (trymicrosoft) {
  try {
peticion = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (othermicrosoft) {
  try {
  peticion = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
  peticion = false;
  } 
}
}

Para más información se puede consultar Ajax V: Introducción a XMLHttpRequest.

La siguiente función se encarga de cargar los mensajes. Llama a "Actualizar.php" al que pasa un id aleatorio para evitar posibles problemas de caché y los mensajes nuevos si los hubiera los suma al contenido preexistente del div "Chat" mediante el método innerHTML.

function cargarmensaje() { 
  var element = document.getElementById('Chat'); 
  peticion.open("GET", 'Actualizar.php?id=<? echo rand(1,10000);?>'); 
  peticion.onreadystatechange = function() { 
	if (peticion.readyState == 4) { 
	element.innerHTML = element.innerHTML + peticion.responseText; 
	} 
} 
peticion.send(null); 
}

La función GrabarMensaje lo primero que hace es insertar dentro del div "MensajeGrabar" un mesaje de "Grabando datos" junto a un gif animado. Posteriormente crea una variable "poststr" donde construye la cadena recogiendo los datos que han sido introducidos en los campos de formulario "nombre" y "mensaje",

function GrabarMensaje() {
  var element = document.getElementById('MensajeGrabar'); 
  element.innerHTML = '<p><img src="Imagenes/ajax_loading.gif" /> Grabando datos</p>'; 
  var poststr = "Grabar.php?nombre=" + encodeURI( document.getElementById("nombre").value)
  var poststr = poststr +"&mensaje=" + encodeURI( document.getElementById("mensaje").value
  );

Realiza la petición llamando a "Grabar.php" pasando la cadena construida en "poststr" y cuando se ha completado (llega al estado 4 de opeeacion completada) borramos el contenido del div "MensajeGrabar", borramos el campo de formulario "mensaje" dejando intacto el de "nombre" y llamamos a la función "cargarmensaje" para que se actualice el chat.

  peticion.open("GET", poststr); 
  peticion.onreadystatechange = function() { 
	if (peticion.readyState == 4) { 
	element.innerHTML = "&nbsp;"
	document.getElementById("mensaje").value ='' 
	cargarmensaje() ; 
} 
} 
peticion.send(null); 
}

Respecto al CSS, no tiene nada de particular. Si acasa el estilo asociado al div "Chat" para que éste tenga una barra de desplazamiento en el momento se acumulen más mensajes que la altura del div.

#Chat {
  width:400px;
  height:350px;
  overflow:auto;
  border: 1px #CCCCCC solid;
}

Otra cosa importante es la creación de un intervalo para que periodicamente se llame a la función "cargarmensaje", encargada de actualizar el chat. Yo he puesto un intervalo de 14 segundos, aunque éste se podría rebajar en el caso de querer una mayor frecuencia de refresco en el chat.

<body onLoad="Javascript:setInterval('cargarmensaje()', 14000);">

En cuanto al resto del código no creo que tenga mayor misterio. He tratado de reducir funcionalidad en pos de una mayor legibilidad del código y de sencillez del mismo. Carga los mensajes y se crea una variable $_SESSION['final'] que almacena el ultimo id que ha sido cargado.

Veamos ahora el fichero "Actualizar.php". Que carga los mensajes a partir del útltimo que se ha cargado que viene dado por la variable $_SESSION['final'] y vuelve a actualizar la misma.

<?
session_start();
$UltimoMens = $_SESSION['final'];
$servidor = "miservidor";
$usuario = "nombre_usuario";
$password = "password";
$db = mysql_connect($servidor, $usuario, $password) or die(sql_failure_handler(
mysql_error()));
mysql_select_db($usuario, $db);
$query = "SELECT * from chat WHERE id>$UltimoMens ORDER BY id DESC";
$result = mysql_query($query);
$rows = mysql_fetch_assoc($result);
// SI EXISTEN RESULTADOS
if($rows>0){
  $num = mysql_numrows($result);
  $i=0;
  while ($i < $num) {
  $nombre=mysql_result($result,$i,"nombre");
  $mensaje= mysql_result($result,$i,"mensaje");
  echo "<div id='Cajamensaje'>";
  echo "<span class='nombre'>$nombre &raquo; </span>";
  echo "$mensaje </div>";
  $i++;
}
  $_SESSION['final'] = mysql_result($result,0, "id");
}
  mysql_close();
?>

Por último, el fichero "Grabar.php" lo que hace es insertar en la base de datos los mensajes nuevos:

<?
$servidor = "miservidor";
$usuario = "nombre_usuario";
$password = "password";
$database = "base_de_datos";
mysql_connect($servidor ,$usuario,$password);
  mysql_select_db($database);
  $submit = "OK";
if($submit){
  $result=MYSQL_QUERY("INSERT INTO chat (id,nombre,mensaje) VALUES ('NULL','$nombre','$mensaje')");
  } else {
}
?>

Algunas entradas relacionadas: