Get function progress from nodejs and output it on client side

I have the code below that runs ffmpeg command my goal is to get the progress that shows correctly on server logs but the issue is I cannot figure out the logic to send progress and then end the connection after completing the additional code

// Progress Tracking
ffmpeg.stderr.on('data', (data) => {
  if (timeMatch) {
    progress = Math.floor((currentTime / duration) * 100);
    console.log(`FFmpeg in progress : ${progress}%`);
    res.write(`data: ${progress}\n\n`);
  }
});


// Send the output file as a response once the process is complete
ffmpeg.on("close", () => {
  fs.readFile(outputPath, (err, data) => {
    async function uploadData() {
      const result = await bucket.upload(outputPath);
      if (result) {
        res.json({ mediaLink: `https://firebasestorage.googleapis.com/${fileName}?alt=media&token=${idtoken}` });
      } else {
        res.status(500).send('Error: could not get media link');
      }
    }
    uploadData();
  });
});

On react client side I am trying with this but not sure if that's correct

.then(response => {
  const data = response.data;
  if (data.progress) {
    console.log('Progress:', data.progress);
    // Update UI or perform actions with the progress value
  }
  if (data.mediaLink) {
    console.log('Final data:', data.mediaLink);
    // Perform actions with the final data
  }
})

The error I get on nodejs server is

> ERR_HTTP_HEADERS_SENT

Error on client side

> net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)

The issue is that the way you are trying to do this is not possible with plain old HTTP.

Before you can send the body of an HTTP response, you must send the headers. After you send the headers, you can't go back or send new headers. It's a one-way thing. If you try to send headers multiple times, node.js will give throw the error ERR_HTTP_HEADERS_SENT. This is the error you're getting.

The first time res.write() is called, it will send some default headers if headers haven't already been sent. However, res.json() needs to send headers every time it is called because it needs to tell the client that it is sending JSON in the headers. So because you can only send headers once, you can either call res.json() once, or res.write() as much as you need. Not both.

If you want to stream realtime updates to the client about the progress of ffmpeg, then I suggest looking into something else like web sockets which allow you to do this.