寻求浏览器兼容的服务器长时任务流式进度监控方案

Hey there! Great question—streaming real-time progress updates for long-running server tasks without dropping the connection is such a common need, and it makes total sense to want better browser compatibility than the experimental ReadableStream API can offer right now. Let me walk you through a tried-and-true approach using XMLHttpRequest (XHR) that works reliably across almost all modern browsers (and even older ones like IE10+).

First, a Quick Server-Side Prerequisite #

Before diving into client code, make sure your server is configured to use chunked transfer encoding. This lets it send progress updates in small, incremental chunks instead of waiting for the entire task to finish. You’ll need to set these response headers:

• Transfer-Encoding: chunked
• Cache-Control: no-cache (prevents browsers from buffering the response)
• Content-Type: text/plain (since we’re sending plain text progress values)

Also, every time you send a progress update from the server, you need to flush the output buffer (e.g., res.flush() in Node.js, ob_flush() + flush() in PHP) to ensure the data gets sent immediately to the client.

Client-Side Implementation with XHR #

This approach leverages XHR’s readyState=LOADING state to listen for incremental response data. We’ll track how much of the response we’ve already processed to avoid re-handling the same progress updates.

Here’s a complete example that includes file upload + progress streaming:

// Assume `file` is the File object from a file input
const formData = new FormData();
formData.append('upload', file);

const xhr = new XMLHttpRequest();
let lastProcessedPosition = 0; // Tracks where we left off reading the response

// Open the POST request to your endpoint
xhr.open('POST', '/thing/', true);

// Listen for incremental response data
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.LOADING) {
    // Grab only the new content we haven't processed yet
    const newContent = xhr.responseText.slice(lastProcessedPosition);
    
    if (newContent) {
      // Split by newlines and filter out empty lines (in case of trailing newlines)
      const progressUpdates = newContent.split('\n').filter(line => line.trim() !== '');
      
      // Process each progress update (update UI, log, etc.)
      progressUpdates.forEach(progress => {
        console.log('Current task progress:', progress);
        // Example: Update a progress bar or display the number on the page
        // document.getElementById('progress').textContent = `${progress}%`;
      });
      
      // Update our position marker for the next iteration
      lastProcessedPosition = xhr.responseText.length;
    }
  } else if (xhr.readyState === XMLHttpRequest.DONE) {
    // Task is fully complete—clean up or show a success message
    console.log('Long-running task finished!');
  }
};

// Optional: Track file upload progress (separate from task progress)
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const uploadProgress = Math.round((e.loaded / e.total) * 100);
    console.log('File upload progress:', `${uploadProgress}%`);
  }
};

// Send the request with the uploaded file
xhr.send(formData);

Why This Is More Compatible #

Unlike ReadableStream (which is still marked as experimental in some environments and unsupported in IE entirely), XHR’s readyState handling is a mature, standardized API that works in every browser released in the last decade. It’s battle-tested and avoids the compatibility gaps you might hit with the newer stream APIs.

Bonus: Server-Side Example (Node.js/Express) #

Just to tie it all together, here’s a simple server endpoint that simulates a long-running task and sends chunked progress updates:

const express = require('express');
const multer = require('multer'); // For handling file uploads
const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/thing/', upload.single('upload'), (req, res) => {
  // Set chunked transfer headers
  res.setHeader('Transfer-Encoding', 'chunked');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Content-Type', 'text/plain');

  let currentProgress = 0;
  const progressInterval = setInterval(() => {
    // Simulate progress increments (adjust as needed for your real task)
    currentProgress += Math.floor(Math.random() * 12);
    
    if (currentProgress >= 100) {
      currentProgress = 100;
      clearInterval(progressInterval);
      res.write('100\n');
      res.end(); // Close the connection once done
    } else {
      res.write(`${currentProgress}\n`);
      res.flush(); // Ensure the chunk is sent immediately
    }
  }, 300); // Simulate 300ms intervals between updates
});

app.listen(3000, () => console.log('Server running on port 3000'));

This setup will give you the real-time, line-separated progress updates you need, with far better browser support than the experimental stream APIs.

内容的提问来源于stack exchange，提问作者jstaab