¿Actualizaciones diferenciales de AJAX para la tabla HTML?

Question

Tengo un juego que se basa en una tabla HTML de 25x20 (el tablero de juego). Cada 3 segundos, el usuario puede " mover, " que envía una solicitud AJAX al servidor, momento en el cual el servidor vuelve a presentar la tabla HTML completa y la envía al usuario.

Esto fue fácil de escribir, pero desperdicia mucho ancho de banda. ¿Hay bibliotecas, clientes (preferiblemente jQuery) o del lado del servidor, que ayuden a enviar actualizaciones diferenciales en lugar de actualizaciones completas para tablas grandes? Por lo general, solo cambian de 5 a 10 mosaicos en una recarga determinada, por lo que siento que podría reducir el uso del ancho de banda en un orden de magnitud enviando solo esos mosaicos en lugar de los 500 cada 3 segundos.

También estoy abierto a " usted, idiota, ¿por qué utiliza tablas HTML " -type comentarios si puede sugerir una alternativa mejor? Por ejemplo, ¿hay alguna técnica de manipulación de CSS / DOM que debería considerar en lugar de usar una tabla HTML? ¿Debo usar una tabla pero dar a cada td las coordenadas de un id (como " 12x08 ") y luego usar jquery para reemplazar las celdas por id?

Una aclaración: los mosaicos son texto, no imágenes.

Answer 1

Puedes modelar tu tablero de juego como una matriz de javascript multidimensional:

[[x0, x1, x2, x3 ... xn],
.....
.....]

cada entrada es una matriz que representa una fila. Cada celda contiene el valor numérico de la pieza / cuadrado del juego.

Este modelo puede ser el "contrato" envía al servidor a través de ajax como JSON. El servidor calcula la misma matriz y la envía de vuelta a la interfaz de usuario. Puede representar esa matriz en una tabla, divs o lo que quiera. Prototype.js y jQuery hacen que la creación de dhtml sea súper fácil.

Este formato de matriz será mucho más pequeño que una respuesta HTML completa cargada con marcas. También le da libertad para renderizar el tablero de la forma que desee.

Puede comprimir aún más este formato y simplemente enviar los deltas. Por ejemplo: guarde las coordenadas de los mosaicos cambiados por el usuario y envíelos al servidor:

[(x1, y2),.....(xn, yn)]

O puede hacerlo al revés: envíe la matriz del modelo completo al servidor y haga que el servidor calcule los deltas.

Echa un vistazo a Sponty, y observa el tráfico de ajax cada pocos minutos aproximadamente, hacemos algo muy similar: http: //www.thesponty.com/ El cliente envía el modelo completo al servidor y el servidor envía las diferencias.

Answer 2

Si conocía el estado entre las actualizaciones en el lado del servidor (consulte el comentario sobre la pregunta), puede enviar los datos utilizando JSON, por lo que (no está seguro de la sintaxis exacta):

[
    { x: 3, y: 5, class: "asdf", content: "1234" },
    { x: 6, y: 5, class: "asdf", content: "8156" },
    { x: 2, y: 2, class: "qwer", content: "1337" }
]

Compacto que (elimine los espacios en blanco adicionales, etc.), gzip, y envíelo a su Javascript. Sorprendentemente, el código de Javascript para leer esto no es tan complicado (simplemente manipulaciones DOM).

Answer 3

Sin pensar en deltas:

Puedes usar JSON con bastante facilidad para hacer este tipo de cosas. También puedes desplegar tu propio formato comprimido.

Creo que comprimir los datos usando gzip ayudaría mucho. Hoy en día, la mayoría de los navegadores lo admiten y reducirá en gran medida el tamaño de sus respuestas.