Tips for avoiding XMLHttpRequest from buffering the complete response

Question

Tips for avoiding XMLHttpRequest from buffering the complete response

Trying to implement an ajax call to a streaming endpoint on my server. Need the connection to accept continuous pushed data from the server, but XMLHttpRequest seems to buffer the entire response. Want the browser client to receive each chunk of data once and move forward.

Looking for a way to stop this behavior. Any solutions?

UPDATE: Discovered that Firefox can handle this by setting XMLHttpRequest.responseType to "moz-chunked-text" or "moz-chunked-arraybuffer". Unfortunately, other browsers don't support this feature. Probably not the most reliable approach anyway.

WebKit equivalent to Firefox's "moz-chunked-arraybuffer" xhr responseType

javascript ajax streaming

Answer 1

Answer №1

If you're interested in learning more about Push technology, I recommend checking out this wiki: http://en.wikipedia.org/wiki/Push_technology

It seems like what you might be referring to is long polling, where a server sets its output to chunked. You can find an example of how to make PHP generate Chunked response here.

If your server sends a chunked response, you could use a tool like https://github.com/flowersinthesand/portal to continuously read the stream.

Another option, if you can't change your server's transfer encoding or prefer to stick with Ajax, is to have your client poll the server for updates. Here's a simple example using jQuery:

setInterval(function(){
   $.get("/my/endpoint?last_updated=" + (new Date().getTime()), function(data){
      console.log("Received response");
   });
}, 5000); // Refresh every 5 seconds

In my experience, Socket.io has been very effective. It's based on node.js and optimizes performance for each client by utilizing websockets, flash sockets, and polling as needed to provide fast speeds for newer browsers while still supporting older ones.

Answer 2

If you're interested in learning more about Push technology, I recommend checking out this wiki: http://en.wikipedia.org/wiki/Push_technology

It seems like what you might be referring to is long polling, where a server sets its output to chunked. You can find an example of how to make PHP generate Chunked response here.

If your server sends a chunked response, you could use a tool like https://github.com/flowersinthesand/portal to continuously read the stream.

Another option, if you can't change your server's transfer encoding or prefer to stick with Ajax, is to have your client poll the server for updates. Here's a simple example using jQuery:

setInterval(function(){
   $.get("/my/endpoint?last_updated=" + (new Date().getTime()), function(data){
      console.log("Received response");
   });
}, 5000); // Refresh every 5 seconds

In my experience, Socket.io has been very effective. It's based on node.js and optimizes performance for each client by utilizing websockets, flash sockets, and polling as needed to provide fast speeds for newer browsers while still supporting older ones.

Answer 3

Answer №2

Check out this informative link on Comet programming: http://en.wikipedia.org/wiki/Comet_(programming)

My website utilizes Ajax to poll a server while incorporating a Comet Server. When the browser sends a request, it only receives a response when a specific event occurs on the server (such as a file finishing generation). If no response is received after a 30-second timeout, an empty response is sent. Each time the client gets an Ajax response, it promptly sends a new request.

The benefit of this setup is that there's no need to constantly poll the server; instead, the client is instantly notified of any events occurring on the server.

Answer 4

Check out this informative link on Comet programming: http://en.wikipedia.org/wiki/Comet_(programming)

My website utilizes Ajax to poll a server while incorporating a Comet Server. When the browser sends a request, it only receives a response when a specific event occurs on the server (such as a file finishing generation). If no response is received after a 30-second timeout, an empty response is sent. Each time the client gets an Ajax response, it promptly sends a new request.

The benefit of this setup is that there's no need to constantly poll the server; instead, the client is instantly notified of any events occurring on the server.

Tips for avoiding XMLHttpRequest from buffering the complete response

Answer №1

Answer №2

Similar questions

How to dynamically assign a value in a React datepicker component in a React application

Converting SVG to PNG image directly in the browser (compatible with all browsers, including Internet Explorer)

Maintaining clicked links in jQuery and dynamically adding or removing CSS classes upon page refresh

What is the best way to assign a dictionary value to 'v-model' using a specific key?

Sharing information between functions within the same controller in AngularJS

Creating a fixed-size set in React with randomly ordered elements

A guide to implementing X-Frame-Options in an express.js web application using node.js

Does ReactJS demonstrate ingenuity when it comes to calling the render method?

Unlock the full potential of `enableReinitialize: true` by utilizing the options `destroyOnUnmount: false` and `forceUnregisterOnUnmount: false` in a

JavaScript combined with a dynamic menu, a customized current link style using CSS, and a site built on PHP

An issue has arisen with the padding during the decryption process of payload data within the Django registration view function

Discover the power of Vue.js 3 by seamlessly integrating anonymous functions within event handlers

What is the best way to display a success notification when a transaction is successfully executed in web SQL

Utilizing a JQuery variable as an OFFSET parameter in an SQL query

JavaScript object containing the individual points of each person extracted using Regex form

Master the art of sending multiple asynchronous requests simultaneously with suspense in Vue 3

Implementing Firebase with NextJS to append objects to a nested array

New data row successfully added to HTML table, revealing an object display

Error Alert: UnhandledPromiseRejectionWarning in Async Series Causes Concern

Tips for importing a JSON file from your local directory in Vue.js