Tutorial FLASH - Tutorial para crear un sencillo chat en Flash.

Versión Flash: 8 y superiores   |   Compatible con ActionScript 2.0   |   Nivel: Avanzado   |   Hits: 159177

En este tutorial os vamos a enseñar a realizar un sencillo chat en Flash con la ayuda de las variables de sesión y de aplicación del servidor web.

Algunos os preguntaréis que son estas variables. Para meteros en situación os diremos que las variables de sesión son contenedores de información que son accesibles exclusivamente para cada usuario. Las variables de aplicación, en cambio, contienen datos que son compartidos para todos los usuarios. Ambos tipos de variables residen en todos los tipos de servidores web, aunque en este tutorial vamos a emplear tecnología ASP para acceder a las variables. Si tenéis conocimientos de PHP, estamos seguros de que adaptar los ASP no os supondrá ningún quebradero de cabeza.

El sistema para crear la funcionalidad del chat es el siguiente.

Cada sala de chat creada se va archivar en una variable de aplicación con esta nomenclatura sala_nombreSala. Es decir, si creo una sala llamada cielo, la charla de esta sala se almacenará en una variable de aplicación llamada sala_cielo.

Cuando accedemos con un usuario, el nombre se almacena en una variable de sesión llamara usuario. Después, cuando accedemos a una sala creamos una variable de aplicación de la forma nombreSala@nombreUsuario. Por tanto, si accedemos con el usuario Pako a la sala cielo, estamos creando una variable de aplicación llamada cielo@pako. Además se asignará el nombre de la sala a una variable de sesión llamada sala.

Con estas asignaciones nos garantizamos tener almacenada toda la información necesaria para gestionar el chat.

COMO HACERLO.
El chat se compone de la película swf con su html, de 8 archivos asp y de un archivo global.asa.

Vamos a efectuar el recorrido tipo de un usuario cuando entra al chat y según avance vamos explican el código que se ejecuta, ya sea en la película o en el servidor.

Según accedemos al dominio donde se aloja el chat se ejecuta en el servidor el contenido del archivo global.asa. Este archivo, que se debe colocar siempre en la raiz del servidor web, existe con este propósito, ejecutar rutinas cuando un usuario crea una sesión.

'archivo global.asa
<script language=vbscript runat=server>
SUB Session_OnStart
Session("usuario")="guest"
END SUB

SUB Session_OnEnd
' elimino todo el rastro del usuario
if Session("usuario")<>"guest" then
for each variable in Application.Contents
if instr(variable, "@"&Session("usuario")) then
Application.Lock
Application.Contents.Remove(variable)
Application.Unlock
end if
next
end if
END SUB
</script>

Si nos fijamos en el código, vemos que se ejecutan dos rutinas, asignar el valor guest a la variable de sesión usuario cada vez se inicie una sesión y eliminar toda la información del usuario cuando finalice su sesión.

Después de esto se carga la película swf y se detiene en el primer fotograma, donde espera a que introduzcamos el nombre de usuario.

El código AS de este primer frame es:

// 1er fotograma peli
System.useCodepage = true;
XML.prototype.ignoreWhite = true;
stop();
var usuario_lv:LoadVars = new LoadVars();
var usuarioR_lv:LoadVars = new LoadVars();
usuarioR_lv.onLoad = function() {
if (this.error == 0) {
_root.gotoAndStop(2);
} else {
usuario_chat.text = "algo pasa";
//trace("Nombre de usuario en uso. Pruebe con otro nombre.");
}
};
function enviarUsuario() {
if (usuario_chat.text.length<3) {
trace("usuario_chat.text debe como mínimo 3 caracteres");
} else {
_root.user = usuario_chat.text;
usuario_lv.usuario = usuario_chat.text;
usuario_lv.sendAndLoad("asp/creaUsuario.asp", usuarioR_lv, "POST");
}
}
boton_enviar.addEventListener("click", enviarUsuario);
var myListener:Object = new Object();
myListener.onKeyDown = function() {
if (Key.isDown(Key.ENTER)) {
enviarUsuario();
}
};
Key.addListener(myListener);

En este código enviamos el nombre de usuario al archivo asp/crearUsuario.asp, si todo sale bien después de ejecutar en el servidor este fichero asp, pasamos al segundo frame de la peli.

// 2do frame peli
stop();
var sala_lv:LoadVars = new LoadVars();
var salaR_lv:LoadVars = new LoadVars();
salaR_lv.onLoad = function() {
if (this.error == 0) {
gotoAndStop(3);
} else {
salasXML.load("asp/verSalas.asp");
trace("Nombre de sala en uso. Pruebe con otro nombre.");
}
};
var salasXML:XML = new XML();
salasXML.onLoad = cargarSalas;
function cargarSalas() {
lista_salas.removeAll();
var salas_array = this.firstChild.childNodes;
for (var k:Number = 0; salas_array[k]; k++) {
lista_salas.addItem(salas_array[k].attributes.nombre);
}
}
function crearSala() {
salaElegida = sala_lv.nombre_sala=nueva_sala.text;
sala_lv.sendAndLoad("asp/crearSala.asp", salaR_lv, "POST");
}
function entrarSala() {
salaElegida = sala_lv.nombre_sala=lista_salas.selectedItem.label;
sala_lv.sendAndLoad("asp/entrarSala.asp", salaR_lv, "POST");
}
boton_crear.addEventListener("click", crearSala);
boton_entrar.addEventListener("click", entrarSala);
salasXML.load("asp/verSalas.asp");
myListener.onKeyDown = function() {
if (Key.isDown(Key.ENTER)) {
crearSala();
}
}

En este punto hemos cargado la lista de salas disponibles con asp/verSalas.asp y podemos entrar en una con asp/entrarSala.asp o podemos crear una nueva con asp/crearSala.asp. Las dos acciones nos llevan al tercer y último fotograma de la peli.

// 3er frame peli
stop();
var salaXML:XML = new XML();
var charla_lv:LoadVars = new LoadVars();
var salir_lv:LoadVars = new LoadVars();
salir_lv.onLoad = function() {
clearInterval(intervaloSala);
gotoAndStop(2);
};
salaXML.onLoad = cargarsala;
function cargarsala() {
var sala_array = this.firstChild.childNodes;
var usuarios = sala_array[0].childNodes;
lista_sala.removeAll();
for (var k:Number = 0; usuarios[k]; k++) {
lista_sala.addItem(usuarios[k].attributes.nombre);
}
main_txt.text = sala_array[1].firstChild;
main_txt.vPosition = main_txt.maxVPosition;
}
function cargar() {
salaXML.load("asp/verSala.asp?sala="+salaElegida);
}
function charlar() {
charla_lv.speech = newline+_root.user+": "+entrada.text;
charla_lv.sendAndLoad("asp/charlar.asp", charla_lv, "POST");
entrada.text = "";
}
function abandonarSala() {
charla_lv.sendAndLoad("asp/abandonarSala.asp", salir_lv, "POST");
}
boton_charlar.addEventListener("click", charlar);
var intervaloSala = setInterval(cargar, 1000);
abandonar_btn.onRelease = abandonarSala;
myListener.onKeyDown = function() {
if (Key.isDown(Key.ENTER)) {
charlar();
}
};

En este último fotograma se muestra el interior de la sala, se ejecuta la recarga de datos de la charla cada 1 segundo mediante un setInterval y se crea la función charlar que es la que envía nuestro texto al chat.

Podéis descargaros todos los archivos necesarios en el zip, y recuerda que para que funcione el archivo global.asa debe ir en la raiz del servidor web. chat.zip