martes, 4 de diciembre de 2012

Ajax: panel de jugadores conectados

Después de integrar con CSLA-- y con base de datos, es realmente sencillo agregar un nuevo panel en nuestro mini-juego que refleje en todo momento qué jugadores están conectados.

En la siguiente imagen mostramos un captura de pantalla en la que hay tres navegadores abiertos, cada uno con un jugador diferente:



Si cualquiera de los jugadores pulsa el botón Salir, automáticamente se refrescará este panel en el navegador de los otros dos jugadores. En la siguiente imagen, el jugador 3 pulsa salir:



Cómo lo hemos hecho.

  1. Refresco manual. Comienza haciendo el refresco del panel de jugadores de forma manual. Para ello, añade un hipervínculo Actualizar que, al pulsarlo, invoque a la función JS que se encarga de ello.
  2. Función JS refrescarJugadoresConectados(). Crea una función JS que lance una petición al servicio web getJugadoresConectados.php que viene implementado en CSLA--. Esta función, cuando obtiene la respuesta del servidor, debe actualizar el contenido del panel de jugadores conectados.
  3. Prueba el refresco manual. Prueba esta primera versión de tu solución y asegúrate que el refresco manaul va bien. Abre dos navegadores y prueba a abrir/cerrar sesiones en cada uno y comprueba que se refresca correctamente el panel de cada jugador.
  4. Variable timer. Ahora que ya funciona el refresco manual vamos a automatizarlo. Para ello, crea una variable global timerPlayersConnected que se encargará de gestionar el timer que se ejecutará cada X segundos para consultar qué jugadores están conectados en cada momento.
  5. Constante de tiempo. Crea una constante PLAYERS_CONNECTED_REFRESH_TIME en la que almacenes el tiempo que quieres que se refresque el panel de jugadores conectados. De esta manera resultará más fácil modificar el tiempo de refresco.
  6. Inicialización. Crea una función init(), que se ejecute en el evento onload del juego, y que se encargue simplemente de iniciar el timer del refresco de jugadores.
  7. Prueba el refresco automático. De nuevo, abre varios navegadores y conéctate con diferentes jugadores. Abre y cierra sesión desde cada uno de ellos y verifica que se actualiza correctamente el panel de jugadores en cada navegador.
  8. Actualizar el campo LastConnection de la base de datos. Cada vez que un jugador envía al servidor una petición de la lista de jugadores conectados, aprovecha para actualizar su valor en base de datos del campo LastConnection, de tal manera que si pasa más de 5 minutos jugado, no figure como que está desconectado. Para ello, te basta con invocar el método Actualizar_LastConnection() de la clase Jugador.