AJAX y JS: Mini chat (fase 1)
-
Upload
moises-perez-delgado -
Category
Education
-
view
898 -
download
1
Transcript of AJAX y JS: Mini chat (fase 1)
- 1. Crono: mini-chat
2. 2/22Visin global En esta nueva versin de cRono vamos a aadirle un mini-chat Haremos uso intensivo de Javascript, CSS y AJAX 3. 3/22Algunos requisitos del mini-chat Al hacer doble click sobre un jugador conectado se me abre una ventanade 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 estoychateando Solo se permite un mximo de 3 mini-chats simultneos El servidor har de almacn de conversaciones Comunicaremos los clientes con el servidor va AJAX Cada jugador consultar de forma peridica si hay un mensaje para lva AJAX Una vez ha descargado un mensaje, se marcar en el servidor comoledo, de modo que NO se vuelva a enviar al jugador 4. Fase 1: los 6 pasos 5. 5/22PASO 1: Devolver lista de jugadores conectadosseparados por ; El servidor debe olvidarse de la capa de presentacin, as quedevolver simplemente la lista de jugadores como una cadena detexto en la que separamos por ; los login Modifica los mtodos Jugador.toString y JugadoresList.toString Asegrate que este paso funciona 6. 6/22PASO 2 cliente: panel de conectados, una capa porcada jugador Desde el cliente, cuando recibes en AJAX la lista de jugadoresconectados, vulcala a un array Para ello utiliza el mtodo split Crea una rutina crearUnaCapaPorJugador(vectorJugadores)que cree dinmicamente cdigo HTML en el panel de jugadoresconectados Esta rutina devuelve el cdigo HTML que se inserta en el inner delpanel de conectados Prueba este paso antes de seguir 7. 7/22PASO 3: Evento doble click sobre jugador Captura el evento doble click sobre un jugador conectado Hazlo sobre la capa del jugador Asegrate de que este paso funciona simplemente mostrando unalert 8. 8/22PASO 4: registrar nmero 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 llmala agregarVentanaChat(who) who representa el alias login del jugador contra el que he abierto el mini-chat Todos el cdigo asociado al mini-chat aljalo 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 nmero de chats abiertos Crea una variable global nchats para llevar esta cuenta Actualiza esta cuenta en tu funcin que captura el doble-click sobre un jugador Muestra el valor de nchats en la capa de chats. 9. 9/22PASO 5: controla la apertura de chats Evita que el jugador pueda abrir un mini-chat consigo mismo Evita que el jugador pueda abrir ms de 3 mini-chats Evita que el jugador pueda abrir un chat con un jugador con el queya est hablando Para ello, crea un array chats_with que contenga una entrada conel login ( alias) del jugador con el que inicia un chat Antes de abrir un chat, comprueba que ese jugador NO est ya enla lista de chats_with 10. 10/22PASO 6: Ventana de chat bsica tituloChat