Express.js中使用res.write()方法时，如何确保数据流正确传输而不被缓存？

Question

在Express.js中使用`res.write()`方法时，如何避免数据流被浏览器缓存，确保客户端接收到的是最新数据？这是一个常见的技术问题。当使用`res.write()`分块传输数据时，如果HTTP响应头未正确设置，浏览器可能会缓存数据，导致客户端接收陈旧信息。为解决此问题，需在发送数据前，通过设置`Cache-Control`、`Pragma`和`Expires`等响应头来禁用缓存。例如：`res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');`。此外，确保使用`res.flushHeaders()`方法尽早发送响应头，优化数据流传输效率。最后，在数据传输完成后调用`res.end()`结束响应，以保证整个流程的完整性。这种处理方式特别适用于实时数据流场景，如日志流或事件推送。

Answer 1

1. 问题概述：Express.js 中的缓存问题

在 Express.js 中，`res.write()` 方法用于分块传输数据流。然而，如果 HTTP 响应头未正确设置，浏览器可能会缓存这些数据，导致客户端接收不到最新信息。这是一个常见的技术问题，尤其是在实时数据流场景中（如日志流或事件推送）。

为了确保客户端接收到的是最新数据，必须采取措施禁用浏览器缓存，并优化数据流传输效率。

2. 分析过程：为什么会出现缓存问题？

浏览器缓存机制依赖于 HTTP 响应头中的字段，例如 `Cache-Control`、`Pragma` 和 `Expires`。如果这些字段未明确指示禁用缓存，浏览器会根据其默认策略存储响应内容。当使用 `res.write()` 发送分块数据时，这种缓存行为可能导致客户端接收陈旧信息。

以下是缓存问题的主要原因：

• 未设置正确的缓存控制头。
• 浏览器默认缓存策略生效。
• 数据流传输过程中延迟较高。

因此，在发送数据前，必须显式配置 HTTP 响应头以禁用缓存。

3. 解决方案：如何避免缓存问题？

以下是解决缓存问题的具体步骤：

1. 设置缓存控制头：通过 `res.setHeader()` 方法，添加以下响应头：

res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
res.setHeader('Pragma', 'no-cache');
res.setHeader('Expires', '0');
    

这些头字段的作用分别是：

字段	作用
`Cache-Control`	指示浏览器和代理服务器不要缓存响应。
`Pragma`	兼容 HTTP/1.0 的缓存禁用指令。
`Expires`	设置过期时间为当前时间之前，确保立即失效。

此外，为优化数据流传输效率，可以使用 `res.flushHeaders()` 方法尽早发送响应头：

res.writeHead(200, { 'Content-Type': 'text/plain' });
res.flushHeaders();
    

最后，在数据传输完成后调用 `res.end()` 结束响应，确保流程完整性。

4. 实际应用：代码示例

以下是一个完整的代码示例，展示如何在 Express.js 中使用 `res.write()` 并避免缓存问题：

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

app.get('/stream', (req, res) => {
    res.setHeader('Cache-Control', 'no-store, no-cache, must-revalidate, proxy-revalidate');
    res.setHeader('Pragma', 'no-cache');
    res.setHeader('Expires', '0');
    res.writeHead(200, { 'Content-Type': 'text/plain' });
    res.flushHeaders();

    const interval = setInterval(() => {
        res.write(new Date().toISOString() + '\n');
    }, 1000);

    setTimeout(() => {
        clearInterval(interval);
        res.end();
    }, 10000);
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));
    

此代码实现了一个简单的日志流服务，每秒向客户端发送一次当前时间戳，并在 10 秒后结束响应。

5. 流程图：数据流处理逻辑

sequenceDiagram
        participant Client
        participant Server
        Client->>Server: GET /stream
        Server->>Client: Set Headers (Cache-Control, Pragma, Expires)
        Server->>Client: Flush Headers
        loop Every 1 second
            Server->>Client: Write Data Chunk
        end
        Server->>Client: End Response