Node.js服务端如何实现单请求多响应？流式推送Twitter推文至浏览器

你遇到的问题本质是普通HTTP请求的「请求-响应」模型限制——默认情况下，服务器返回一次响应后就会关闭连接，没法持续推送数据。但针对这种“服务器主动向浏览器持续推送内容”的场景，有两种成熟的解决方案，其中**Server-Sent Events（SSE）**因为轻量、基于HTTP协议，最适合你这种流式推送推文的需求。

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

SSE是专门为“服务器单向推送数据到客户端”设计的HTTP标准，它允许服务器在保持单个HTTP连接的前提下，多次向客户端发送数据。

后端路由实现（以Express为例） #

你需要修改路由，设置SSE专属的响应头，并保持连接不关闭，每次拿到推文就按SSE格式发送：

app.get('/stream-tweets', async (req, res) => {
  // 配置SSE响应头，告诉浏览器这是一个事件流
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache'); // 禁止缓存
  res.setHeader('Connection', 'keep-alive');
  res.flushHeaders(); // 立即发送响应头，建立长连接

  // 替换成你实际的Twitter API流式连接逻辑
  const tweetStream = await connectToTwitterStreamingAPI();

  // 监听新推文事件，拿到后立即推送给浏览器
  tweetStream.on('data', (rawTweet) => {
    const tweet = JSON.parse(rawTweet);
    // 按SSE格式发送数据：以`data: `开头，结尾加两个换行符
    res.write(`data: ${JSON.stringify(tweet)}\n\n`);
  });

  // 处理客户端断开连接的情况，清理流式连接资源
  req.on('close', () => {
    console.log('客户端断开连接，关闭Twitter流');
    tweetStream.destroy();
    res.end();
  });
});

前端接收代码 #

浏览器原生支持EventSource API，用来接收SSE推送：

// 建立SSE连接
const tweetStream = new EventSource('/stream-tweets');

// 监听服务器推送的消息
tweetStream.onmessage = (event) => {
  const tweet = JSON.parse(event.data);
  // 将推文添加到页面展示
  const tweetCard = document.createElement('div');
  tweetCard.className = 'tweet-card';
  tweetCard.innerHTML = `<h3>${tweet.user.name}</h3><p>${tweet.text}</p>`;
  document.getElementById('tweets-container').appendChild(tweetCard);
};

// 处理连接错误
tweetStream.onerror = (error) => {
  console.error('推文流连接出错:', error);
  tweetStream.close();
};

方案二：WebSocket（双向通信场景可选） #

如果你之后需要客户端向服务器发送消息（比如用户设置关键词过滤），可以用WebSocket——它是双向通信的协议，也能实现持续推送。不过如果只是单向推推文，SSE会更简单。

后端示例（用ws库） #

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

wss.on('connection', async (ws) => {
  const tweetStream = await connectToTwitterStreamingAPI();
  
  tweetStream.on('data', (rawTweet) => {
    const tweet = JSON.parse(rawTweet);
    ws.send(JSON.stringify(tweet)); // 推送给客户端
  });

  // 客户端断开时清理资源
  ws.on('close', () => {
    tweetStream.destroy();
  });
});

前端示例 #

const ws = new WebSocket('ws://localhost:8080');

ws.onmessage = (event) => {
  const tweet = JSON.parse(event.data);
  // 展示推文逻辑同SSE示例
};

ws.onerror = (error) => {
  console.error('WebSocket连接出错:', error);
  ws.close();
};

关键注意事项 #

1. 资源清理：一定要监听客户端的断开事件（req.on('close')或ws.on('close')），关闭Twitter API的流式连接，避免内存泄漏。
2. SSE自动重连：EventSource默认会在连接断开后自动重试，如果你不需要这个特性，可以在服务器发送event: close\n\n事件，前端监听后手动关闭。
3. 跨域问题：如果前端和后端不在同一域名，需要在后端配置CORS允许SSE/WebSocket请求。

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