同时在ESP8266搭建WebServer和TCPServer实现温湿度数据展示及控制LED灯

最新推荐文章于 2024-06-15 15:16:22 发布

IOT的一枚小菜鸟

最新推荐文章于 2024-06-15 15:16:22 发布

阅读量4.9k

点赞数 9

文章标签： stm32 物联网

本文链接：https://blog.csdn.net/baidu_40311265/article/details/120139534

版权

相信各位小伙伴对ESP8266的使用已经很熟悉了，主要存在三种使用方式，AT固件方式：通过各种单片机或者ARM的串口驱动即可，安信可的开发环境编程（不推荐，开发环境难搭建），Arduino方式（各种功能都有库，推荐）。本案例以ESP8266作为服务端，利用Arduino开发环境搭建WebServer和TCPServer。WebServer、TCPServer最大的区别，各位小伙伴可以去回顾一下网络的知识，BS架构与CS架构的区别，在此不做过多的讲解。

一、整体的程序框架逻辑

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h> 
#include <DNSServer.h>
#include "uFire_SHT20.h"
#include "webhtml.h"
#define LED_CONTROL 15
#define MAX_SRV_CLIENTS 2  //做多多少个客户端可以连接
#define SDA_PIN 2
#define SCL_PIN 14
const int16_t I2C_MASTER = 0x42;
const int16_t I2C_SLAVE = 0x08;
const byte DNS_PORT = 53; //DNS服务端口号，一般为53
WiFiServer server(23);    //创建server 端口号是23
ESP8266WebServer esp8266_server(80);// 建立网络服务器对象，该对象用于响应HTTP请求。监听端口（80）
WiFiClient serverClients[MAX_SRV_CLIENTS];   //定义最多多少个client可以连接本server(一般不要超过4个)
DNSServer dnsServer; 
uFire_SHT20 sht20;
float Temerature;
float Humidity;
void setup()
{

   ESP8266_Init();
   startWebServer();
   startTCPServer(); 
   
}

void loop() {

  ReadHumiTemp();
  dnsServer.processNextRequest(); 
  esp8266_server.handleClient();             
  waitTCPClientConnect();
  esp8266_server.handleClient(); 
  receiveDataFromTCPClient();
  esp8266_server.handleClient(); 
  sendDataFromTCPClient();
  esp8266_server.handleClient(); 
}

二、ESP8266相关的初始化，包括串口的初始化、温湿度传感器的初始化

void ESP8266_Init()
{
   pinMode(LED_CONTROL,OUTPUT);//控制LED灯的引脚
   digitalWrite(LED_CONTROL, HIGH);
    
   Serial.begin(115200);//串口波特率设置
   Wire.begin(SDA_PIN, SCL_PIN);  //SHT20温湿度传感器（IIC接口）的初始化、配置
   sht20.begin();
   Serial.println();
    
  /*ESP8266工作于AP模式，以下为设置IP、子网掩码等*/
  IPAddress softLocal(192,168,1,1);   
  IPAddress softGateway(192,168,1,1);
  IPAddress softSubnet(255,255,255,0);
  WiFi.softAPConfig(softLocal, softGateway, softSubnet);
  
  String apName = ("ESP8266_"+(String)ESP.getChipId());  // 设置WIFI名称
  const char *softAPName = apName.c_str();
  
  WiFi.softAP(softAPName, "1234567890");      // 创建wifi  名称 +密码 adminadmin
  dnsServer.start(DNS_PORT, "www.hjjk.com", softLocal);//域名解析，将IP地址映射为域名
  
  IPAddress myIP = WiFi.softAPIP();  // 输出创建的WIFI IP地址
  Serial.print("AP IP address: ");      
  Serial.println(myIP);
  
  Serial.print("softAPName: ");  // 输出WIFI 名称
  Serial.println(apName);
}

三、启动WebServer

void startWebServer()
{
  esp8266_server.begin();
  esp8266_server.on("/",handleRoot);
  esp8266_server.on("/led_set",led_control);
  esp8266_server.on("/tempread",temp_data);
  esp8266_server.on("/humiread",humi_data);
}

四、启动TCPServer

void startTCPServer()
{
   server.begin();  //启动server
  server.setNoDelay(true);//关闭小包合并包功能，不会延时发送数据

}

五、读取温湿度

void ReadHumiTemp()
{
      Temerature = sht20.temperature();
      Humidity = sht20.humidity();
}

六、WebServer相关

void handleRoot() 
{
  esp8266_server.send(200, "text/html", String(HOME_SENSOR_DATA));
}

void temp_data() 
{
 char temp[7];
 sprintf(temp, "%.2f",Temerature);
 //Serial.println(temp);
 esp8266_server.send(200, "text/plane", temp);
}

void humi_data() 
{
 char humi[7];
 sprintf(humi, "%.2f",Humidity);
 esp8266_server.send(200, "text/plane", humi);
}

void led_control() 
{
 String state = "灭";
 String act_state = esp8266_server.arg("state");
 if(act_state == "1")
 {
   digitalWrite(LED_CONTROL,LOW);// 改变LED的点亮或者熄灭状态
   Serial.print("LEDON");
   state = "亮";
 }
 else if(act_state == "0")
 {
  digitalWrite(LED_CONTROL,HIGH);// 改变LED的点亮或者熄灭状态
  Serial.print("LEDOFF");
  state = "灭";
 }
 else
 {
 }
 esp8266_server.send(200, "text/plane", state);
}

WebServer相关的文件除了还包括一个头文件webhtml.h，即主要包括h5及Ajax（异步刷新）相关的东西，代码如下

const char HOME_SENSOR_DATA[] = R"=====(

<html><head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>室内环境监控</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'/>
<style type="text/css">
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
</style>
<body style="background-color: #f9e79f ">
<center>
<div>
<br><br><br>
<h1>基于WiFi的室内环境监控系统</h1>
  <button class="button" onclick="send(1)">开灯</button>
  <button class="button" onclick="send(0)">关灯</button><BR>
</div>
 <br>
<div><h2>
  温度: <span id="temp_val">0</span>
  <span id="Tdanwei"> ℃</span><br><br>

   湿度: <span id="humi_val">0</span>
  <span id="Hdanwei"> %RH</span><br><br>

  LED 状态: <span id="state">灭</span>
</h2>
</div>
<script>
function send(led_sts) 
{
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("state").innerHTML = this.responseText;
      if(this.responseText=="亮")
      {
      	window.alert('LED灯已打开！');
      }
      else if(this.responseText=="灭")
      {
      	window.alert('LED灯已关闭！');
      }
      else
      {
      	
      }
    }
  };
  xhttp.open("GET", "led_set?state="+led_sts, true);
  xhttp.send();
}
setInterval(function() 
{
  getTempData();
  getHumiData();
}, 700); 
function getTempData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("temp_val").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "tempread", true);
  xhttp.send();
}
function getHumiData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("humi_val").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "humiread", true);
  xhttp.send();
}
</script>
</center>
</body>
</html>
)=====";

七、TCPServer相关

//等待TCP客户端的连接，在连接成功后读取客户端的控制指令
void receiveDataFromTCPClient()
{
  uint8_t i;
  String readbuf = "";
   for (i = 0; i < MAX_SRV_CLIENTS; i++) {
    if (serverClients[i] && serverClients[i].connected()) {
      if (serverClients[i].available()) {
        //serverClients[i].available()   判断指定客户端是否有可读数据
        while (serverClients[i].available()) {
          readbuf += char(serverClients[i].read());
           if(readbuf == "LEDON")
            {
              digitalWrite(LED_CONTROL, LOW);
              Serial.print("LEDON");
            }
            else  if(readbuf == "LEDOFF")
            {
              digitalWrite(LED_CONTROL, HIGH);
              Serial.print("LEDOFF");
            }
            else
            {
              
            }
            

        }
      }
    }
  }
}

//将采集到的温湿度数据下放给TCPClient
void sendDataFromTCPClient()
{
  uint8_t i;
  uint8_t sbuf[5];
  sbuf[0] = ((int)(Temerature*100))/100;
  sbuf[1] = ((int)(Temerature*100))%100;

  sbuf[2] = ((int)(Humidity*100))/100;
  sbuf[3] = ((int)(Humidity*100))%100;
  sbuf[4] = '\n'; 
    //push UART data to all connected telnet clients
  for (i = 0; i < MAX_SRV_CLIENTS; i++) {
     if (serverClients[i] && serverClients[i].connected()) {
       serverClients[i].write(sbuf, 5);//向客户端发送数据
       delay(1);
      }
    }
}

八、运行效果展示

1、Web展示温湿度数据及控制LED灯

将程序编译无误后烧录至ESP8266，复位后，将手机或计算机接入ESP8266形成的局域网，使用浏览器访问192.168.1.1（模块IP）或者www.hjjk.com(DNS映射)+端口号（本程序为80，HTTP默认端口号，所以可以省略）,如下

2、手机App展示温湿度数据及控制LED灯

本次工程的代码在此https://download.csdn.net/download/baidu_40311265/21980530?spm=1001.2014.3001.5503关于使用AndroidStudio进行App开发，下期进行讲解！

IOT的一枚小菜鸟

关注

9
点赞
踩
50

收藏

觉得还不错? 一键收藏
7
评论
同时在ESP8266搭建WebServer和TCPServer实现温湿度数据展示及控制LED灯

相信各位小伙伴对ESP8266的使用已经很熟悉了，主要存在三种使用方式，AT固件方式：通过各种单片机或者ARM的串口驱动即可，安信可的开发环境编程（不推荐，开发环境难搭建），Arduino方式（各种功能都有库，推荐）。本案例以ESP8266作为服务端，利用Arduino开发环境搭建WebServer和TCPServer。WebServer、TCPServer最大的区别，各位小伙伴可以去回顾一下网络的知识，BS架构与CS架构的区别，在此不做过多的讲解。一、整体的程序框架逻辑#include <
复制链接

扫一扫