I have a test node server that is sending chunked responses every few two seconds with the following headers:
response.setHeader('Content-Type', 'text/plain')
response.setHeader('Transfer-Encoding', 'chunked')
Every two seconds, I write out to the response:
response.write('Hello World');
When I do a curl on the endpoint, I get a chunk back every two seconds:
Hello World
(wait two seconds)
Hello World
(wait two seconds)
Hello World
It works like it's supposed to in curl.
For my Javascript on the client side, I set up a new XMLHttpRequest
and assign a function to print out its responseText
for the onprogress
event.
Here is where the implementation seems to differ across browsers.
In Firefox and Safari, I get similar behavior as when I curl. An onprogress event fires for each "Hello World".
In Chrome, an onprogress event fires only when all of chunks have been received and I do a response.end()
on the server side. And when I try to print out the responseText
, only an empty string prints out.
Here is what the client-side code looks like:
var xhr = new XMLHttpRequest()
xhr.onprogress = function() {
// Firefox, Safari prints out an accumulation of the chunks
// Chrome prints out an empty string
console.log(xhr.responseText);
}