Liberando el código de Tablero dinámico (1)

Son muchas las solicitudes para mostrar el código fuente del Tablero dinámico, el fisgón (si así desean llamarlo) de este blog, por ello aquí explicaré su funcionamiento desde el registro de la hora, ip y enlace del articulo hasta el efecto de alumbrado o fade de color amarillo y la creación de los divs mediante el manejo del DOM con JavaScript.

Lo primero que necesitamos es la tabla en MySQL.

 CREATE TABLE `tablero` (
  `fecha` datetime NOT NULL default '0000-00-00 00:00:00',
  `usuario` varchar(15) NOT NULL default '',
  `mensaje` text NOT NULL
) TYPE=MyISAM;

Empezemos viendo el archivo, que envia y recibe los datos a/de la tabla tablero.

ajax.js

Inicializamos dos variables UltFec que registrará la ultima fecha que se recibio datos del servidor en el tablero, esta variable inicia sin valor, y tiempo indica cada cuantos segundos se refrescará la página osea 3 segundos.

var UltFec;
var tiempo=3000;

La función objetoAjax() es para crear el objeto XMLHttpRequest necesario para trabajar con la metodología Ajax independientemente del navegador.

function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

La función enviarMensaje se encargará de enviar el texto que se ingrese el la caja de texto Mensaje, esto sirve como un pequeño chat no muy elaborado.

function enviarMensaje(){
	men=document.nuevo_empleado.mensaje.value;
	if(men.length<4){
		alert('Minimo 4 letras para tu mensaje');
		return;
	}
	men="Chat: "+men;
	ajax=objetoAjax();
	ajax.open("POST", "registro.php",true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			consultaMensajes();
		}
	}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	ajax.send("mensaje="+men);
	document.nuevo_empleado.mensaje.value="";
	document.nuevo_empleado.mensaje.focus;
}

La función consultaMensajes consultará el últimos ó últimos mensajes o datos en el servidor.

Su funcionamiento consiste en enviar mediante el método GET el valor de la variable UltFec (que definimos anteriormente) al archivo consulta.php (que veremos mas adelante). Cuando se inicia la pagina esa variable no tiene valor, pero cuando ya se consultaron los datos esa variable tendrá el valor de la última fecha consulta en la tabla tablero. Cuando vuelva a consultar se consultará los datos mayores a esa fecha. A medida que se explica el resto del código se enterá mejor.

Ahora, nótese que la respuesta que se obtiene es en formato XML y se almacena en la variable datos (un array) y para obtener sus valores internos usamos una estructura repetitiva (for), obteniendo así valores de la fecha, el usuario (ip) y mensaje (que puede ser un mensaje ó enlace de artículo). A la variable usu le damos formato de enlace que direcciona a una utilidad para saber la ubicación del IP (algo rustico pero funciona).

La variable linea tendrá formato HTML donde indicamos los divs que contendrán a las variables obtenidas de la consulta.

Esa variable la pasamos como parámetro a la función CrearCaja que se encargará, mediante DOM, de crear un div que contendrá a estos 3 divs pequeños. (Esta función la explicaremos mas abajo).

La variable UltFec que declaramos al principio tendrá el valor de fec osea la ultima fecha del array. 

function consultaMensajes(){
	divResultado = document.getElementById('pagina');
	ajax=objetoAjax();
	ajax.open("GET", "consulta.php?ultfec="+UltFec,true);
	ajax.onreadystatechange=function() {
		if (ajax.readyState==4) {
			var datos=ajax.responseXML.documentElement;
			for (i = 0; i < datos.getElementsByTagName('elemento').length; i++){
				var item = datos.getElementsByTagName('elemento')[i];
				var fec = item.getElementsByTagName('fecha')[0].firstChild.data;
				var usu = item.getElementsByTagName('usuario')[0].firstChild.data;
				var men = item.getElementsByTagName('mensaje')[0].firstChild.data;
				usu="<a href='https://www.ribosomatic.com/ejemplos/ipatlas/plot.php?address="+usu+"'>"+usu+"</a>";
				
				var linea='<div class="c_fecha">'+separar(fec)+'</div><div class="c_usuario">'+usu+'</div><div class="c_mensaje">'+men+'</div>';
				CrearCaja(linea);
			} 
			//si ultima fecha esta definida se usará
			//caso contrario se dejara con su valor anterior
			if(typeof fec!='undefined'){
				UltFec=fec;
			}
		}
		
	}
	ajax.send(null)
}

La función pedido consulta los mensajes y mediante el método setTimeout hacemos que se repita según el valor de la variable tiempo, osea 3 seg.

function pedido(){
	consultaMensajes();
	setTimeout('pedido();',tiempo);
}

La función separar, quita la fecha de la variable fec y solo devuelve la hora. La variable fec tiene por defecto formato de fecha mysql.

function separar(cadena){
	//quitasmos fecha
	hora=cadena.substr(11);
	return hora;
}

Cuando se carga la página se inicia la función pedido. En otras palabras inmediatamente se ingresa a la pagina del Tablero dinámico hace la consulta de los valores.

window.onload = function (){
	pedido();
}

Ahora veamos el archivo dom.js, pero necesitaremos las librerías script.aculo.us y prototype  (de la librería script.aculo.us solo necesitaremos el archivo effects.js).

La función Luz es para crear el efecto 'fade' de 5 segundos.

function Luz(f){
	new Effect.Highlight(f,{duration: 5});
}

La función CrearCaja, como mencionamos antes crea un div que contendrá 3 divs pequeños para la hora, usuario y mensaje. ¿Cómo funciona? Mediante comentarios explico su funcionamiento. Pero en esencia es crear un div dentro del div principal pagina con contenido HTML dentro, la función EliminarCaja se encargará de eliminar el último div si estos superan los 20. Así de simple. Mas adelante hablaremos del DOM pero pueder ver un articulo interesante en Maestros del Web.

function CrearCaja(texto){
	//contenedor principal
	var pagina=document.getElementById('pagina');
	
	//creando nuevo div
	var cajaNueva=document.createElement('div');
	//creando texto del div con mensaje de la caja de texto
	//var cajaTexto=document.createTextNode(document.frmMsn.mensaje.value);
	
	//asignandoles atributos
	cajaNueva.setAttribute('className','cuadro_mensaje'); //para IE	
	cajaNueva.setAttribute("class", "cuadro_mensaje");
	cajaNueva.innerHTML=texto;
	
	//insertar antes del primer elemento de pagina
	pagina.insertBefore(cajaNueva,pagina.firstChild);
	Luz(pagina.firstChild);
	
	EliminarCaja();
}
//remueve el ultimo elementos si estos superan los 10
function EliminarCaja(){
	var pagina=document.getElementById('pagina');
	elementos=pagina.childNodes;
	if(elementos.length>20){
		pagina.removeChild(pagina.lastChild);
	}
}

Hemos visto las funciones básicas para enviar y recibir datos, y también para trabajar con el DOM mediante JavaScrip, incluso el efecto Luz fade. En el proximo articulo comentaremos la parte del servidor PHP y MySQL.