ESP8266 NodeMCU本地网页无需刷新实时更新风向变量的问题

问题说明 #

开发ESP8266 NodeMCU风向标项目时，网页显示的风向数据必须手动刷新才能更新，需要实现无需刷新页面的实时数据更新（排除meta标签刷新，因其体验差、刷新速率不足）。

原代码如下：

// Include necessary libraries
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

// Set WiFi credentials
const char* ssid = "wifi_Username";
const char* password = "wifi_Password";

// Create web server object
ESP8266WebServer server(80);

// Define analog pin for wind direction sensor
const int windDirectionPin = A0;

// Variable to store wind direction value
int windDirectionValue = 0;

// Function to handle root path request
void handleRoot() {
  // Read wind direction value from analog pin
  windDirectionValue = analogRead(windDirectionPin);

  // Send HTML code to client
  server.send(200, "text/html", "<h1>Wind Direction: " + String(windDirectionValue) + "</h1>");
}

// Function to handle not found path request
void handleNotFound() {
  // Send error message to client
  server.send(404, "text/plain", "Not found");
}

// Setup function
void setup() {
  // Initialize serial communication
  Serial.begin(9600);

  // Connect to WiFi network
  WiFi.begin(ssid, password);

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  // Print WiFi network information
  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  // Start web server
  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);
  server.begin();

  // Print server status
  Serial.println("Server started");
}

// Loop function
void loop() {
  // Handle client requests
  server.handleClient();
}

解决方案：使用AJAX异步请求实现无刷新更新 #

核心思路：

• 在ESP8266端新增API接口，专门返回JSON格式的风向数据
• 网页端通过JavaScript定时调用该API，获取最新数据后更新页面元素，无需刷新整个页面

修改后的ESP8266代码 #

// Include necessary libraries
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ArduinoJson.h> // 需要安装ArduinoJson库

// Set WiFi credentials
const char* ssid = "wifi_Username";
const char* password = "wifi_Password";

// Create web server object
ESP8266WebServer server(80);

// Define analog pin for wind direction sensor
const int windDirectionPin = A0;

// Variable to store wind direction value
int windDirectionValue = 0;

// Function to read wind direction
void readWindDirection() {
  windDirectionValue = analogRead(windDirectionPin);
}

// Function to handle root path request (返回带JS的HTML页面)
void handleRoot() {
  String html = R"HTML(
<!DOCTYPE html>
<html>
<head>
  <title>Wind Direction Monitor</title>
  <script>
    // 定时获取风向数据并更新页面
    setInterval(function() {
      fetch('/api/wind')
        .then(response => response.json())
        .then(data => {
          document.getElementById('windValue').textContent = data.value;
        })
        .catch(error => console.error('Error fetching data:', error));
    }, 500); // 每500毫秒请求一次，可根据需求调整
  </script>
</head>
<body>
  <h1>Wind Direction: <span id="windValue">0</span></h1>
</body>
</html>
)HTML";
  server.send(200, "text/html", html);
}

// Function to handle API request for wind data
void handleWindAPI() {
  readWindDirection();
  StaticJsonDocument<64> doc;
  doc["value"] = windDirectionValue;
  
  String response;
  serializeJson(doc, response);
  server.send(200, "application/json", response);
}

// Function to handle not found path request
void handleNotFound() {
  server.send(404, "text/plain", "Not found");
}

// Setup function
void setup() {
  Serial.begin(9600);

  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());

  // 注册路由
  server.on("/", handleRoot);
  server.on("/api/wind", handleWindAPI); // 新增API路由
  server.onNotFound(handleNotFound);
  server.begin();

  Serial.println("Server started");
}

// Loop function
void loop() {
  server.handleClient();
}

关键修改点说明 #

1. 新增API接口：添加/api/wind路由，返回JSON格式的风向数据，方便前端解析
2. 页面嵌入JavaScript：在HTML中使用fetch API定时请求数据，更新页面上的<span>元素内容
3. 分离数据读取逻辑：把读取传感器的代码封装成readWindDirection函数，代码更清晰
4. 使用ArduinoJson库：高效生成JSON响应，需在Arduino IDE库管理器中搜索"ArduinoJson"安装

注意事项 #

• 可调整setInterval的时间间隔（当前500ms），平衡数据实时性和网络负载
• 确保ESP8266成功连接WiFi后，访问打印出的IP地址即可查看实时更新的风向数据

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