2

我有一个基于 25x20 HTML 表（游戏板）的游戏。用户每 3 秒可以“移动”一次，这会向服务器发送一个 AJAX 请求，此时服务器会重新呈现整个 HTML 表并将其发送给用户。

这很容易写，但它浪费了大量的带宽。是否有任何库、客户端（最好是 jquery）或服务器端，可以帮助发送差异而不是大型表的完整更新？通常在给定的重新加载时只有 5-10 个图块会发生变化，所以我觉得我可以通过仅发送这些图块而不是每 3 秒发送全部 500 个图块来将带宽使用减少一个数量级。

如果你能提出更好的选择，我也愿意接受“你这个白痴，你为什么要使用 HTML 表格”类型的评论。例如，是否有任何 CSS/DOM 操作技术我应该考虑而不是使用 HTML 表格？我应该使用表格但为每个 td 提供一个 id 坐标（如“12x08”），然后使用 jquery 用 id 替换单元格吗？

澄清：瓷砖是文本，而不是图像。

4

3 回答 3

2

如果您知道服务器端刷新之间的状态（请参阅问题评论），您可以像这样使用 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" }
]

压缩它（删除多余的空格等），gzip 它，然后将它发送到您的 Javascript。令人惊讶的是，读取它的 Javascript 代码并没有那么复杂（只是 DOM 操作）。

于 2009-03-02T13:42:54.147 回答
2

您可以将游戏板建模为多维 javascript 数组：

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

每个条目是一个代表一行的数组。每个单元格保存游戏棋子/方块的数值。

该模型可以是您通过 ajax 作为 JSON 发送到服务器的“合同”。服务器计算相同的数组并将其发送回 UI。您可以将该数组呈现为表格、div 或任何您喜欢的内容。Prototype.js 和 jQuery 让创建 dhtml 变得超级简单。

这种数组格式将比一个带有标记的整个 HTML 响应小得多。它还使您可以自由地以您喜欢的任何方式渲染电路板。

You can further compress this format and just send the deltas. For example: save the coordinates of tiles changed by the user and send those to the server:

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

Or you can do it the other way around: send the full model array to the server, and have the server calculate the deltas.

Check out Sponty, and watch the ajax traffic every few minutes or so, we do something very similar: http://www.thesponty.com/ The client sends the full model to the server, and the server sends the diffs.

于 2009-03-02T19:47:12.477 回答
1

不考虑增量：

你可以很容易地使用 JSON 来做这种事情。您也可以推出自己的压缩格式。

我认为使用 gzip 压缩数据会有很大帮助。现在大多数浏览器都支持它，它将大大减少您的响应大小。

于 2009-03-02T13:38:00.257 回答