Mises à jour AJAX différentielles pour table HTML?

Question

J'ai un jeu basé sur un tableau HTML 25x20 (le plateau de jeu). Toutes les 3 secondes, l'utilisateur peut "se déplacer". qui envoie une requête AJAX au serveur, à ce moment, le serveur restitue l’ensemble du tableau HTML et l’envoie à l’utilisateur.

C’était facile à écrire, mais cela gaspillait beaucoup de bande passante. Existe-t-il des bibliothèques, client (de préférence jquery) ou côté serveur, qui permettent d'envoyer des mises à jour différentielles au lieu de mises à jour complètes pour les grandes tables? Habituellement, seulement 5 à 10 tuiles changent lors d’un rechargement donné, j’ai donc l’impression de pouvoir réduire considérablement l’utilisation de la bande passante en n’envoyant que ces tuiles au lieu des 500 toutes les 3 secondes.

Je suis également ouvert à votre idiot, pourquoi utilisez-vous des tableaux HTML -type; commentaires si vous pouvez suggérer une meilleure alternative. Par exemple, y a-t-il des techniques de manipulation CSS / DOM que je devrais envisager plutôt que d'utiliser un tableau HTML? Dois-je utiliser un tableau mais donner à chaque td les coordonnées d'un identifiant (comme "12x08"), puis utiliser jquery pour remplacer les cellules par un identifiant?

Une précision: les carreaux sont du texte, pas des images.

Answer 1

Vous pouvez modéliser votre plateau de jeu comme un tableau javascript multidimensionnel:

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

chaque entrée est un tableau représentant une ligne. Chaque cellule contient la valeur numérique de la pièce / du carré.

Ce modèle peut être le " contrat " vous envoyez au serveur via ajax comme JSON. Le serveur calcule le même tableau et le renvoie à l'interface utilisateur. Vous pouvez rendre ce tableau dans une table, des divs ou ce que vous voulez. Prototype.js et jQuery facilitent la création de dhtml.

Ce format de tableau sera beaucoup plus petit qu'une réponse HTML entière chargée de balises. Cela vous donne également la liberté de rendre le tableau comme bon vous semble.

Vous pouvez compresser davantage ce format et simplement envoyer les deltas. Par exemple: enregistrez les coordonnées des mosaïques modifiées par l'utilisateur et envoyez-les au serveur:

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

Ou vous pouvez le faire à l'inverse: envoyez le tableau de modèles complet au serveur et demandez au serveur de calculer les deltas.

Découvrez Sponty et observez le trafic ajax toutes les quelques minutes à peu près. Nous faisons quelque chose de très similaire: http: //www.thesponty.com/ Le client envoie le modèle complet au serveur et le serveur envoie les diffs.

Answer 2

Si vous connaissez l'état entre les actualisations côté serveur (voir le commentaire sur la question), vous envoyez les données en utilisant JSON comme suit (vous n'êtes pas sûr de la syntaxe exacte):

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

Compressez-le (supprimez les espaces, etc.), gzip-le et envoyez-le sur votre Javascript. Étonnamment, le code Javascript pour lire ceci n’est pas si compliqué (simplement des manipulations DOM).

Answer 3

Sans penser aux deltas:

Vous pouvez utiliser JSON assez facilement pour faire ce genre de chose. Vous pouvez également déployer votre propre format compressé.

Je pense que compresser les données à l’aide de gzip serait très utile. La plupart des navigateurs actuels le supportent, ce qui réduira considérablement la taille de vos réponses.