How to receive a "stream of input" using XMLHttpRequest object?

Question

I have a javascript file which creates a XMLHttpRequest object and opens a connection to a PHP file and sends a form object to it. The Javascript file is like this:

let formData = new FormData();
formData.append("field1", ["mockdata1", "mockdata2"]);

let xhr = new XMLHttpRequest();
xhr.open("POST", "../phpscripts/agent.php");
xhr.send(formData);

The PHP file does something like this:

if( !empty( $_POST['field1'] )){
  
   $result; 

   for($x=0; $x<someLimit; $x++){
      //update $result
    }

    return $result;
}

So the PHP file queries another API and procedurally updates $result. The querying process takes time (each query to that API can range from 0.5 seconds to 2 seconds)

After it is done, it returns $result to the javascript file that sent the request. And this whole process takes quite some time because it makes multiple queries. There is a gap of around 10 seconds between when the javascript makes that xhr and when it gets the final result.

What I am trying to do is create some kind of a "listening system" inside that for-loop in the PHP file. So that the javascript file can read the current status of $result (as it builds up inside the for-loop) in predetermined intervals.

What is the best way to do this? Because the XHR object will only be received by javascript once that php for-loop is over and it returns $result.

Is there some way of creating a "stream" instead of a one-time request and return (which is how XHR works)? So that I can create a setInterval in the Javascript file which reads that stream every second and gets the current state of $result.

I have thoguht about making a 2nd XHR object but I don't know how to make the php file return to that and then continue on with the for-loop. I really feel like I'm using the wrong methods here.

Ditch xhr and use websockets or server-sent events. Then the server can send to the client when needed. With xhr/ajax the client can only poll the server, to check for new info, which is inefficient — ADyson, Commented Apr 18 at 17:39
@ADyson, is this easy to configure in my current Javascript-PHP setup? It says that using webesockets in PHP requires installing additional modules. — Abb, Commented Apr 18 at 20:24
You are saying that you create a request to an API on the back-end. That is fine, but the question is, if you can "say" anything interesting to the front-end in the process? So, my question: does it make any difference if you can use another technology (WS or SSE) than AJAX, if you haven't got any useful information about the progress? — chrwahl, Commented Apr 18 at 20:37
Server-Sent Events are easy enough to setup and the requirement in PHP is trivial compared to websockets, no additional modules needed. — Professor Abronsius, Commented Apr 19 at 7:50
@Abb yes websockets can be complex to set up on the server, but there are plenty of 3rd party services which offer ready-made implementations (often with very cheap pricing) that your system can interact with. You don't necessarily need to build or host the service yourself. Some research would be necessary. But as someone above mentioned, server-sent events can be simpler to achieve, and are suitable if you only need real-time data going server -> client, and not the other direction. — ADyson, Commented Apr 21 at 10:23

billbarron · Accepted Answer · 2025-04-19 19:03:45Z

You can try and turn off output buffering and sending output, but you will have to return something that is useful for your JS, like the current status of your $result perhaps, without knowing what is in $result variable I can't help more

header('Content-Type: text/html; charset=utf-8');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no');
ini_set('output_buffering', 'off');
ini_set('zlib.output_compression', false);

// Send content immediately
ob_implicit_flush(true);

// Example: Send initial output immediately
echo print_r($result, true);
flush(); //this sends whatever output you have started

Collectives™ on Stack Overflow

How to receive a "stream of input" using XMLHttpRequest object?

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related