减少 AJAX 请求大小。与投票系统的简单聊天

Question

^{_{NOTICE: I replaced my polling system with websockets but I still want to know the answer to my questions above.}}

我正在尝试减少 traditional-polling 消息系统的 AJAX 请求，但我不知道如何获取它：

$chatbox = $("#chatbox");

setInterval(function(){
    // I send the sha1 of the chatbox html content to verify changes.
    $.post("post.php", {checksum: hex_sha1($chatbox.html())}, function (data, status) {

        switch (status) {
            case "success": 
                // If version of "post.php" checksum is different than mine (there are changes) data isn't empty; I assign data as the new content of the chatbox.
                if(data){ 
                    $chatbox.html(data);      
                    $chatbox.scrollTop($chatbox[0].scrollHeight); 
                } 
            break;

            default: 
                $chatbox.html('Connection error...'); 
            break;                       
        }                       
    });
}, 1000);

好吧，如你所见，我使用 setInterval() 和 1000 毫秒作为参数，感谢 SHA1 校验和系统，我可以减少所有 AJAX 的大小响应 343 B（除了“post.php”returns 一些新消息，显然）

问题：

为什么我所有的 AJAX 请求都有 相同的大小（343 B) 即使我更改了 SHA1 (20 B) hash to MD5 (16 B)?
我的校验和变量（SHA1）占20 B：剩下的323 B?
我可以减少更多 AJAX 请求大小吗？ 如何？

NOTE:

hex_sha1() is a implementation of SHA1 algorithm for Javascript: http://pajhome.org.uk/crypt/md5/sha1.html

NOTE 2:

Unfortunately I can't use an Server-Push Technique like node.js. I can only use Javascript (client-side) and PHP.

Answer 1

为什么不使用简单的 javascript AJAX 请求？也许你的 AJAX 数据太长了，这就是为什么它有很大的尺寸：你唯一能做的就是让 AJAX 数据有一些数据。

你想要什么？喜欢 Facebook AJAX 投票？在服务器上这样做 PHP:

$chat_data = "(this is the chat data variable if there is no chat data it will idle)";
while (!$chat_data) {
     // when there's no chat data let's idle the request without disconnecting
     // the client from the AJAX request.
     sleep(1);
}
exit(json_encode($chat_data));

在 JavaScript 客户端：

function repoll () {
     chat_poll = new XMLHttpRequest();
     // the chat_req variable is for sending POST data to the server.
     chat_req = new FormData();
     chat_req.append("do", "chatpoll");
     chat_poll.open("POST", "post.php");
     chat_poll.send(chat_req);
     chat_poll.onload = function () {
     // do something here with the chat data
     // repoll the server
     repoll();
}

repoll();

通过这样做，您实现了类似于 Facebook 的服务器轮询。

对于 JavaScript 客户端中的 websocket 示例：

web_socket = new WebSocket("ws://[thesocket]:[theport]");
web_socket.onmessage = function (w) {
     // do something here. this will fire if messages is received from the websocket.
     // you will get the message from w.data variable.
     alert("Data Received: " + w.data);
}

// to send data to the web socket do this:
web_socket.send("the data you want. I prefer JSON for sending configuration and chat data or XML if you want");

Answer 2

我用 jQuery $.post 请求组装了一个简单的页面。它会生成一个请求 header，格式如下：

   POST /post_.js HTTP/1.1

   Host: localhost

   User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:38.0) Gecko/20100101 Firefox/38.0

   Accept: */*

   Accept-Language: it-IT,it;q=0.8,en-US;q=0.5,en;q=0.3

   Accept-Encoding: gzip, deflate

   Content-Type: application/x-www-form-urlencoded; charset=UTF-8

   X-Requested-With: XMLHttpRequest

   Referer: http://localhost/test.html

   Content-Length: 49

   Connection: keep-alive

   Pragma: no-cache

   Cache-Control: no-cache

您可以在 Firefox 上使用 Firebug 或在 Chrome 上使用 F12 查看响应和请求 header。在我看来，额外的字节是 Http 请求中涉及的字节。

Answer 3

这是我对你的问题的看法，尽管你最好使用像 socket.io 这样的库，它对旧浏览器提供后备支持（通过 long-polling 等模拟 websockets）。

Why all my AJAX requests have ever the same size (343 B) even though I change the SHA1 (20 B) hash to MD5 (16 B)?

默认情况下，浏览器和服务器之间的大多数 HTTP 通信都是使用 gzip 压缩的。您的 request/response 流的大部分由 HTTP headers 组成，其中由于 gzip 压缩，哈希算法输出中 4 个字节的差异可能不会产生有效影响。

My checksum variable (SHA1) occuppies 20 B: Where do the remaining 323 B?

参见上文，您可以使用 http 监视器、tcpdump 或开发人员工具来查看传输的原始数据。您可以亲自查看。

Could I reduce more the AJAX request size? How?

与 HTTP 请求相比，WebSocket 的占用空间要小得多，因此在这里使用它似乎是最好的选择（而且间隔轮询几乎从来都不是一个好主意，即使没有 WebSocket，你最好还是实现 long-polling在你的服务器中）。

减少 AJAX 请求大小。与投票系统的简单聊天

Reduce AJAX request size. Simple chat with Polling system

javascript

php

jquery

xmlhttprequest

ajax-polling

问题：