Дифференциальные обновления AJAX для таблицы HTML? - PullRequest
Новая
       22

Дифференциальные обновления AJAX для таблицы HTML?

2 голосов
/ 02 марта 2009

У меня есть игра, основанная на HTML-таблице 25x20 (игровая доска). Каждые 3 секунды пользователь может «переместиться», что отправляет AJAX-запрос на сервер, после чего сервер перерисовывает всю HTML-таблицу и отправляет ее пользователю.

Это было легко написать, но это тратило много пропускной способности. Существуют ли какие-либо библиотеки, клиентские (предпочтительно jquery) или серверные, которые помогают отправлять разности вместо полных обновлений для больших таблиц? Обычно при данной перезагрузке изменяется только 5-10 плиток, поэтому я чувствую, что могу сократить использование полосы пропускания на порядок, отправляя только эти плитки вместо всех 500 каждые 3 секунды.

Я также открыт для комментариев типа «ты идиот, почему ты используешь таблицы HTML», если ты можешь предложить лучшую альтернативу. Например, есть ли какие-либо методы манипулирования CSS / DOM, которые я должен рассмотреть вместо использования таблицы HTML? Должен ли я использовать таблицу, но дать каждому td координаты для идентификатора (например, "12x08"), а затем использовать jquery для замены ячеек на id?

Уточнение: плитки - это текст, а не изображения.

Ответы [ 3 ]

2 голосов
/ 02 марта 2009

Если вам известно состояние между обновлениями на стороне сервера (см. Комментарий к вопросу), вы отправляете данные, используя JSON, примерно так (не уверены в точном синтаксисе): 

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

Упакуйте это (удалите лишние пробелы и т. Д.), Скопируйте его и отправьте в свой Javascript. Удивительно, но код Javascript для чтения не так сложен (просто манипуляции с DOM).

2 голосов
/ 02 марта 2009

Вы можете смоделировать игровое поле в виде многомерного массива JavaScript: 

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

каждая запись представляет собой массив, представляющий строку. Каждая ячейка содержит числовое значение игрового фигуры / квадрата.

Эта модель может быть "контрактом", который вы отправляете на сервер через ajax как JSON. Сервер вычисляет тот же массив и отправляет его обратно в пользовательский интерфейс. Вы можете отобразить этот массив в таблицу, div или что угодно. Prototype.js и jQuery упрощают создание dhtml.

Этот формат массива будет намного меньше, чем весь HTML-ответ с разметкой. Это также дает вам свободу рендеринга доски любым удобным вам способом.

Вы можете дополнительно сжать этот формат и просто отправить дельты. Например: сохранить координаты плиток, измененных пользователем, и отправить их на сервер: 

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

Или вы можете сделать это наоборот: отправить полный массив модели на сервер и заставить сервер вычислять дельты.

Проверьте Sponty и наблюдайте за трафиком Ajax каждые несколько минут, мы делаем нечто очень похожее: Клиент отправляет полную модель на сервер, а сервер отправляет различия.

1 голос
/ 02 марта 2009

Не думая о дельтах:

Вы можете использовать JSON довольно легко, чтобы делать подобные вещи. Вы также можете развернуть свой собственный сжатый формат.

Я думаю, что сжатие данных с помощью gzip очень поможет. В настоящее время большинство браузеров поддерживают его, и это значительно уменьшит размер ваших ответов.

...