如何在Express中保持客户端-服务器连接，实现Firebase实时数据推送？

问题根源 #

• HTTP POST属于短连接的请求-响应模式，客户端会阻塞等待响应返回后才执行后续代码，且res.send()会直接关闭连接，无法实现持续推送。

最优方案：使用Server-Sent Events (SSE) #

SSE是HTTP协议的原生扩展，支持服务器单向持续向客户端推送数据，连接保持开放，无需客户端轮询，完美匹配你的需求。

服务器端（Express）代码修改 #

将原POST接口改为GET（SSE标准用GET），设置SSE响应头，用res.write()而非res.send()发送数据（后者会关闭连接）：

app.get('/generateRealtimeUpdatesStudent', function(req, res) {
  // 配置SSE响应头，保持连接开放
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 从GET参数获取用户ID
  const currentUser = req.query.currentUser;

  // 监听Firebase数据变化
  const unsubscribe = db.collection('Messaging')
    .where('Users', 'array-contains', currentUser)
    .onSnapshot((querySnap) => {
      const change = querySnap.docChanges()[0];
      if (!change) return;
      
      const doc = change.doc;
      const data = doc.data();
      const updateData = {
        id: doc.id,
        User1: data.User1,
        User2: data.User2,
        Users: data.Users,
        Last: data.Last,
        Created: data.Created,
        User1Messages: data.User1Messages,
        User2Messages: data.User2Messages
      };

      // 按SSE格式发送数据，必须以"data: "开头，"\n\n"结尾
      res.write(`data: ${JSON.stringify(updateData)}\n\n`);
      // 强制刷新缓冲区，确保数据立即发送到客户端
      res.flush();
    }, (err) => {
      console.error(err);
      res.write(`data: ${JSON.stringify({Error:"yes"})}\n\n`);
      res.flush();
      res.end();
    });

  // 客户端断开连接时，取消Firebase监听，避免内存泄漏
  req.on('close', () => {
    unsubscribe();
    res.end();
  });
});

客户端代码修改 #

使用原生EventSource创建异步连接，无需阻塞等待，每次收到服务器推送时触发处理函数：

const currentUser = auth.currentUser.uid;
// 初始化SSE连接
const sseConnection = new EventSource(`/generateRealtimeUpdatesStudent?currentUser=${currentUser}`);

// 接收服务器推送的新数据
sseConnection.onmessage = function(event) {
  const data = JSON.parse(event.data);
  if (data.Error) {
    console.error('实时更新失败:', data);
    sseConnection.close();
    return;
  }
  // 每次收到新数据时执行你的业务逻辑
  someFunctionThatCallsEveryTimeTheServerSendsToClientNewStuff(data);
};

// 处理连接错误
sseConnection.onerror = function(error) {
  console.error('SSE连接异常:', error);
  sseConnection.close();
};

方案优势 #

• 无阻塞：EventSource是异步初始化，页面其他JS代码可正常执行，不会被阻塞。
• 持续推送：连接保持开放，Firebase每次数据变化都会实时推送给客户端，无需重复发起请求。
• 自动重连：EventSource默认会在连接意外断开后自动尝试重连，无需手动处理。

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