ESP8266基于WebServer实时获取温湿度

功能描述：通过在浏览器中访问ESP8266提供的服务来获取其实时的温湿度信息；
操作步骤：
第一步、将下面的代码烧录到Esp中；
第二步、打开串口调试工具查看该ESP8266的IP地址
第三步、访问 IP地址/index.html 这个网址来获取实时的温湿度
#include <ESP8266WiFi.h>

const char* ssid = "Wi-Fi名称";
const char* password = "Wi-Fi密码";
int temp = 0;//温度
int humi = 0;//湿度
unsigned int loopCnt;
int chr[40] = {0};
unsigned long timer;
#define pin D4

WiFiServer server(80);

/**
 * 获取温湿度
 */
void get_humiture() {
  bgn:
  delay(2000);
  //设置2号接口模式为：输出
  //输出低电平20ms（>18ms）
  //输出高电平40μs
  pinMode(pin,OUTPUT);
  digitalWrite(pin,LOW);
  delay(20);
  digitalWrite(pin,HIGH);
  delayMicroseconds(40);
  digitalWrite(pin,LOW);
  //设置2号接口模式：输入
  pinMode(pin,INPUT);
  //高电平响应信号 
  loopCnt=10000;
  while(digitalRead(pin) != HIGH)
  {
    if(loopCnt-- == 0)
    {
      //如果长时间不返回高电平，输出个提示，重头开始。
//      Serial.println("HIGH");
      goto bgn;
    }
  }
  //低电平响应信号
  loopCnt=30000;
  while(digitalRead(pin) != LOW)
  {
    if(loopCnt-- == 0)
    {
      //如果长时间不返回低电平，输出个提示，重头开始。
//      Serial.println("LOW");
      goto bgn;
    }
  }
    //开始读取bit1-40的数值  
    for(int i=0;i<40;i++)
  {
    while(digitalRead(pin) == LOW)
    {}
    //当出现高电平时，记下时间“timer”
    timer = micros();
    while(digitalRead(pin) == HIGH)
    {}
    //当出现低电平，记下时间，再减去刚才储存的timer
    //得出的值若大于50μs，则为‘1’，否则为‘0’
    //并储存到数组里去
    if (micros() - timer >50)
    {
      chr[i]=1;
    }else{
      chr[i]=0;
    }
  }
   
  //湿度，8位的bit，转换为数值
  humi=chr[0]*128+chr[1]*64+chr[2]*32+chr[3]*16+chr[4]*8+chr[5]*4+chr[6]*2+chr[7];
     
  //温度，8位的bit，转换为数值
  temp=chr[16]*128+chr[17]*64+chr[18]*32+chr[19]*16+chr[20]*8+chr[21]*4+chr[22]*2+chr[23];
}

void setup() {
  pinMode(D4, OUTPUT);
  Serial.begin(115200);
  delay(10);
  
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  
  // Start the server
  server.begin();
  Serial.println("Server started");

  // Print the IP address
  Serial.println(WiFi.localIP());
}

void loop() {
  // Check if a client has connected
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
  
  // Wait until the client sends some data
  Serial.println("new client connected");
  while(!client.available()){
    delay(1);
  }
  
  // Read the first line of the request
  String req = client.readStringUntil('
');
  Serial.println(req);
  
  client.flush();
  get_humiture();

  
  // Prepare the response
  String page = "HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE HTML>
<html>
<head>";
  page += "<meta charset='utf-8'>";
//  page += "
<link href='https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>";
  page += "
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>";
  page += "
</head>
<body style='padding:10px'>";
  page += "
<h1>实时温湿度:</h1><br>";

  // 日期
  page += "
<div id='date'></div><br>";

  String humistring = "温度： ";
  humistring += temp;
  humistring += " 湿度：";
  humistring += humi;

  // 温湿度
  page += "
<div id='content'>";
  page += humistring;
  page += "</div><br>";
  
  page += "
<script>
";
  page += "var date = new Date(); $('#date').text(date);";
  page += "
";
  page += "setInterval(function(){$.post('/gethumi', {}, function(res) {var date = new Date(); $('#date').text(date); $('#content').html(res);})}, 3000);";
  page += "
";
  page += "console.log('" + humistring + "')";
  page += "
</script>";
  page += "
</body>
</html>
";

  
  // Match the request
  if (req.indexOf("/index.html") != -1) {
    client.print(page);
    return;
  } else if (req.indexOf("/gethumi") != -1) {
    String humires = "HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE HTML>
<html>
<head>";
    humires += "<meta charset='utf-8'></head><body>";
    humires += humistring;
    humires += "</body></html>";
    client.print(humires);
  } else {
    Serial.println("invalid request");
    client.stop();
    return;
  }
  delay(1);
}