本文介绍在客户端 html 页面中安全、高效地获取 aws 服务器上持续更新的后台文本文件（如实时日志或计算结果），并通过 javascript 动态渲染，重点讲解基于 `fetch` 的轮询方案及 websocket 实时替代方案。
在典型的前后端分离架构中，浏览器（客户端）无法直接访问服务器文件系统（如使用 Node.js 的 fs 模块），这是由同源策略与运行环境隔离决定的——fs 仅在 Node.js 服务端可用，而纯 HTML/JS 页面在用户浏览器中执行，无权读取远程服务器磁盘路径。因此，必须通过 HTTP 接口作为“桥梁”，将后端文件内容暴露为可被前端安全请求的资源。
✅ 推荐方案一：使用 fetch 实现轻量级轮询（适合中小频率更新）
假设你的 AWS 服务器已通过 Nginx 或 Apache 将存放数据的目录（例如 /var/www/html/data/latest.txt）配置为静态可访问路径（如 https://your-domain.com/data/latest.txt），你只需确保该 .txt 文件具有正确的读取权限（如 chmod 644）且 Web 服务器已启用对应 MIME 类型支持。
前端 HTML 中嵌入如下 JavaScript 即可每 5 秒拉取最新内容并更新页面：
<!DOCTYPE html> <html> <head><title>实时数据显示</title></head> <body> <h2>当前数据：</h2> <pre class="brush:php;toolbar:false;" id="data-display">加载中...<script> const displayEl = document.getElementById('data-display'); const DATA_URL = 'https://your-domain.com/data/latest.txt'; // 替换为实际 URL async function fetchData() { try { const response = await fetch(DATA_URL, { cache: 'no-store', // 强制不缓存，确保获取最新版本 headers: { 'Cache-Control': 'no-cache' } }); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } const text = await response.text(); displayEl.textContent = text; } catch (err) { console.error('数据获取失败：', err); displayEl.textContent = '❌ 数据加载失败，请检查网络或服务状态'; } } // 首次立即加载 + 每 5 秒轮询一次 fetchData(); setInterval(fetchData, 5000); </script>
