本文介绍在客户端 html 页面中安全、高效地拉取 aws 服务器上持续更新的后台文本文件（如传感器日志、状态报告等），并解析渲染到网页——核心方案是使用浏览器原生 `fetch()` 发起跨域 http 请求，配合定时轮询与 dom 更新，无需 node.js 后端或复杂框架。
要在静态 HTML 页面中展示由后台服务（例如运行在 AWS EC2 上的 Python/Shell 脚本）持续写入的 .txt 文件最新内容，关键在于分离职责：前端（浏览器）不直接访问服务器文件系统（fs 不可用），而应通过 HTTP 接口间接获取数据。以下是推荐的生产就绪方案：
✅ 推荐方案：HTTP 轮询 + fetch()（轻量、易部署、零依赖）
假设你的文本文件已通过 Web 服务器（如 Nginx 或 Apache）公开为可访问的 URL（例如 https://your-domain.com/data/latest.log），且已正确配置 CORS（见下文注意事项），即可在 HTML 中嵌入如下 JavaScript：
<!DOCTYPE html>
<html>
<head><title>实时数据看板</title></head>
<body>
<h2>最新状态数据</h2>
<pre id="data-display">加载中...</pre>
<script>
const displayEl = document.getElementById('data-display');
const DATA_URL = 'https://your-domain.com/data/latest.log'; // 替换为实际路径
async function fetchAndRender() {
try {
const response = await fetch(DATA_URL, {
cache: 'no-store', // 禁用缓存，确保获取最新内容
headers: { 'Accept': 'text/plain' }
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const text = await response.text();
displayEl.textContent = text;
} catch (err) {
displayEl.textContent = `❌ 获取失败: ${err.message}`;
}
}
// 首次加载 + 每 5 秒轮询一次（可根据业务调整间隔）
fetchAndRender();
setInterval(fetchAndRender, 5000);
</script>
</body>
</html>? 提示：若需结构化处理（如 CSV/JSON 格式），可在服务端将 .txt 改为生成标准 JSON，并用 response.json() 解析；或在前端用 text.split('\n') 按行分割原始文本。
⚠️ 关键注意事项（避免踩坑）
-
CORS 必须启用：浏览器会阻止跨域请求。在 Nginx 配置中添加：
location /data/ { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET'; add_header 'Access-Control-Allow-Headers' 'Content-Type'; # 生产环境建议将 '*' 替换为具体域名，如 'https://your-app.com' } - 文件权限与 Web 可读性：确保 .txt 文件对 Web 服务器用户（如 www-data）可读，且位于 Web 根目录下（如 /var/www/html/data/latest.log）。
- 避免缓存陷阱：务必设置 cache: 'no-store' 或在 URL 后加时间戳参数（?t=${Date.now()}），否则浏览器可能返回旧缓存。
- 轮询频率权衡：高频轮询（如 <1s）会增加服务器压力；低频（如 >30s）影响实时性。建议从 5–10 秒起步，根据数据更新节奏优化。
- 错误降级处理：示例中已包含 try/catch 和 UI 错误提示，生产环境可进一步记录到 console.error 或上报监控系统。
? 替代方案对比
| 方案 | 适用场景 | 复杂度 | 实时性 | 备注 |
|---|---|---|---|---|
| HTTP 轮询 (fetch) | 数据更新频率中低（秒级）、简单部署 | ★☆☆☆☆ | 中（延迟 = 轮询间隔） | 推荐首选，兼容性好（IE11+） |
| Server-Sent Events (SSE) | 单向推送、高实时性（毫秒级）、服务端支持流式响应 | ★★☆☆☆ | 高 | 需后端支持 text/event-stream，Nginx 需额外配置代理缓冲 |
| WebSocket | 双向通信、极高实时性、复杂交互 | ★★★★☆ | 极高 | 需独立 WebSocket 服务（如 Node.js + Socket.IO），运维成本显著上升 |
? 总结：对于“后台脚本写文件 → 前端展示”的典型场景，基于 fetch() 的 HTTP 轮询是最简洁、可靠、易维护的起点。它不依赖额外服务、不修改现有文件写入逻辑，仅需 Web 服务器暴露静态资源并配置 CORS，即可快速上线。后续如需更高实时性或双向能力，再平滑升级至 SSE 或 WebSocket。
