Node.js with Express框架下页面动态数据自动实时更新方案问询

问题根因 #

你当前使用的是服务端模板渲染逻辑，仅在用户首次请求页面时，会把当时的number值注入到HTML中返回给前端，页面加载完成后前端和服务端无后续通信，因此服务端的number更新无法同步到已渲染的前端页面，必须手动刷新页面触发重新渲染才能拿到最新值。

可选实现方案 #

方案1：前端定时拉取（最轻量化，适配你的场景） #

无需引入任何重型前端框架，仅需加1个接口+少量前端JS即可实现，逻辑如下：

1. 新增Express接口，专门返回最新的数值数据

app.get('/api/latest-data', async (req, res) => {
  res.json({ number: number });
});

2. 在你的base.html.twig模板中添加数值展示容器和更新逻辑：

{# 原有模板中添加展示容器 #}
<p>当前数值：<span id="num-container">{{ data }}</span></p>

{# 底部添加前端JS逻辑 #}
<script>
document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('num-container');
  // 按你的数据更新频率设置拉取间隔，和服务端更新频率对齐即可
  setInterval(async () => {
    const resp = await fetch('/api/latest-data');
    const result = await resp.json();
    container.textContent = result.number;
  }, 5000);
});
</script>

这个方案本质就是你提到的AJAX方案，实现成本极低，完全适配你目前每30秒/5秒更新数据的场景。

方案2：WebSocket主动推送（适合高实时性场景） #

如果后续需要更低延迟的数据同步，可以用Socket.io这类WebSocket库，服务端在数据更新时主动给所有在线前端推送新值，无需前端定时轮询，节省请求资源，但实现复杂度比方案1略高。

关于类Angular框架的说明 #

Angular这类前端框架的双向绑定仅实现前端本地变量和页面视图的同步，并不会自动完成服务端到前端的数据同步，哪怕你切换到Angular/React/Vue这类框架，最终还是要通过HTTP请求或者WebSocket和服务端通信才能拿到最新数据，不存在完全省略通信逻辑就能自动同步服务端数据的方案。

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