Дифференциальные обновления AJAX для HTML-таблицы?
Вопрос
У меня есть игра, основанная на HTML-таблице размером 25x20 (игровое поле).Каждые 3 секунды пользователь может "перемещаться", что отправляет AJAX-запрос на сервер, после чего сервер повторно обрабатывает всю HTML-таблицу и отправляет ее пользователю.
Это было легко написать, но это отнимает много пропускной способности.Существуют ли какие-либо библиотеки, клиентские (предпочтительно jquery) или серверные, которые помогают отправлять дифференциальные обновления вместо полных для больших таблиц?Обычно при данной перезагрузке меняется только 5-10 плиток, поэтому я чувствую, что мог бы сократить использование полосы пропускания на порядок, отправляя только эти плитки вместо всех 500 каждые 3 секунды.
Я также открыт для комментариев типа "ты идиот, зачем ты используешь HTML-таблицы", если можешь предложить лучшую альтернативу.Например, существуют ли какие-либо методы манипулирования CSS / DOM, которые я должен рассмотреть вместо использования HTML-таблицы?Должен ли я использовать таблицу, но указать каждому td координаты для идентификатора (например, "12x08"), а затем использовать jquery для замены ячеек на id?
Разъяснение:плитки представляют собой текст, а не изображения.
Решение
Вы можете смоделировать свое игровое поле как многомерный массив javascript:
[[x0, x1, x2, x3 ... xn],
.....
.....]
каждая запись представляет собой массив, представляющий строку.Каждая ячейка содержит числовое значение игровой фигуры /квадрата.
Этой моделью может быть "контракт", который вы отправляете на сервер через ajax в виде JSON.Сервер вычисляет тот же массив и отправляет его обратно в пользовательский интерфейс.Вы можете преобразовать этот массив в таблицу, divs или во что угодно другое, что вам нравится.Prototype.js а jQuery делает создание dhtml очень простым.
Этот формат массива будет намного меньше, чем весь HTML-ответ, заполненный разметкой.Это также дает вам свободу отображать доску любым удобным для вас способом.
Вы можете дополнительно сжать этот формат и просто отправить дельты.Например:сохраните координаты плиток, измененных пользователем, и отправьте их на сервер:
[(x1, y2),.....(xn, yn)]
Или вы можете сделать это наоборот:отправьте полный массив модели на сервер и попросите сервер вычислить дельты.
Проверьте Sponty и следите за трафиком ajax каждые несколько минут или около того, мы делаем что-то очень похожее: http://www.thesponty.com/ Клиент отправляет полную модель на сервер, а сервер отправляет различия.
Другие советы
Если вам известно состояние между обновлениями на стороне сервера (см. Комментарий к вопросу), вы можете отправить данные с помощью 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).
Не думая о дельтах:
Вы можете довольно легко использовать JSON для выполнения подобных действий.Вы также можете создать свой собственный сжатый формат.
Я думаю, что сжатие данных с помощью gzip очень помогло бы.В настоящее время большинство браузеров поддерживают его, и это значительно уменьшит размер ваших ответов.