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

StackOverflow https://stackoverflow.com/questions/602322

  •  03-07-2019
  •  | 
  •  

Вопрос

У меня есть игра, основанная на 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 очень помогло бы.В настоящее время большинство браузеров поддерживают его, и это значительно уменьшит размер ваших ответов.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top