ajax - example - ¿Cómo escribir javascript en el lado del cliente para recibir y analizar la respuesta `chunked` a tiempo?

carga asincrona javascript

Question

Estoy usando Play Framework, para generar una respuesta fragmentada. El código es:

class Test extends Controller {
    public static void chunk() throws InterruptedException {
        for (int i = 0; i < 10; i++) {
            String data = repeat("" + i, 1000);
            response.writeChunk(data);
            Thread.sleep(1000);
        }
    }
}

Cuando uso el navegador para visitar http://localhost:9000/test/chunk , puedo ver los datos que se muestran aumentados cada segundo. Pero, cuando escribo una función de JavaScript para recibir y manejar los datos, descubro que bloqueará hasta que todos los datos recibidos.

El código es:

$(function(){
    $.ajax(
        "/test/chunked", 
        {
            "success": function(data, textStatus, xhr) {
                alert(textStatus);
            }
        }
    );
});

Puedo ver un cuadro de mensaje emergente después de 10s, cuando todos los datos recibidos.

¿Cómo obtener la transmisión y manejar los datos a tiempo?

Answer 1

Pronto deberíamos poder usar la API ReadableStream ( documentos MDN aquí ). El siguiente código parece estar funcionando con la versión de Chrome 62.0.3202.94:

fetch(url).then(function (response) {
    let reader = response.body.getReader();
    let decoder = new TextDecoder();
    return readData();
    function readData() {
        return reader.read().then(function ({value, done}) {
            let newData = decoder.decode(value, {stream: !done});
            console.log(newData);
            if (done) {
                console.log(''Stream complete'');
                return;
            }
            return readData();
        });
    }
});

Answer 2

el evento de success se activará cuando se complete la transmisión de datos y la conexión se cierre con un código de respuesta de 200. Creo que deberías ser capaz de implementar un evento nativo onreadystatechanged y ver los paquetes de datos tal como vienen.

Answer 3

jQuery no es compatible con eso, pero puede hacerlo con XHR normal:

var xhr = new XMLHttpRequest()
xhr.open("GET", "/test/chunked", true)
xhr.onprogress = function () {
  console.log("PROGRESS:", xhr.responseText)
}
xhr.send()

Esto funciona en todos los navegadores modernos , incluida la especificación IE 10. W3C here .

La desventaja aquí es que xhr.responseText contiene una respuesta acumulada. Puede usar subcadena en él, pero una mejor idea es usar el atributo responseType y usar slice en un ArrayBuffer .