AJAX diferencial atualiza para a tabela HTML?

Question

Eu tenho um jogo que é baseado em uma tabela HTML 25x20 (o tabuleiro de jogo). A cada 3 segundos o usuário pode "movimento", que envia uma solicitação AJAX para o servidor, momento em que o servidor renderiza novamente a tabela HTML inteiro e envia para o usuário.

Esta foi fácil de escrever, mas desperdiça muita largura de banda. Existem quaisquer bibliotecas, o cliente (de preferência jQuery) ou do lado do servidor, esse diferencial ajudar a enviar em vez de atualizações completas para grandes tabelas? Normalmente, apenas 5-10 telhas mudar em um determinado recarga, então eu sinto que eu poderia reduzir o uso de largura de banda por uma ordem de magnitude, enviando apenas as telhas em vez de todos os 500 a cada 3 segundos.

Eu também estou aberto a "seu idiota, porque você está usando tabelas HTML" comentários -tipo se você pode sugerir uma alternativa melhor. Por exemplo existem / técnicas de manipulação DOM CSS eu deveria estar a pensar em vez de usar uma tabela HTML? Devo usar uma mesa, mas dar a cada coordenadas TD para um id (como "12x08") e, em seguida, jquery uso para substituir as células por id?

Um esclarecimento:. As telhas são de texto, não imagens

Answer 1

Você pode modelar seu tabuleiro de jogo como uma matriz multidimensional javascript:

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

cada entrada é uma matriz que representa uma linha. Cada célula contém o valor numérico da peça do jogo / quadrado.

Este modelo pode ser o "contrato" que você envia para o servidor via ajax como JSON. O servidor calcula a mesma matriz e envia de volta para a interface do usuário. Você pode processar essa matriz em uma tabela, divs ou o que quiser. Prototype.js e jQuery tornam a criação de DHTML super fácil.

Este formato de matriz será muito menor do que uma resposta HTML toda carregada de marcação. Ela também lhe dá a liberdade para tornar o conselho de qualquer maneira que você gosta.

Você pode comprimir ainda mais este formato e apenas enviar os deltas. Por exemplo: salvar as coordenadas de telhas alterado pelo usuário e enviar aqueles para o servidor:

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

Ou você pode fazê-lo o contrário:. Enviar a matriz modelo completo para o servidor, e ter a calcular servidor os deltas

Confira Sponty, e ver o tráfego ajax cada poucos minutos ou assim, nós fazer algo muito semelhante: http: //www.thesponty.com/ O cliente envia o modelo completo para o servidor, e o servidor envia os diffs.

Answer 2

Se você sabe o estado entre as atualizações no lado do servidor (ver comentário em questão), é um envio de dados usando JSON assim (não tenho certeza sobre a sintaxe exata):

[
    { 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 que (remover os espaços em branco extra, etc.), gzip-lo e enviá-lo para o seu Javascript. Surpreendentemente, o código Javascript para ler este não é tão complicado (simplesmente manipulações DOM).

Answer 3

Sem pensar de deltas:

Você pode usar JSON com bastante facilidade para fazer esse tipo de coisa. Você pode lançar seu próprio formato compactado, também.

Eu acho que comprimir os dados usando gzip ajudaria muito. A maioria dos navegadores hoje em dia apoiá-lo, e ele irá reduzir significativamente o tamanho de suas respostas.