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 and I think the problem is caused by sending multiple headers every time there is an update to the progress bar, but how do I send information about how the function is progressing to the user (so that the progress bar updates) without sending a header, too? I tried res.write() as suggested here但是那个让进度条页面超时，没有更新。

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} 以获取更新状态实用程序，它表示作业完成状态。

希望对您有所帮助。

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

ERR_HTTP_HEADERS_SENT when sending progressbar update (node.js/express)

javascript

node.js

express

progress-bar

tesseract.js