减少AJAX请求大小.与轮询系统简单聊天

Question

^{_{注意：我用websockets替换了我的投票系统，但我仍然想知道上面问题的答案}}

我试图减少传统轮询消息系统的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);

好吧，正如你所看到的，我使用了一个以1000毫秒为参数的setInterval()，由于SHA1校验和系统，我可以减少对343 B的所有AJAX响应的大小(，除非"post.php"返回一些新消息，显然(

问题：

• 为什么我所有的AJAX请求都有相同的大小(343 B)，即使我将SHA1(20 B(哈希更改为MD5(16 B(？

• 我的校验和变量(SHA1(占用20 B:剩余的323 B在哪里？

• 我可以减少更多的AJAX请求大小吗如何

注意：

hex_sha1()是Javascript的SHA1算法的实现：http://pajhome.org.uk/crypt/md5/sha1.html

注2:

不幸的是，我不能使用像node.js这样的服务器推送技术。我只能使用Javascript(客户端(和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

以下是我对您的问题的看法，尽管您最好使用像socket.io这样的库，该库支持旧浏览器的回退(通过长轮询等模拟websocket(。

为什么我所有的AJAX请求都有相同的大小(343 B(，尽管我将SHA1(20B(哈希更改为MD5(16B(？

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

我的校验和变量(SHA1(占用了20B:剩下的323B在哪里？

请参阅上面的内容，您可以使用http监视器、tcpdump或开发人员工具来查看传输的原始数据。

我可以减少更多的AJAX请求大小吗？怎样

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

Answer 3

我用jQuery$.post请求组装了一个简单的页面。它生成一个请求标头，格式为：

   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来查看响应和请求标头。在我看来，额外的字节是Http请求中涉及的字节。