Crear un chat con Flash y PHP (Primera Parte)

0 COMENTARIOS - Publicado hace 46 meses - Clasificado en:

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.

Ver el resultado final de esta primera parte del tutorial.

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:

<?php
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 = "<?xml version =\"1.0\"?>\n";
$xml_output = "<ChatFlash>\n";
for ($x = 0; $x < mysql_num_rows($resultID); $x++){
  $row = mysql_fetch_assoc($resultID);
  $xml_output .= "\t<chat>\n";
  $xml_output .= "\t\t<nombre>" . $row['nombre'] . "</nombre>\n";
  $xml_output .= "\t\t<mensaje>" . $row['mensaje'] . "</mensaje>\n";
  $xml_output .= "\t</chat>\n";
}
  $xml_output.= "</ChatFlash>";
echo $xml_output;
?>

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

<ChatFlash>
	<chat>
		<nombre></nombre>
		<mensaje></mensaje>
	</chat>
</ChatFlash>

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

<?php
$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. Quedaría más o menos como el siguiente gráfico y con los mismos nombres de instancia que se representan en el mismo.

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 += "<font color='#336699'><b>" + varNombre[i] + "</b></font>";
	_root.chat_txt.htmlText += varMensaje[i] + "<br>";
}
}
}
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";
}
}