Express.js：后端数据库内容变更时如何触发前端页面刷新？

*HTTP 协议是无状态的单向请求协议，只有客户端主动发起请求时，服务端才能返回对应响应。你之前用的res.redirect只能作用于当前发起POST请求的客户端，其余在线客户端和服务端没有活跃的请求连接，服务端无法主动向这些客户端下发刷新指令，这就是你现有方案失效的核心原因。

这种方案不需要修改你的基础请求逻辑，只需要新增消息拉取接口，客户端定时拉取最新消息更新页面即可，不需要刷新整个页面。

服务端修改点 #

1. 首先修复现有/messageReciever接口的问题：你当前的接口没有返回任何响应，会导致客户端请求超时挂起，需要补充响应逻辑

app.post("/messageReciever", (req, res) => {
  logMessage(req.body.message);
  res.json({success: true}); // 新增响应
});

2. 新增消息查询接口，返回历史消息列表

app.get("/messages", (req, res) => {
  res.json(retrieveMessages());
});

客户端修改点 #

移除全局页面刷新逻辑，新增定时任务拉取最新消息，直接更新页面DOM即可：

// 每2秒拉一次最新消息，更新页面
setInterval(async () => {
  const res = await fetch('/messages');
  const messages = await res.json();
  // 替换为你的页面消息列表DOM更新逻辑，示例如下：
  document.querySelector('#message-list').innerHTML = messages.map(msg => `<li>${msg}</li>`).join('');
}, 2000);

如果要实现消息实时到达，不需要定时轮询，可以基于Socket.IO实现双向通信，服务端收到消息后可以直接广播给所有在线客户端。

服务端集成Socket.IO示例 #

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);

// 原有路由逻辑保留
app.post("/messageReciever", (req, res) => {
  logMessage(req.body.message);
  // 收到消息后广播给所有已连接的客户端
  io.emit('newMessage', req.body.message);
  res.json({success: true});
});

// 监听Socket连接
io.on('connection', (socket) => {
  console.log('新用户接入');
});

server.listen(3000, () => {
  console.log('服务启动在3000端口');
});

客户端集成示例 #

不需要定时轮询，监听服务端的新消息通知直接更新页面即可：

<!-- 页面引入Socket.IO客户端 -->
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
// 监听新消息通知
socket.on('newMessage', (msg) => {
  const li = document.createElement('li');
  li.textContent = msg;
  document.querySelector('#message-list').appendChild(li);
});
</script>

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