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

时间:2015-06-02 19:13:40

标签: javascript php jquery xmlhttprequest ajax-polling

  

注意:我用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);

好吧,如您所见,我使用setInterval() 1000毫秒作为参数,并且由于SHA1校验和系统,我可以将所有AJAX响应的大小减小到{{1} (除非“post.php”返回一些新消息,显然是


的问题:

  • 为什么我的所有AJAX请求都大小相同343 B,即使我将SHA1343 B))哈希更改为{{ 3}}(20 B)?

  • 我的校验和变量( SHA1 )占用16 B其余 20 B

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


  

注意:

     

323 B是针对Javascript的 SHA1 算法的实现:MD5

  

注2:

     

不幸的是,我无法使用像hex_sha1()这样的服务器推送技术。我只能使用Javascript(客户端)和PHP。

3 个答案:

答案 0 :(得分:1)

为什么不使用普通的javascript AJAX请求?也许你的AJAX数据太长了,这就是为什么它有一个大尺寸:你唯一可以做的就是让AJAX数据有一些数据。

你想要什么?喜欢Facebook AJAX Polling?在服务器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");

答案 1 :(得分:1)

这是我对你的问题的看法,即使你最好使用像socket.io这样的库,对旧浏览器提供后备支持(通过长轮询等模拟websockets)。

  

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

默认情况下,浏览器和服务器之间的大多数HTTP通信都是使用gzip压缩的。您的请求/响应流的大部分由HTTP标头组成,其中由于gzip压缩,散列算法输出中的4个字节的差异可能无法有效地产生差异。

  

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

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

  

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

与HTTP请求相比,WebSocket占用的空间要少得多,因此使用它似乎是最好的选择(并且间隔轮询几乎不是一个好主意,即使没有WebSocket,您最好在服务器中实现长轮询)

答案 2 :(得分:0)

我已经组装了一个带有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请求中涉及的字节。