Node.js端REST API批处理任务如何向前端返回进度反馈实现进度条？

以下是3种生产环境常用的实现方式，你可以根据业务场景选择：

方案1：Server-Sent Events (SSE) （最适配单向进度推送场景） #

SSE是HTTP协议原生支持的单向流式推送机制，对现有REST API改造量极小，不需要引入额外通信协议，是进度推送场景的首选方案。

• 服务端核心代码（Express示例）：

app.get('/batch/run', async (req, res) => {
  // 配置SSE必要响应头
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });

  // 替换为实际批处理任务的总规模
  const totalTask = getBatchTotal();
  let completed = 0;

  // 批处理任务执行逻辑
  const batchProcess = setInterval(() => {
    // 替换为实际任务执行后的已完成量统计
    completed += runSingleTask();
    
    if (completed >= totalTask) {
      // 任务完成推送结束标识
      res.write(`data: ${JSON.stringify({ progress: 100, status: 'finished' })}\n\n`);
      clearInterval(batchProcess);
      res.end();
      return;
    }
    // 间歇推送当前进度
    res.write(`data: ${JSON.stringify({ 
      progress: Math.round((completed/totalTask)*100), 
      status: 'running' 
    })}\n\n`);
  }, 1000);

  // 处理前端主动断开连接
  req.on('close', () => {
    clearInterval(batchProcess);
    res.end();
  });
});

• 前端核心代码：

const eventSource = new EventSource('/batch/run');
eventSource.onmessage = (event) => {
  const resData = JSON.parse(event.data);
  // 直接更新进度条数值
  progressBar.value = resData.progress;
  if (resData.status === 'finished') {
    eventSource.close();
    // 补充任务完成后的后续逻辑
  }
};
eventSource.onerror = (err) => {
  eventSource.close();
  // 补充错误处理逻辑
};

• 优点：协议轻量无额外依赖，浏览器原生支持自动重连，服务端改造成本极低
• 缺点：仅支持单向推送，单域名下浏览器默认最大并发6个SSE连接

方案2：任务ID+短轮询 （实现成本最低的兼容方案） #

适合对实时性要求不高、需要兼容老旧浏览器的场景，逻辑简单不易出错。

• 实现逻辑：
  • 提交批处理任务的接口收到请求后，立即生成唯一taskId返回给前端，后台异步执行批处理任务
  • 用内存/Redis存储每个taskId对应的进度数据，任务执行过程中实时更新
  • 额外提供进度查询接口GET /batch/progress?taskId=xxx，返回对应任务的当前进度
  • 前端拿到taskId后，每1-2秒调用一次进度查询接口更新进度条，直到接口返回任务完成状态

• 优点：全浏览器兼容，无并发限制，逻辑简单调试成本极低
• 缺点：进度存在1-2秒的延迟，高频轮询会带来额外的服务端压力

方案3：WebSocket （适合需要双向交互的复杂场景） #

如果你的业务除了进度推送之外，还需要支持前端主动发送暂停、取消批处理等指令，可以选择WebSocket实现全双工通信。

• 服务端核心代码（基于ws库实现）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    const reqData = JSON.parse(message);
    // 处理前端发起的批处理启动请求
    if (reqData.type === 'start_batch') {
      const totalTask = getBatchTotal(reqData.taskParams);
      let completed = 0;
      const batchProcess = setInterval(() => {
        completed += runSingleTask();
        if (completed >= totalTask) {
          ws.send(JSON.stringify({ progress: 100, status: 'finished' }));
          clearInterval(batchProcess);
          return;
        }
        ws.send(JSON.stringify({ progress: Math.round((completed/totalTask)*100), status: 'running' }));
      }, 1000);
      // 支持前端发起任务取消请求
      ws.on('message', (msg) => {
        const action = JSON.parse(msg);
        if (action.type === 'cancel_batch') {
          clearInterval(batchProcess);
          ws.send(JSON.stringify({ status: 'canceled' }));
        }
      });
    }
  });
});

• 优点：支持双向通信，可满足复杂交互需求，实时性最高无额外HTTP开销
• 缺点：需要额外维护WebSocket服务，增加架构复杂度，需自行实现心跳、重连等异常处理逻辑

选型参考 #

• 仅需单向推送进度的场景优先选SSE，改造量最小性能足够
• 兼容老旧浏览器、对实时性要求不高的场景选短轮询
• 有暂停、取消任务等双向交互需求的场景选WebSocket

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