1. 短轮询
前端固定时间间隔(如每 5 秒)发送 HTTP 请求,获取最新数据。
服务器不管有没有新数据,都返回响应,前端定时继续请求。
function shortPolling() {setInterval(() => {fetch("/api/data").then((res) => res.json()).then((data) => console.log("短轮询数据:", data)).catch((err) => console.error("请求失败:", err));}, 5000); // 每 5 秒请求一次
}shortPolling();
📌 短轮询特点:
✨简单易实现,无状态管理要求。
✨高服务器负载,即使没有新数据,也会不断发送请求。
✨ 数据更新不及时,下次请求前可能已有新数据,但要等到下一次轮询才能获取。
2. 长轮询
前端发送请求后,服务器保持连接,直到有新数据再返回(或者超时)。
前端收到数据后,立即发送下一个请求,保持“伪实时”更新。
function longPolling() {fetch("/api/data").then((res) => res.json()).then((data) => {console.log("长轮询数据:", data);longPolling(); // 立即发起下一个请求}).catch((err) => {console.error("请求失败:", err);setTimeout(longPolling, 3000); // 失败后 3 秒后重试});
}longPolling();
📌 长轮询特点
✨减少无效请求,服务器只有新数据时才返回,降低流量消耗。
✨ 数据更新更及时,服务器可以实时推送新数据。
✨服务器仍需保持连接,但相比短轮询性能更优。
3. 使用场景
短轮询:适合数据更新不频繁,且服务器不支持长连接的情况,但会增加服务器压力。
长轮询:适合数据需要实时更新的情况,性能比短轮询更优,但仍然占用服务器连接。