Differentielle AJAX-Updates für die HTML-Tabelle?

Ich habe ein Spiel, das auf einer 25x20 HTML-Tabelle (dem Spielbrett) basiert. Alle 3 Sekunden kann der Benutzer "verschieben", wodurch eine AJAX-Anfrage an den Server gesendet wird. Zu diesem Zeitpunkt gibt der Server die gesamte HTML-Tabelle erneut aus und sendet sie an den Benutzer.Differentielle AJAX-Updates für die HTML-Tabelle?

Das war einfach zu schreiben, aber es verschwendet viel Bandbreite. Gibt es Bibliotheken, Client (vorzugsweise jquery) oder serverseitig, die helfen, differentielle anstelle von vollständigen Updates für große Tabellen zu senden? Normalerweise ändern sich nur 5-10 Kacheln bei einem bestimmten Reload, so dass ich glaube, dass ich die Bandbreitennutzung um eine Größenordnung reduzieren kann, indem ich nur alle 3 Sekunden nur diese Kacheln anstatt alle 500 sende.

Ich bin auch offen für "Sie Idiot, warum verwenden Sie HTML-Tabellen" -Typ Kommentare, wenn Sie eine bessere Alternative vorschlagen können. Gibt es zum Beispiel irgendwelche CSS/DOM-Manipulationstechniken, die ich in Erwägung ziehen sollte, anstatt eine HTML-Tabelle zu verwenden? Sollte ich eine Tabelle verwenden, aber jede td-Koordinaten für eine ID geben (wie "12x08") und dann jquery verwenden, um Zellen durch ID zu ersetzen?

Eine Klarstellung: die Fliesen sind Text, keine Bilder.

Quelle

2009-03-02 gravitation

Wie viel Bandbreite belegt jede Kachel? Laden Sie jedes Mal ein neues Bild? Oder ähnliche Bilder (in diesem Fall sollten Sie sicherstellen, dass das Caching aktiviert ist)? – strager

Einige Bytes, komprimiert. Jede Kachel ist " 1234" plus etwas Overhead für trs usw. – gravitation

Ist der Zustand des Spiels zwischen den Aktualisierungen des Servers bekannt? Mit anderen Worten, hat der Server Zugriff sowohl auf die Vorher-Map (was der Benutzer jetzt sieht) als auch auf die After-Map (Was wird gesendet)? – strager

Sie können Ihr Spielbrett als ein mehrdimensionales JavaScript-Array Modell:

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

jeder Eintrag ist ein Array mit einer Zeile darstellt. Jede Zelle enthält den numerischen Wert des Spielteils/Quadrats.

Dieses Modell kann der "Vertrag" sein, den Sie über AJAX als JSON an den Server senden. Der Server berechnet dasselbe Array und sendet es zurück an die Benutzeroberfläche. Sie können dieses Array in eine Tabelle, divs oder was auch immer Sie möchten rendern. Prototype.js und jQuery machen das Erstellen von HTML super einfach.

Dieses Array-Format ist viel kleiner als eine ganze HTML-Antwort mit Markup. Es gibt Ihnen auch die Freiheit, das Board so zu gestalten, wie Sie es möchten.

Sie können dieses Format weiter komprimieren und nur die Deltas senden. Zum Beispiel: Speichern Sie die Koordinaten von Fliesen vom Benutzer geändert und diejenigen an den Server senden:

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

Oder man kann es in die andere Richtung tun um: die vollständige Modellanordnung an den Server senden, und haben den Server berechnen die Deltas.

Auschecken Sponty, und beobachten Sie den Ajax-Verkehr alle paar Minuten oder so, wir tun etwas sehr ähnliches: http://www.thesponty.com/ Der Client sendet das vollständige Modell an den Server, und der Server sendet die Diffs.

Quelle

2009-03-02 19:47:12 mahmoud

Ich mag diese Idee, obwohl ich zugeben werde, dass ich nicht herausfinden kann, warum es besser wäre, wenn der Client das ganze Modell sendet und der Server die Diffs sendet, als nur für den Server, um das ganze Modell zu senden. – gravitation

Wir lassen den Server nur die Diffs senden, so dass wir nur Teile der Benutzeroberfläche neu zeichnen können. Dies reduziert Neuanordnungen und macht das Update viel schneller. – mahmoud

Unwillkürlich von Delta:

können Sie JSON verwenden ganz einfach diese Art der Sache zu tun. Sie können auch Ihr eigenes komprimiertes Format bereitstellen.

Ich denke, das Komprimieren der Daten mit gzip würde viel helfen. Die meisten Browser unterstützen es heutzutage und es wird die Größe Ihrer Antworten stark reduzieren. so verwenden, wie (nicht sicher über die genaue Syntax)

Quelle

2009-03-02 13:38:00 strager

GAE gzips alles automatisch, wenn der Browser es unterstützt. – gravitation

Wenn Sie den Status zwischen Auffrischungen auf der Server-Seite bekannt (siehe Frage Kommentar), können Sie eine JSON die Daten senden:

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

Compact dass (entfernen zusätzliche Leerzeichen, etc.), gzip, und senden Sie es an Ihr Javascript. Überraschenderweise ist der Javascript-Code zum Lesen nicht so kompliziert (einfach DOM-Manipulationen).

Quelle

2009-03-02 13:42:54 strager

Differentielle AJAX-Updates für die HTML-Tabelle?

Antwort

Verwandte Themen