AJAX y JS: Mini chat (fase 1)

2/22

Visión global

 En esta nueva versión de cRono vamos a añadirle un mini-chat
 Haremos uso intensivo de Javascript, CSS y AJAX

3/22

Algunos requisitos del mini-chat

 Al hacer doble click sobre un jugador conectado se me abre una ventana
de mini-chat con ese jugador
 NO puedo abrir un mini-chat conmigo mismo
 NO puedo abrir un mini-chat con un jugador con el que ya estoy
chateando
 Solo se permite un máximo de 3 mini-chats simultáneos
 El servidor hará de almacén de conversaciones
 Comunicaremos los clientes con el servidor vía AJAX
 Cada jugador consultará de forma periódica si hay un mensaje para él
vía AJAX
 Una vez ha descargado un mensaje, se marcará en el servidor como
leído, de modo que NO se vuelva a enviar al jugador

5/22

PASO 1: Devolver lista de jugadores conectados
separados por ;

 El servidor debe olvidarse de la capa de presentación, así que
devolverá simplemente la lista de jugadores como una cadena de
texto en la que separamos por ; los login
 Modifica los métodos Jugador.toString y JugadoresList.toString
 Asegúrate que este paso funciona

6/22

PASO 2 – cliente: panel de conectados, una capa por
cada jugador

 Desde el cliente, cuando recibes en AJAX la lista de jugadores
conectados, vuélcala a un array
 Para ello utiliza el método split
 Crea una rutina crearUnaCapaPorJugador(vectorJugadores)
que cree dinámicamente código HTML en el panel de jugadores
conectados
 Esta rutina devuelve el código HTML que se inserta en el inner del
panel de conectados
 Prueba este paso antes de seguir

7/22

PASO 3: Evento doble click sobre jugador

 Captura el evento doble click sobre un jugador conectado
 Hazlo sobre la capa del jugador
 Asegúrate de que este paso funciona simplemente mostrando un
alert

8/22

PASO 4: registrar número de chats establecidos

 Llegados a este punto nuestro cRono ya reacciona a doble click sobre un jugador conectado
 La rutina que maneja el doble click llámala agregarVentanaChat(who)
 who representa el alias ó login del jugador contra el que he abierto el mini-chat
 Todos el código asociado al mini-chat alójalo en un fichero llamado chat.js
 Crea una nueva capa chats que alojará todas las ventanas de mini-chat.
 En este paso, esta capa contendrá simplemente el número de chats abiertos
 Crea una variable global nchats para llevar esta cuenta
 Actualiza esta cuenta en tu función que captura el doble-click sobre un jugador
 Muestra el valor de nchats en la capa de chats.

9/22

PASO 5: controla la apertura de chats

 Evita que el jugador pueda abrir un mini-chat consigo mismo
 Evita que el jugador pueda abrir más de 3 mini-chats
 Evita que el jugador pueda abrir un chat con un jugador con el que
ya está hablando
 Para ello, crea un array chats_with que contenga una entrada con
el login (ó alias) del jugador con el que inicia un chat
 Antes de abrir un chat, comprueba que ese jugador NO esté ya en
la lista de chats_with

10/22

PASO 6: Ventana de chat básica

tituloChat
<span
<span tituloChat...>
<DIV tituloChat...> botoneraChat...>

conversacionChat
ventanaChat

chats
mensajeChat

Posicionamiento CSS en 10 pasos

12/22

Fuente

 Este mini-tutorial es una traducción de BarelyFitz Designs
 En esta URL tienes la fuente original:
Enlace al original

13/22

1. position: static

 Este es el posicionamiento por defecto de cualquier elemento
 Indica que NO se le asigna una posición, sino simplemente se
ubica “donde le toque”
 Normalmente NO se indica explícitamente, salvo para modificar el
posicionamiento de un objeto que previamente hemos establecido

14/22

2. position: relative

 Nos permite establecer top - bottom y left - right
 De esta manera lo desplazamos de la ubicación que le correspondería si
no hubiéramos modificado/variado su posición

 El div-1 se ha desplazado a la izquierda de donde le tocaba
 El siguiente elemento (div-after) se coloca donde le hubiera tocado, de
modo que queda detrás de div-1

15/22

3. position: absolute

 Cuando establecemos position: absolute, el elemento se elimina del
documento y se ubica exactamente donde le indiquemos.
 Vamos a mover div-1a al top de la página:

 Hemos colocado el div-1a en una posición absoluta de la página
 Nos podría interesar en una posición absoluta dentro de otro div, y aquí es
donde usaremos la combinación relative-absolute

16/22

4. position:relative + position:absolute

 Si establecemos position:relative para div-1, cualquier elemento dentro de
él será posicionado de forma relativa a su posición
 Ahora, al div-1a, dentro de div-1, le indicamos position:absolute, lo podemos
colocar en el top de div-1

17/22

5. dos columnas absolute

 Una ventaja del posicionamiento absoluto es que podemos definir los
elementos en cualquier orden en la página y se ubicarán en la posición
deseada...
 ...con independencia de cuál declaremos primero

18/22

6. dos columnas de altura absoluta

 Una posible solución puede ser estacer una altura absoluta para los
elementos
 El problema está en que NO podemos saber a priori qué tamaño de letra
van a contener los elementos ni cuánto texto van a albergar

19/22

7. float

 En caso de que la altura de las columnas sea variable, el posicionado
absoluto NO nos vale
 Podemos hacer flotar un elemento lo máximo posible a la izquierda o a la
derecha, y hacer que el texto se “encaje” alrededor de éste.

20/22

8. Dos columnas flotantes

 Si “flotamos” una columna hacia la izquierda, y la otra también a la
izquierda, se colocará la una a continuación de la otra

21/22

9. columnas flotantes y clear

 Después de elementos flotantes, podemos “limpiar” el float y colocar el
resto del contenido

22/22

10. Cuidado con IE

 Todo lo visto aquí no se ha adaptado al funcionamiento particular de IE...
 ...de modo que un uso literal de este tutorial podría dar problemas en ese
navegador

AJAX y JS: Mini chat (fase 1)

Más contenido relacionado

La actualidad más candente (8)

Destacado (20)

Similar a AJAX y JS: Mini chat (fase 1) (20)

Más de Moisés Pérez Delgado (20)

Último (20)

AJAX y JS: Mini chat (fase 1)