Aggiornamenti differenziali AJAX per la tabella HTML?

Question

Ho un gioco basato su una tabella HTML 25x20 (la scheda di gioco). Ogni 3 secondi l'utente può " spostare, " che invia una richiesta AJAX al server, a quel punto il server rende nuovamente l'intera tabella HTML e la invia all'utente.

Questo è stato facile da scrivere, ma spreca molta larghezza di banda. Esistono librerie, client (preferibilmente jquery) o lato server, che aiutano a inviare differenziali anziché aggiornamenti completi per tabelle di grandi dimensioni? Di solito solo 5-10 tessere cambiano in un dato ricaricamento, quindi mi sento come se potessi tagliare l'uso della larghezza di banda di un ordine di grandezza inviando solo quelle tessere invece di tutte le 500 ogni 3 secondi.

Sono anche aperto a " idiota, perché stai usando le tabelle HTML " -type commenti se puoi suggerire una migliore alternativa. Ad esempio, ci sono delle tecniche di manipolazione CSS / DOM che dovrei prendere in considerazione invece di usare una tabella HTML? Dovrei usare una tabella ma dare a ciascuna td coordinate per un id (come "12x08") e quindi utilizzare jquery per sostituire le celle con id?

Un chiarimento: le tessere sono testo, non immagini.

Answer 1

Puoi modellare il tuo tabellone di gioco come un array javascript multidimensionale:

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

ogni voce è un array che rappresenta una riga. Ogni cella contiene il valore numerico del pezzo / quadrato di gioco.

Questo modello può essere il "contratto" si invia al server tramite Ajax come JSON. Il server calcola lo stesso array e lo restituisce all'interfaccia utente. È possibile eseguire il rendering di tale array in una tabella, div o qualsiasi cosa ti piace. Prototype.js e jQuery rendono la creazione di dhtml semplicissima.

Questo formato di array sarà molto più piccolo di un'intera risposta HTML carica di markup. Ti dà anche la libertà di rendere il tabellone nel modo che preferisci.

Puoi comprimere ulteriormente questo formato e inviare i delta. Ad esempio: salva le coordinate delle tessere modificate dall'utente e inviale al server:

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

Oppure puoi farlo al contrario: invia l'array di modelli completo al server e chiedi al server di calcolare i delta.

Dai un'occhiata a Sponty e osserva il traffico ajax ogni pochi minuti circa, facciamo qualcosa di molto simile: http: //www.thesponty.com/ Il client invia il modello completo al server e il server invia le differenze.

Answer 2

Se conosci lo stato tra gli aggiornamenti sul lato server (vedi commento sulla domanda), invii i dati usando JSON in questo modo (non sei sicuro della sintassi esatta):

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

Compattalo (rimuovi gli spazi extra, ecc.), decomprimilo e invialo al tuo Javascript. Sorprendentemente, il codice Javascript per leggere questo non è così complicato (semplicemente manipolazioni DOM).

Answer 3

Senza pensare ai delta:

Puoi usare JSON abbastanza facilmente per fare questo genere di cose. Puoi anche implementare il tuo formato compresso.

Penso che comprimere i dati usando gzip sarebbe di grande aiuto. Oggi la maggior parte dei browser lo supporta e ridurrà notevolmente la dimensione delle tue risposte.