Reduce AJAX request size. Simple chat with Polling system

Question

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

I'm trying to reduce an AJAX request of a traditional-polling message system, but I don't know how to get it:

$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);

Well, As you see I use an setInterval() with 1000 miliseconds as parameter and thanks to the SHA1 checksum system I can reduce the size of all AJAX response to 343 B (except when "post.php" returns some new message, obviously)

Questions:

• 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)?

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

• Could I reduce more the AJAX request size? How?

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

Why not use the plain javascript AJAX Request? Maybe your AJAX data is too long, that's why it has a large size: and the only thing you can do for it is to make the AJAX data have a few data.

What do you want? like Facebook AJAX Polling? Do it like this on the server 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));

On JavaScript Client Side:

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();

By doing this, your implementing the Facebook like server polling.

---

For the websocket example in JavaScript client side:

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

Here's my take on your questions, even though you'd better of using a library like socket.io with fallback support for older browsers (simulating websockets via long-polling or such).

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)?

Most HTTP communication between browser and server by default is compressed with gzip. The bulk of your request/response stream consists of HTTP headers where 4 bytes of difference in your hashing algorithm's output may not make a difference effectively due to the gzip compression.

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

See above, and to see for yourself, you could use a http monitor, tcpdump or developer tools to see the raw data transferred.

Could I reduce more the AJAX request size? How?

WebSocket has a lot less footprint compared to HTTP requests, so using it seems the best option here (and polling in intervals is almost never a good idea, even without WebSocket you would be better off implementing long-polling in your server).

Answer 3

I have assembled a simple page with a jQuery $.post request. It produces a request header that's in the form:

   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

You can see the response and request headers by using Firebug on Firefox or F12 on Chrome. In my opinion the extra bytes are those involved in the Http request.