Sencillo Chat con AJAX y PHP (Primera Parte)

15/05/2006 -

En esta serie de tutoriales se muestra como crear un 'Shoutbox' o sencillo chat con PHP y Ajax. El funcionamiento será similar al anteriormente realizado con PHP y Flash (2) pero esta vez utilizando AJAX para añadir interactividad. El resultado será un sencillo chat que puede servir de punto de partida para la consecución de un chat algo más profesional, pero sobre todo, servirá para ver un ejemplo práctico de la funcionalidad que podemos lograr con AJAX.

Ver el resultado final de este tutorial.

Lo primero que debemos hacer es crear una tabla donde almacenar los mensajes de nuestro chat. Utilizaremos tres campos (id, nombre y mensaje).

DROP TABLE IF EXISTS `chat`;
  CREATE TABLE IF NOT EXISTS `chat` (
  `id` int(111) NOT NULL auto_increment,
  `nombre` text NOT NULL,
  `mensaje` longtext NOT NULL,
  PRIMARY KEY (`id`)
  ) TYPE=MyISAM PACK_KEYS=0 AUTO_INCREMENT=0 ;

El siguiente paso es crear los documentos PHP. Para nuestro Chat utilizaremos tres documentos PHP: "ChatAjax.php", donde se mostrará el Chat y albergará las funciones en javascript para hacer peticiones al servidor mediante el objeto XMLHttpRequest, "Actualizar.php" que actualizará periódicamente la carga de datos del chat, y "Grabar.php" que grabará el mensaje que dejemos en el chat.

ChatAjax.php". Lo primero es construir la parte visible del chat:

<?php
  session_start(); 
?>
<html>
<head>
<script language="javascript" type="text/javascript">
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;
  } 
}
}
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); 
} 
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
  ); 
  peticion.open("GET", poststr); 
  peticion.onreadystatechange = function() { 
	if (peticion.readyState == 4) { 
	element.innerHTML = "&nbsp;"
	document.getElementById("mensaje").value ='' 
	cargarmensaje() ; 
} 
} 
peticion.send(null); 
} 
</script>
<style type="text/css">

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

#Cajamensaje {
  padding:4px;
  color:#999;
  font:10px Verdana, Arial, Helvetica, sans-serif;
  border-bottom: 1px #F2F2F2 solid;
}

form {
  color:#333;
  font:10px Verdana, Arial, Helvetica, sans-serif;
}

.boton {
  font:10px Verdana, Arial, Helvetica, sans-serif;
  background:#006699;
  color:#FFFFFF;
  padding:2px;
  text-align:center;
  border:none;
}

.nombre {
  color:#FF9900;
  font-weight:bold;
}

.texto {
  color:#CC0000;
  font:10px Verdana, Arial, Helvetica, sans-serif;
  border:#CCCCCC 1px solid;
  padding:3px;
}

label {
  width:65px;
  float:left;
  display:block;
  padding:3px;
}

#MensajeGrabar {
  color:#CC0000;
  font:10px Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body onLoad="Javascript:setInterval('cargarmensaje()', 14000);">
<div id="Chat">
<?php
$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 ORDER BY id DESC LIMIT 4";
$result=mysql_query($query);
$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();
?>
</div>
<form action="#" name="form1" id="form1">
<p>
<label for="Nombre">Nombre:</label>
<input type="text" name="nombre" class="texto" id="nombre">
</p><p>
<label for="Mensaje">Mensaje:</label>
<input name="mensaje" type="text" class="texto" id="mensaje" size="50">
</p>
<p>
<input type="button" name="button" value="Enviar"  class="boton"  onclick="javascript:GrabarMensaje();">
</p>
</form>

<div id="MensajeGrabar">&nbsp;</div>
</body>