Crear un chat con Flash y PHP (Segunda parte)

0 COMENTARIOS -  Publicado hace 46 meses -  Clasificado en:

Retomamos el tutorial Crear un chat con Flash y PHP (Primera Parte)

La funcionalidad más importante que quedaría por implementar en el chat es la actualización tanto al envio de un mensaje como un refresco automático cada x segundos. Esto se logra, básicamente, encapsulando la carga de datos dentro de una función y llamándola cada x segundos mediante la función de actionscript "setInterval" 

setInterval(functionName, interval [, param1, param2, ..., paramN])

Donde 'functionName' es el nombre de función o referencia a una función anónima, 'interval' el tiempo entre llamada y llamada al parámetro 'functionName', expresado en milisegundos y 'param1', param2, ..., 'paramN', son parámetros opcionales que se pasan al parámetro function o methodName.

Ver el RESULTADO final de esta SEGUNDA PARTE del tutorial.

El código resultante, con el añadido de setInterval, quedaría de la siguiente forma:
(El código está comentado para una mejor comprensión) 

stop();
//Creamos un intervalo de recarga de 20 segundos
var ID:Number = setInterval(refrescaXML, 20000);
xmlData = new XML();
xmlData.ignoreWhite = true;
function refrescaXML() {
	VarAleatoria= random(1000000);
	xmlData.load("http://www.webintenta.com/chat/chat.php?q="+VarAleatoria);
}
xmlData.onLoad = function(success) {
    if (success) {
		trace(VarAleatoria)
		//Limpiamos las cajas de texto
		_root.chat_txt.htmlText = ""
		var myXML = xmlData.firstChild.childNodes;
		//Creacion de variables globales
		//para recoger los nombres
		_global.varNombre=[];
		//y los mensajes
		_global.varMensaje=[];
		//Recorro todo el documento xml
		for(i=0;i < myXML.length;i++){
			//Alimento las variables
			_global.varNombre[i] = this.firstChild.childNodes[i].childNodes[0].firstChild.nodeValue;
			_global.varMensaje[i] = this.firstChild.childNodes[i].childNodes[1].firstChild.nodeValue;
			//Escribo el texto en la caja
			_root.chat_txt.htmlText += "<font color='#336699'><b>" + varNombre[i] + "</b></font>";
			_root.chat_txt.htmlText += varMensaje[i] + "<br>";
		}
		//Limpiamos el mensaje de "Enviando mensaje..."
		_root.status_text.text =""
        }
    };
onLoad = function(){
    myXML.load("http://www.webintenta.com/chat/chat.php?q="+VarAleatoria);
}
//Llamamos a la funcion
//Para la primera carga
refrescaXML();
//Función que asignamos al boton
_root.Enviar_btn.onPress = function(){
	//Controlamos si las cajas de texto han sido rellenadas
	if (nombre_txt.text eq "" or mensaje_txt.text eq ""){ 
	_root.status_text.text = "Error"; 
	}else{
	// Creamos una instancia container
	//del objeto LoadVars
	var container:LoadVars = new LoadVars(); 
	container.nombre = nombre_txt.text;
	container.mensaje = mensaje_txt.text;
	container.submit = true;
	//Enviamos el contenido del objeto
	container.sendAndLoad("http://www.webintenta.com/chat/RecMensaje.php?q="+VarAleatoria,container, "POST");
	_root.status_text.text = "Enviando mensaje....";
	//refrescamos cada vez que enviamos un mensaje
	//Limpiamos la caja del mensaje
	_root.mensaje_txt.text =""
   	//Cuando se hayan enviado las variables
	container.onLoad = function(){
      //Llamamos a la funcion refrescar
	  refrescaXML();
   }
}
}

Descarga el archivo .fla de esta segunda parte del tutorial.

Dos apuntes, que mejorarán la funcionalidad del 'shoutbox'

1.- Para evitar problemas de caché, sobre todo en Internet Explorer, es conveniente que en .php que utilizemos para embeber el Flash, utilizemos una variable aleatoria para su carga: 

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="250" height="310">
  <param name="movie" value="chat2.swf?q=<? echo rand(1,10000); ?>" />
  <param name="quality" value="high" />
  <embed src="chat2.swf?q=<? echo rand(1,10000); ?>" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="250" height="310"></embed>
</object>

2.- Para no demorar mucho la carga del xml porque este sea demasiado grande, podemos limitar el número de registros a mostrar modificando el fichero "chat.php"

donde antes era: 

$query = "SELECT * from chat ORDER BY id DESC";

ahora limitamos a los últimos 30 mensajes: 

$query = "SELECT * from chat ORDER BY id DESC LIMIT 30";

También se puede crear un script para que vaya eliminando los registros más antiguos de la base de datos, pero eso lo dejo para vosotros.

Quedaría una tercera parte con la inclusión de un scroll en la caja de texto del chat y ya tendríamos un sencillo chat o 'shoutbox'.

Algunas entradas relacionadas:

También te puede interesar: