Node.js环境下如何用JavaScript实现HTML div随JSON更新自动刷新

方案1：前端轮询（零服务端改造，快速实现） #

不需要修改你现有的Node服务代码，只需要在HTML文件中新增定时拉取逻辑即可：

• 保留你原有的JSON读取、表格渲染逻辑，将其封装为独立函数
• 新增定时器定期拉取最新JSON，对比数据变化后更新指定ID的DIV内容

// 假设你的表格容器ID为 table-container
async function renderTable() {
  // 替换为你实际的JSON文件路径
  const res = await fetch('/your-data.json')
  const newData = await res.json()
  // 数据未变化则跳过渲染，减少性能消耗
  if (window.lastData && JSON.stringify(newData) === JSON.stringify(window.lastData)) {
    return
  }
  window.lastData = newData
  // 此处替换为你原有生成表格HTML的逻辑
  const tableHTML = 你原有的表格生成代码
  document.getElementById('table-container').innerHTML = tableHTML
}

// 页面首次加载执行渲染
renderTable()
// 每3秒拉取一次数据，可根据需求调整间隔时长
setInterval(renderTable, 3000)

这个方案实现成本最低，适合需求不高的场景，仅需注意调整轮询间隔平衡实时性和请求冗余度。

方案2：SSE主动推送（高效实时，无冗余请求） #

通过服务端主动推送更新通知的方式实现秒级刷新，没有多余请求，需要修改服务端代码：

第一步：修改Node服务代码 #

新增SSE接口用于维持长连接，同时提供更新通知触发函数：

const http = require('http');
const path = require('path');
const fs = require('fs'); // 你原代码漏了引入fs，补上

// 存储所有已连接的客户端实例
const connectedClients = []

const browser = http.createServer(function (request, response) {
    // 新增SSE长连接接口
    if (request.url === '/update-notice') {
      response.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive'
      })
      // 将当前连接加入客户端列表
      connectedClients.push(response)
      // 客户端断开连接时移除实例
      request.on('close', () => {
        const index = connectedClients.indexOf(response)
        if (index !== -1) connectedClients.splice(index, 1)
      })
      return
    }

    // 原有的静态文件服务逻辑保持不变
    var filePath = '.' + request.url;
    if (filePath == './') {
        filePath = './Table.html';
    }

    var extname = String(path.extname(filePath)).toLowerCase();
    var mimeTypes = {
        '.html': 'text/html',
        '.css': 'text/css',
        '.png': 'image/png',
        '.js': 'text/javascript',
        '.json': 'application/json'
    };

    var contentType = mimeTypes[extname] || 'application/octet-stream';

    fs.readFile(filePath, function(error, content) {
        response.writeHead(200, { 'Content-Type': contentType });
        response.end(content, 'utf-8');
    });
}).listen(3000);

// 新增：触发所有前端更新的函数
function notifyAllClients() {
  connectedClients.forEach(client => {
    client.write('data: update\n\n')
  })
}

// 你原有写入JSON文件的逻辑，写入完成后调用notifyAllClients即可触发前端刷新
// 示例：
/*
fs.writeFile('./your-data.json', JSON.stringify(处理后的API数据), (err) => {
  if (!err) notifyAllClients()
})
*/

第二步：修改前端代码 #

监听服务端的更新通知，收到通知后重新渲染表格即可：

async function renderTable() {
  const res = await fetch('/your-data.json')
  const newData = await res.json()
  const tableHTML = 你原有的表格生成代码
  document.getElementById('table-container').innerHTML = tableHTML
}

// 首次加载渲染
renderTable()
// 监听服务端推送的更新消息
const sse = new EventSource('/update-notice')
sse.onmessage = () => {
  renderTable()
}

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