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.

Delaunay

Why not use websockets? – Osmious

@JayBlanchard As I Know the websockets are not supported by all browsers yet. I'm wrong? – Delaunay

All modern browsers support them in one form or another. – Osmious

If you don't care about IE 8/9, use them - see caniuse.com/#feat=websockets. Otherwise use long polling (with server blocking until there is a relevant event). – Diaconicum

@JayBlanchard , Sebastian. I see. I don't knew that. Could some of you write me an example of websockets as answer, please? (also I want to Know if is possible to reduce the AJAX request size) – Delaunay

You need to do a little research @tomloprod. We cannot just pop out some websockets code for you. – Osmious

@JayBlanchard I only pretend to accept an answer, do not get me wrong. – Delaunay

literally just googled 'php websockets' - socketo.me – Olid

Thanks to all of you; I replaced my polling system with websockets but I still want to know the answers to my three questions above, so I will not close my question. – Delaunay

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

Oriane

Hi Gian, I have three questions, listed in my message. I would suspect that your long polling system keep "pending" also the "send message" AJAX request, so it will not be very fluid. As my answer says, I use websockets finally; but I still want to know the answer to my three questions. I try to use the XMLHttpRequest without JQuery, but the result is the same. Thanks. – Delaunay

1 & 2: jQuery is sending other information in the header which will be included in your AJAX request. that is where the remaining 323B go. 3: remove the AJAX header request it should decrease the request size. that's all i know. sorry. – Adsorbate

I tried again the XMLHttpRequest and the same result as JQuery. – Delaunay

var req = new XMLHttpRequest(); req.setRequestHeader("Authorization", ""); --> try doing that before sending it. it will remove the headers sent using XMLHttpRequest. – Adsorbate

I tried to use that code after which Danilo Cataldo wrote her answer. But doesn't work; the AJAX request has same size, since it won't change the headers. – Delaunay

i know the problem. your sending a sha1 checksum/hash.. try sending the data without hasing it i mean send the pure data insead of sha1 checksum it will solve the problem.. look at this one: "hello world!" sha1 hash will be "FC3FF98E8C6A0D3087D515C0473F8677" you see it creates a longer text that's why the ajax data become so large. create a text file one with the "Hello World!" data and one with the hash of it. the hash will be insanely larger than the pure data of it. – Adsorbate

OK i quit. i don't know the answer to your problem. maybe you can use the stackoverflow chat instead to know the solution to your problem. – Adsorbate

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

Ruisdael

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.

Starve

Hi, this doesn't answer my question... Thanks. – Delaunay

@Delaunay how does it not? The additional 323 bytes are coming from the headers that get sent in the request. – Buzzard

@Buzzard Hi. There are three questions in my message, and the Danilo Cataldo answer only responds to one question (the second point). Also, I want to see evidences who demonstrate which the additional 323 B are coming from the headers. (headers that should resize depending on user-agent—since they have different sizes—; but it's not like that.) Thanks for comment. – Delaunay

Maybe the fixed length is due to IPv4 packages size. en.wikipedia.org/wiki/IPv4 If you can tell how the measure of the bytes is taken, it could help. – Starve

Hi, I don't understand this: If you can tell how the measure of the bytes is taken. What do you mean? Thanks. – Delaunay

Sorry, I mean can you tell how you count the bytes? What do you use (Ex. Fiddler, WireShark, FireBug, or some php function I don't rememember) – Starve

I used the Developer tools, Network tab of Chrome and IE 11. – Delaunay