如何利用Arduino开发环境去搭建一种WebServer和TCPServer呢

信任小伙伴对开发环境很重要的使用，AT6或通过ARM的单片驱动，可以推荐使用环境编程，ESP8的开发环境可不安全2，6），Arduino（各种功能库，推荐方式）。本以ESP8266作为服务端，利用Arduino开发网络服务器的环境知识方式，WebServer和TCPServer。WebServer、TCP最大的区别，下面小伙伴可以去回顾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 ***uf［5］;
　　***uf［0］ = （（int）（Temerature*100））/100;
　　***uf［1］ = （（int）（Temerature*100））%100;
　　***uf［2］ = （（int）（Humidity*100））/100;
　　***uf［3］ = （（int）（Humidity*100））%100;
　　***uf［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（***uf， 5）;//向客户端发送数据
　　delay（1）;
　　}
　　}
　　}


八、运行效果展示


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

将程序烧录至226，重启后，将手机或计算机使用8266形成ESP的连接后无误2.168.1.1（IP）模块访问器浏览器（DNS浏览器）+端口（本本）为8000，所以程序可以省略显示这个端口号，如下





2、手机应用温控数据及