클라이언트 측에서 javascript를 작성하여 'chunked' 응답을 제때 수신하고 해석하는 방법은 무엇입니까?

클라이언트 측에서 javascript를 작성하여 'chunked' 응답을 제때 수신하고 해석하는 방법은 무엇입니까?

플레이 프레임워크를 사용하여 청크한 응답을 생성합니다.코드는 다음과 같습니다.

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

브라우저를 사용하여 방문할 때http://localhost:9000/test/chunk표시되는 데이터가 매초 증가하고 있는 것을 알 수 있습니다.그러나 데이터를 수신하고 처리하는 Javascript 기능을 작성하면 모든 데이터가 수신될 때까지 차단됩니다.

코드는 다음과 같습니다.

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

모든 데이터가 수신된 10초 후에 메시지 상자가 뜨는 것을 볼 수 있습니다.

스트림을 입수하여 데이터를 제시간에 처리하는 방법

jQuery는 이를 지원하지 않지만 일반 XHR을 사용하여 이를 수행할 수 있습니다.

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

이것은 IE 10을 포함한 모든 최신 브라우저에서 작동합니다.W3C 사양은 이쪽.

여기서 단점은 이라는 것이다xhr.responseText에 누적된 응답이 포함되어 있습니다.서브스트링을 사용할 수 있지만 responseType 속성을 사용하여slice을 타고ArrayBuffer.

머지 않아 이 제품을 사용할 수 있게 될 것입니다.ReadableStreamAPI(MDN 문서는 이쪽).다음 코드는 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();
        });
    }
});

그success완전한 데이터 전송이 완료되고 200 응답 코드로 연결이 닫히면 이벤트가 발생합니다.네이티브를 구현할 수 있어야 한다고 생각합니다.onreadystatechanged이벤트 및 데이터 패킷의 수신 상황을 확인합니다.

언급URL : https://stackoverflow.com/questions/6789703/how-to-write-javascript-in-client-side-to-receive-and-parse-chunked-response-i