javascript - para - Reducir el tamaño de la solicitud AJAX. Chat simple con el sistema de votación

javascript chat

Question

^{_{AVISO: Reemplacé mi sistema de votación con websockets pero aún quiero saber la respuesta a mis preguntas anteriores.}}

Estoy tratando de reducir una solicitud AJAX de un sistema de mensaje de votación tradicional , pero no sé cómo obtenerlo:

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

Bueno, como ve, utilizo setInterval() con 1000 milisegundos como parámetro y gracias al sistema de suma de comprobación SHA1 puedo reducir el tamaño de toda la respuesta AJAX a 343 B ( excepto cuando "post.php" devuelve algún mensaje nuevo, obviamente )

Preguntas:

• ¿Por qué todas mis solicitudes AJAX tienen siempre el mismo tamaño ( 343 B) a pesar de que cambio el hash SHA1 ( 20 B ) a MD5 ( 16 B )?

• Mi variable de suma de comprobación ( SHA1 ) ocupa 20 B : ¿Dónde se encuentran los 323 B restantes ?

• ¿Podría reducir más el tamaño de solicitud de AJAX? ¿Cómo?

NOTA:

hex_sha1() es una implementación del algoritmo SHA1 para Javascript: http://pajhome.org.uk/crypt/md5/sha1.html

NOTA 2:

Desafortunadamente no puedo usar una técnica Server-Push como node.js Solo puedo usar Javascript (lado del cliente) y PHP.

Answer 1

Aquí está mi respuesta a sus preguntas, aunque sería mejor utilizar una biblioteca como socket.io con soporte alternativo para navegadores antiguos (simulando websockets a través de encuestas largas o similares).

¿Por qué todas mis solicitudes AJAX tienen siempre el mismo tamaño (343 B) a pesar de que cambio el hash SHA1 (20 B) a MD5 (16 B)?

La mayoría de las comunicaciones HTTP entre el navegador y el servidor están comprimidas por defecto con gzip. La mayor parte de su secuencia de solicitud / respuesta consiste en encabezados HTTP donde 4 bytes de diferencia en la salida de su algoritmo hash pueden no hacer una diferencia efectiva debido a la compresión gzip.

Mi variable de suma de comprobación (SHA1) ocupa 20 B: ¿Dónde se encuentran los 323 B restantes?

Vea arriba, y para ver usted mismo, puede usar un monitor http, tcpdump o herramientas de desarrollador para ver los datos sin procesar transferidos.

¿Podría reducir más el tamaño de solicitud de AJAX? ¿Cómo?

WebSocket tiene una huella mucho menor en comparación con las solicitudes HTTP, por lo que usarlo parece ser la mejor opción aquí (y el sondeo en intervalos casi nunca es una buena idea, incluso sin WebSocket sería mejor implementar la larga encuesta en su servidor).

Answer 2

He reunido una página simple con una solicitud jQuery $ .post. Produce un encabezado de solicitud que tiene el siguiente formato:

   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

Puedes ver los encabezados de respuesta y solicitud usando Firebug en Firefox o F12 en Chrome. En mi opinión, los bytes adicionales son los involucrados en la solicitud de HTTP.

Answer 3

¿Por qué no utilizar la solicitud simple javascript AJAX? Tal vez sus datos AJAX son demasiado largos, es por eso que tiene un gran tamaño: y lo único que puede hacer es hacer que los datos AJAX tengan algunos datos.

¿Qué deseas? como Facebook AJAX Polling? Hazlo así en el servidor 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));

En el lado del cliente de 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();

Al hacer esto, implementará Facebook como sondeo de servidor.

Para el ejemplo de websocket en el lado del cliente de JavaScript:

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