XHR 진행 이벤트 리스너를 사용하도록 http 응답을 올바르게 작성하는 방법

Question

XHR 오브젝트의 "progress"이벤트를 사용하여 다운로드 진행 상황을 확인하고 싶습니다.

는 여기에 내가 유사한 코드를 작성했습니다

var req = new XMLHttpRequest(); 

req.addEventListener("progress", updateProgress, false); 
req.addEventListener("load", transferComplete, false); 
req.addEventListener("error", transferFailed, false); 
req.addEventListener("abort", transferCanceled, false); 

req.open(); 

... 

// progress on transfers from the server to the client (downloads) 
function updateProgress(evt) { 
    if (evt.lengthComputable) { 
    var percentComplete = evt.loaded/evt.total; 
    ... 
    } else { 
    // Unable to compute progress information since the total size is unknown 
    } 
} 

function transferComplete(evt) { 
    alert("The transfer is complete."); 
} 

function transferFailed(evt) { 
    alert("An error occurred while transferring the file."); 
} 

function transferCanceled(evt) { 
    alert("The transfer has been canceled by the user."); 
} 

MDN에서 예제 코드,하지만 progress 이벤트의 lengthComputable 필드가 거짓으로 밝혀졌습니다. loaded 필드는 일부 유한 값이지만 total은 0으로 설정됩니다.

위의 코드 예에서 설명한 의견에서 볼 때 브라우저가 의미있는 다운로드 진행률을 계산하기에 충분한 HTTP 응답 정보를 얻지 못함을 알 수 있습니다.

이 작품을 작성하는 올바른 방법은 무엇입니까? 내 테스트에서 볼 수있는 응답은 Transfer-encoding: chunked과 Content-Length: 8입니다. 토네이도 웹 서버에서 생성하고 있습니다.

Answer 1

chunked transfer encoding에서 응답의 전체 길이는 서버에 의해 표시되지 않으므로 클라이언트에 미리 알려지지 않습니다.

두 가지를 시도 할 수 있습니다.

• 청크 분할 전송 인코딩을 사용하지 말고 Content-Length이라는 일반 방식을 사용합니다. 이것이 진행 이벤트 사양 requires입니다. 그러나 이것이 토네이도로 가능한지/나는 모릅니다.

• 또는 X-Total-Length과 같은 맞춤 응답 헤더에 전체 길이를 포함하십시오. 그런 다음 비율을 결정하기 위해 다음과 같은 코드를 사용

  function updateProgress(evt) { 
      var total = evt.lengthComputable ? 
         evt.total : parseInt(req.getResponseHeader('X-Total-Length')); 
      if (total) { 
      var percentComplete = evt.loaded/total; 
      // ... 
      } 
  }