如何让ESP32开发的Web服务器页面自动刷新？

方法1：HTML meta标签自动刷新 #

在返回的HTML页面<head>中添加meta标签，指定固定刷新间隔，比如每5秒刷新一次：

<head>
    <meta http-equiv="refresh" content="5"> <!-- 数值为刷新间隔（秒） -->
</head>

这种方法实现最简单，适合对实时性要求不高、仅需定期刷新的场景。

方法2：JavaScript定时刷新/局部更新 #

用JS定时触发页面刷新，灵活性更强；如果不想全页刷新，也可以通过AJAX请求更新页面局部内容：

全页定时刷新 #

<script>
    // 每3秒刷新一次页面
    setInterval(() => {
        window.location.reload();
    }, 3000);
</script>

局部内容更新（避免全页卡顿） #

<div id="dynamic-content">待更新内容</div>

<script>
    setInterval(() => {
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                document.getElementById("dynamic-content").innerHTML = xhr.responseText;
            }
        };
        xhr.open("GET", "/get-updated-data", true); // 替换为ESP32提供数据的接口
        xhr.send();
    }, 2000);
</script>

对应的ESP32端需要实现/get-updated-data接口，返回需要更新的内容文本。

方法3：WebSocket实时推送（推荐高实时性场景） #

如果需要传感器数据这类实时性高的更新，用WebSocket比轮询更高效，ESP32可通过AsyncWebSocket库实现：

ESP32端示例代码 #

#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <AsyncWebSocket.h>

AsyncWebServer server(80);
AsyncWebSocket ws("/ws");

void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type, void *arg, uint8_t *data, size_t len) {
    if(type == WS_EVT_CONNECT) {
        Serial.printf("客户端 #%u 已连接\n", client->id());
    } else if(type == WS_EVT_DISCONNECT) {
        Serial.printf("客户端 #%u 已断开\n", client->id());
    }
}

void setup() {
    Serial.begin(115200);
    ws.onEvent(onWsEvent);
    server.addHandler(&ws);

    // 主页路由
    server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
        request->send_P(200, "text/html", R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
    <title>ESP32 实时服务器</title>
</head>
<body>
    <h1>实时传感器数据</h1>
    <div id="sensor-data">等待数据...</div>
    <script>
        const ws = new WebSocket('ws://' + window.location.host + '/ws');
        ws.onmessage = function(event) {
            document.getElementById('sensor-data').textContent = event.data;
        };
    </script>
</body>
</html>
)rawliteral");
    });

    server.begin();
}

void loop() {
    // 模拟每秒推送一次传感器数据
    static unsigned long lastPush = 0;
    if(millis() - lastPush > 1000) {
        lastPush = millis();
        String data = "当前温度: " + String(random(20, 30)) + "°C";
        ws.textAll(data);
    }
    ws.cleanupClients();
}

这种方式由服务器主动推送数据到页面，无需页面轮询，实时性好且资源消耗更低。

内容的提问来源于stack exchange，提问作者João Paiva