Comunidad de diseño web y desarrollo en internet

Como crear un chat en Flash

De las muchas preguntas que se repiten una y otra vez en los foros, crear un chat es una muy popular.
Los problemas vienen, sobre todo, en los requerimientos para crear uno.
Normalmente, un chat en Flash requiere tener el Flash Communication Server, un servidor multiusuario creado por Macromedia para este fin.
El problema, claro, es que es bastante caro y requiere tener un servidor propio o dedicado; lo cual muy pocas personas, aun teniendo un hosting pago, poseen.

La otra opción es usar un servidor de XML Sockets, hay muchos gratuitos e incluso libres; pero aun estos requieren un servidor propio o dedicado, cuyo precio y condiciones los aleja de la gente común.

Algunos desarrolladores profesionales hacen llamadas continuas a un script el lado del servidor tratando de crear el efecto de “multiusuario en tiempo real”; pero estos scripts carecen de estabilidad y a la larga son muy inestables.

Por esta razón, en Cristalab creamos el ClabServer; un set de librerías en PHP muy fáciles de usar, que solo tienes que subir a un servidor que soporte PHP y MySQL para empezar a trabajar.
Así, sin más preámbulos empecemos a crear un chat en Flash

Instalación del ClabServer

Lo primero, claro, es instalar el ClabServer, es un proceso muy sencillo que esta ilustrado en el siguiente tutorial:
Instalación de ClabServer

En ese tutorial nos piden que abramos un FLA que precisamente es un chat... así que bien podrías quedarte con ese si no te interesa aprender. Pero si quieres ser tu mismo quien cree el chat, continua leyendo :D

Creando la interfaz

Una vez han cambiado la dirección del gateway del archivo Control.as, tal como decía el tutorial del ClabServer y han comprobado que funciona, continuaremos la creación de nuestro propio chat.

Nota: Si no sabes de que estoy hablando es porque te saltaste la instalación del ClabServer; ve otra vez a leer el tutorial de instalación. :)

Abrimos Flash, y creamos una nueva película, en mi caso la pondré a 300x300 píxeles.

Necesitaremos dos frames; uno será para el sistema de entrada del chat (Donde el usuario colocara su nombre de usuario y contraseña) y en el segundo estará el campo de texto donde veremos la conversación y donde el usuario enviara sus mensajes.

En el primer frame, colocaremos un campo de texto de tipo “Input Text” (O “Texto de Entrada” si usas esa horrible versión en español de Flash), otro campo de tipo “Dynamic Text”, llamado aviso_txt, donde pondremos avisos especiales del servidor, además de un botón que dará la entrada.
Llamaremos nick_txt al campo de texto y entrar_btn al botón; de modo que nos quedara de la siguiente manera:

Creamos otro keyFrame, en el frame 2, en este, colocaremos un campo de texto mas grande de tipo “Dynamic Text”, lo llamaremos chat_txt, en el aparecerá la conversación.

Deben recordar que este campo debe ser multilinea, tal como aparece en esta grafica:

Tambien añadiremos un campo de tipo “Input Text” que llamaremos mensaje_txt, donde el usuario pondrá el mensaje a enviar y un botón para enviar el mensaje, llamado enviar_btn.
De este modo, nuestra interfaz nos queda así:

Con la interfaz lista, podemos empezar a colocar el código.

El código del chat en flash

Crearemos una nueva capa en nuestra línea de tiempo; una de ellas es en la que hemos estado colocando los elementos de la interfaz y la otra será la que usaremos para colocar el código de Actionscript.

En el primer keyframe de la capa de Actionscript colocaremos el siguiente código.
Teniendo en cuenta que leíste el tutorial de instalación del ClabServer y que probaste que funcionara correctamente, así como teniendo en cuenta que la carpeta “ClabServer” con las clases en .as del servidor están en la misma carpeta del .FLA.
Lee con atención los comentarios del código para entender como funciona (O dale ctrl.+c y ctrl.+v si no te interesa aprender, pero si es así y te falla, lee antes de pasar por el foro)

//Traemos la clase "Usuario" de la carpeta "ClabServer"
//Ten en cuenta que no es necesario poner la extensión .as
//Pero SI debes colocar las mayusculas y minusculas como se debe

import ClabServer.Usuario;
//Debemos frenar la linea de tiempo para que no salte automaticamente
stop();
/* INICIALIZACIÓN DE VARIABLES */
/*Creamos una instancia de la clase "Usuario", la que maneja el login
al chat*/

var user:Usuario = new Usuario();
/* EVENTOS DEL MOUSE */
//Este evento se ejecutara al darle click al boton entrar

entrar_btn.onRelease = function() {
/* Usamos el metodo "login" de la clase "Usuario", que nos pide 3
parametros; el primero es el nick del usuario, el segundo es,
la contraseña en caso de ser un usuario registrado (No es nuestro
caso) y el tercero es una variable que en "verdadero" significa que
sera un usuario anonimo, que en este caso, lo es */

user.login(nick_txt.text, "", true);
//Ponemos en "aviso_txt" el anuncio de carga mientras recibimos respuesta
aviso_txt.text = "Cargando . . . ";
};
/* EVENTOS DEL CLABSERVER */
//La clase "Usuario" tiene un evento llamado "onLogin", que devuelve una
//variable numerica llamada "respuesta"; esta cambiara de acuerdo a lo
//ocurrido en el login de un usuario determinado

user.onLogin = function(respuesta) {
//La instrucción "switch" nos permitira elegir entre varias opciones
//de repuesta

switch (respuesta) {
//Si el nombre de usuario ya esta en uso dentro del chat
case Usuario.EN_USO :
//Colocamos el aviso
aviso_txt.text = "El nick esta en uso";
//Limpiamos la caja de texto del nick
nick_txt.text = "";
//Salimos del switch
break;
//Si el nombre de usuario esta registrado en la DB del servidor
case Usuario.REGISTRADO :
aviso_txt.text = "El nick esta registrado";
nick_txt.text = "";
break;
//Si no hay ningun problema
case Usuario.OK :
//Continuamos al siguiente keyFrame
//Donde iniciara el proceso del chat

gotoAndStop(2);
break;
}
};

Y en el segundo keyframe; donde están los campos para la conversación, se coloca este código:

//Frenamos la linea de tiempo
stop();
//Importamos la clase "Servidor" del "ClabServer"
import ClabServer.Servidor;
/* INICIALIZACIÓN DE VARIABLES */
/*"chat" es la conexión al servidor; una instancia de la clase
"Servidor"; tiene 3 parametros, el primero es el usuario a
entrar, en nuestro caso, es la variable "user", el segundo
parametro sera la "sala de chat" a la que entraremos, que es
un numero de 0 a 64999; en nuestro caso, sera la sala 1 */

var chat = new Servidor(user, 1);
/* EVENTOS DEL BOTON */
// El evento que se ejecutara al dar click al boton "Enviar"

enviar_btn.onRelease = function() {
//Invocamos al metodo "enviar" de la clase "Servidor", cuyo
// parametro es el mensaje a enviar al chat

chat.enviar(mensaje_txt.text);
//limpiamos el campo del mensaje
mensaje_txt.text = "";
};
/* EVENTOS DEL CLABSERVER */
//El evento "onMensaje" se ejecuta cada vez que llega un mensaje
//nuevo al chat; por parametro recibe un objeto que contiene el
//nick y el mensaje del autor.

chat.onMensaje = function(mensaje:Object) {
//añadimos el mensaje junto con el nick al chat
chat_txt.text += "<"+mensaje.Nick+"> "+mensaje.Mensaje+"\n";
};
//El evento "onEntrada" se ejecuta al entrar un nuevo usuario
chat.onEntrada = function(userNuevo:Object) {
//Avisamos en el chat de la entrada del nuevo usuario
chat_txt.text += " * "+userNuevo.Nick+" ha entrado.\n";
};
//El evento "onSalida" se ejecuta al salir un usuario del chat
chat.onSalida = function(userViejo:Object) {
//Avisamos en el chat de la salida del usuario
chat_txt.text += "** "+userViejo.Nick+" ha salido.\n";
};

Ahora solo queda probar el código; dale control+enter para crear el SWF y abre varios SWFs en distintas ventanas, así puedes tener varias conversaciones, si todo funciona, has creado tu primer chat en Flash :)

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate