[Tutorial] Crear un chat con Flash y PHP - Partes 1 y 2

sdz_ dijo:
Antes de empezar aclaro que son dos tutoriales juntos en un tema.

Crear un chat con Flash y PHP

Parte 1

En este tutorial se explica como crear un 'shoutbox' o chat sencillo con PHP y Flash. Aunque también podría utilizarse ASP como tecnología de servidor ya que con ambos lenguajes, se trata de comunicarse con Flash mediante el comando LoadVars. Para un segundo tutorial dejo algunas cosas como el refresco de los mensajes.

• Lo primero que debemos hacer es crear una tabla donde almacenar los mensajes de nuestro chat. Utilizaremos tres campos (id, nombre y mensaje). La manera de crear la tabla en MySql variará en función de la consola con la que administreis vuestra base de datos. Una forma universal sería introducir la siguiente sentencia:



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 un php, que generará un documento xml que alimentará el contenido del Flash que más adelante crearemos. El fichero lo denominamos "chat.php" y tendrá el siguiente aspecto:



header("Content-type: text/xml");



$servidor = "tuservidor";

$usuario = "usuario";

$password = "password";

$database = "base_de_datos";



$db = mysql_connect($servidor,$usuario,$password) or die ("No se ha podido conectar con el servidor."); mysql_select_db($database,$db) or die ("No se ha podido encontrar la base de datos.");



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

$resultID = mysql_query($query,$db) or die ("No se encuentra");



$xml_output = "1.0"?>n";

$xml_output = "n";



for ($x = 0; $x < mysql_num_rows($resultID); $x++){

$row = mysql_fetch_assoc($resultID);

$xml_output .= "tn";

$xml_output .= "tt" . $row['nombre'] . "n";

$xml_output .= "tt" . $row['mensaje'] . "n";

$xml_output .= "tn";

}

$xml_output.= "";



echo $xml_output;

?>

• Lo que dará como salida un xml con esta estructura:

• Lo siguiente es crear un archivo, "RecMensaje.php", que procese los datos enviados desde Flash:





$servidor = "tuservidor";

$usuario = "usuario";

$password = "password";

$database = "base_de_datos";



mysql_connect($servidor ,$usuario,$password);

mysql_select_db($database);

$submit = $_POST['submit'];

$nombre = $_POST['nombre'];

$mensaje = $_POST['mensaje'];



if($submit){

$result=MYSQL_QUERY("INSERT INTO chat (id,nombre,mensaje)"."VALUES ('NULL','$nombre','$mensaje')"); } else {

}

?>

• Lo siguiente que tenemos que hacer es crear la interfaz en Flash, una caja de texto dinámico multilínea y dos cajas de texto de tipo "introducción de texto" para que el usuario pueda introducir su nombre y mensaje. También debemos crear un botón de enviar y otra caja de texto dinámico que nos servirá para mostrar el status del chat.

• Tan solo falta el actionscript. Creamos una capa nueva y asignamos las acciones.



VarAleatoria= random(1000000);

stop();

//Cargamos el xml mediante una funcion

function loadXML(loaded){

if(loaded){

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 += "" + varNombre[i] + "";

    _root.chat_txt.htmlText += varMensaje[i] + "
";

}

}

}

xmlData = new XML();

xmlData.ignoreWhite = true;

xmlData.onLoad = loadXML; 

//Cargamos el fichero pasando una variable aleatoria

//para evitar el cache

xmlData.load("http://www.webintenta.com/chat/chat.php?q="+VarAleatoria);

//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 = "Mensaje Enviado";

}

}

Crear un chat con Flash y PHP

Parte 2

Saludos a todos, esta es la segunda parte de mi Tutorial para Crear un chat con Flash y PHP - Parte 1. Si no vieron el tutorial anterior; entonces es recomendable que lo lean. Sin más, aquí retomo el tutorial.

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 dice '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.

• 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 += "" + varNombre[i] + "";

            _root.chat_txt.htmlText += varMensaje[i] + "
";

        }

        //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();

   }

}

}

◘ 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:

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'.

Con esto terminamos el tutorial; espero que les haya gustado y que puedan hacer su propio chat, ya sea para un blog o simplemente para probar.