Como escrever javascript no lado do cliente para receber e analisar a resposta `chunked` no tempo?

Estou usando o framework play para gerar uma resposta em partes. O código é:

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

Quando eu uso o navegador para visitar http://localhost:9000/test/chunk , posso ver os dados exibidos aumentados a cada segundo. Mas, quando eu escrevo uma function javascript para receber e manipular os dados, encontrei que irá bloquear até que todos os dados recebidos.

O código é:

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

Eu posso ver uma checkbox de mensagem apareceu após 10s, quando todos os dados recebidos.

Como obter o stream e manipular os dados no tempo?

O jQuery não suporta isso, mas você pode fazer isso com o XHR simples:

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

Isso funciona em todos os navegadores modernos , incluindo a especificação do IE 10. W3C aqui .

A desvantagem aqui é que xhr.responseText contém uma resposta acumulada. Você pode usar substring, mas uma idéia melhor é usar o atributo responseType e usar slice em um ArrayBuffer .

Em breve, poderemos usar a API ReadableStream ( documentos MDN aqui ). O código abaixo parece estar funcionando com o Chrome versão 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(); }); } }); 

o evento de success será acionado quando a transmissão de dados completa for concluída e a conexão for fechada com um código de resposta 200. Eu acredito que você deve ser capaz de implementar um evento onreadystatechanged nativo e ver os pacotes de dados como eles vêm.

Intereting Posts