Express.js路由如何分阶段发送内容 解决ERR_HTTP_HEADERS_SENT报错

错误原因 #

你遇到的ERR_HTTP_HEADERS_SENT错误和页面加载状态无关，是HTTP协议本身的特性导致的：res.send方法执行时会自动发送响应头、写入响应体并直接终止当前HTTP响应，同一个请求的响应只能发送一次，所以你1秒后第二次调用res.send时就会触发该错误。

需求可行性判断 #

你要求的「不下发HTML/JS/CSS脚本、仅靠服务端纯路由实现间隔1000毫秒分批发送内容、自动更新页面」的需求不可行：

• 普通HTTP响应是一次性的，即便你用Transfer-Encoding: chunked分片返回内容，浏览器默认也会等待所有分片接收完成后才会渲染完整页面，不会动态更新已渲染的内容
• 不存在res.execute_js这类服务端直接触发客户端执行JS的能力，HTTP是请求-响应模式的单工协议，服务端只能被动响应客户端的请求，没有主动控制客户端行为的权限。

如果允许客户端侧存在基础的JS接收逻辑（不需要动态下发脚本，可提前写在页面里），可以用以下两种方案实现服务端主动推送：

方案1：Server-Sent Events（SSE） #

SSE是HTTP协议自带的服务端单向推送能力，实现简单，适合单向推送场景。

服务端代码： #

const express = require('express');
const app = express();

app.get('/r', (req, res) => {
  // 设置SSE专属响应头
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  // 发送第一批内容
  res.write('data: a\n\n');
  // 1秒后发送第二批内容
  setTimeout(() => {
    res.write('data: fter\n\n');
    // 结束推送
    res.end();
  }, 1000);
});

app.listen(8080);

客户端代码（提前写在页面中即可）： #

const eventSource = new EventSource('/r');
eventSource.onmessage = (event) => {
  // 追加内容到页面
  document.body.innerText += event.data;
  // 可直接执行你需要的逻辑，比如postMessage
  // postMessage(1);
};

方案2：WebSocket #

如果需要双向交互，可以用WebSocket实现全双工通信，常用库为socket.io，相比SSE可以实现客户端主动发消息给服务端，适合复杂交互场景。

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