发送进度条更新时的 ERR_HTTP_HEADERS_SENT (node.js/express)

Question

我正在尝试制作进度条来监控 Tesseract.recognize() 调用，但是当我尝试发送更新以更改进度条时，我收到此错误：

[ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

这是在 routes.js 文件中运行的内容：

Tesseract.recognize(
    '/app/'+statistic.path_out_new
    ,'eng'
    , { logger: m => {
        console.log(m);
         res.render('pages/uploadPicture.ejs', {
              user : req.user
              ,progress : m
         });   
    } }
)

.then(({ data: { text } }) => {
    res.render('pages/uploadPage.ejs', {
        user : req.user
        ,progress : text
    });  
});

这里是来自 EJS 模板的 HTML 的相关部分，uploadPage.ejs：

<section><div></div><progress value="<%=progress.progress%>" text="<%=progress.status%>" /></section>

我已阅读this question 并且我认为问题是由于每次进度条有更新时发送多个标题引起的，但是我如何向用户发送有关函数如何进行的信息（以便进度条更新）也没有发送标题？我按照here 的建议尝试了 res.write() ，但这让进度条页面超时，而不是更新。

Answer 1

你不能只通过res:res.render目的是一次发送所有结果然后关闭HTTP请求（连接可以保持打开以保持活动状态）。显示作业进度的最佳选择是 WebSocket。

在不使用 WebSockets 的情况下对您的代码稍作改进：

var status = {}

app.get("/update/:id", (req, res) => res.json(status[req.params.id]));

app.get("/tesseract", (req, res) => {
  const id = ... ; // here generate a unique job id

  Tesseract.recognize('/app/'+statistic.path_out_new, 'eng', { logger: m => {
    // here update status[id] reflecting the progress
  }}).then(data => {
    // here update status[id] reflecting the end of the job
  });

  res.render("pages/uploadPage.ejs", { id, user: req.user });
});

呈现的页面应在 ajax 中调用（在 setTimeout 下）/update/${id} 以获取更新的状态工具，它表示作业完成状态。

希望这会有所帮助。