ESP8266在服务器模式运行时，我们可以使用浏览器来显示它的引脚状态。
1、实现目标
学习如何通过esp8266建立基本网站，在该网站上实时显示esp8266的引脚值。
2、原理图
FLASH按键与D3引脚连接，可以通过FLASH按键改变D3引脚的电平。当没有按下该按键时，D3引脚将会保持高电平状态。当按下该按键后，D3引脚会变为低电平。
3、示例代码1
/*
*程序目的：使用ESP8266建立基本服务器。网站页面显示esp8266的D3引脚电平。
没有按下FLASH按键D3引脚保持高电平状态，按下该按键后，D3引脚
为低电平。
*/
#include <ESP8266WiFi.h> // 本程序使用 ESP8266WiFi库
#include <ESP8266WiFiMulti.h> // ESP8266WiFiMulti库
#include <ESP8266WebServer.h> // ESP8266WebServer库
#define buttonPin D3 // 按键D3引脚
ESP8266WiFiMulti wifiMulti; // 建立ESP8266WiFiMulti对象,对象名称是'wifiMulti'
ESP8266WebServer esp8266_server(80);// 建立ESP8266WebServer对象，对象名称为esp8266_server
// 括号中的数字是网路服务器响应http请求的端口号
// 网络服务器标准http端口号为80，因此这里使用80为端口号
bool pinState; // 存储D3引脚状态
void setup() {
Serial.begin(115200); // 启动串口通讯
pinMode(buttonPin, INPUT_PULLUP); // 按键引脚设置为输入上拉模式
// 通过addAP函数存储 WiFi名，WiFi密码
wifiMulti.addAP("zjd", "1233211234567");
wifiMulti.addAP("SHHOO", "shhoo2018");
Serial.print("\r\nConnecting ..."); // 通过串口监视器输出信息告知用户esp8266正在尝试连接WiFi
while (wifiMulti.run() != WL_CONNECTED)
{
delay(1000);
Serial.print('.');
}
Serial.print("\r\n"); // WiFi连接成功后
Serial.print("Connection Successful\r\n"); // esp8266将通过串口监视器输出
Serial.print("WiFi: " + WiFi.SSID() + "\r\n"); // 连接的WiFI名称
Serial.print("IP address: "); // esp8266的IP地址
Serial.println(WiFi.localIP());
esp8266_server.begin(); // 启动网站服务
esp8266_server.on("/", handleRoot); // 设置服务器根目录即'/'的函数'handleRoot'
esp8266_server.onNotFound(handleNotFound); // 设置处理404情况的函数"handleNotFound"
Serial.println("HTTP esp8266_server started"); // ESP8266网络服务功能已经启动
}
void loop() {
esp8266_server.handleClient(); // 处理http服务器访问
pinState = digitalRead(buttonPin); // 获取引脚状态
}
/*处理网站根目录"/"的访问请求*/
void handleRoot()
{
String displayPinState; // 存储按键状态的字符串变量
if(pinState == HIGH) // 当按键引脚D3为高电平
{
displayPinState = "Button State: HIGH"; // 字符串赋值高电平信息
}
else if(pinState == LOW) // 当按键引脚D3为低电平
{
displayPinState = "Button State: LOW"; // 字符串赋值低电平信息
}
esp8266_server.send(200, "text/plain", displayPinState);
}
/*处理404情况的函数*/
void handleNotFound()
{
esp8266_server.send(404, "text/plain", "404: Not found"); // 当浏览器请求的网络资源无法在服务器找到时，esp8266调用此函数
}
3.1、在按键没有按下时，会看到以下页面
3.2、在按键按下时，刷新会看到以下页面
4、示例代码2
以上示例中，我们需要刷新网页页面才能将按键的最新状态显示在网页中。为了实现页面的自动刷新，请您参考以下示例程序。
/*
*程序目的：使用ESP8266建立基本服务器。网站页面显示esp8266的D3引脚电平。
没有按下FLASH按键D3引脚保持高电平状态，按下该按键后，D3引脚
为低电平。页面状态每隔5秒刷新一次
*/
#include <ESP8266WiFi.h> // 本程序使用 ESP8266WiFi库
#include <ESP8266WiFiMulti.h> // ESP8266WiFiMulti库
#include <ESP8266WebServer.h> // ESP8266WebServer库
#define buttonPin D3 // 按键D3引脚
ESP8266WiFiMulti wifiMulti; // 建立ESP8266WiFiMulti对象,对象名称是'wifiMulti'
ESP8266WebServer esp8266_server(80); // 建立ESP8266WebServer对象，对象名称为esp8266_server
// 括号中的数字是网路服务器响应http请求的端口号
// 网络服务器标准http端口号为80，因此这里使用80为端口号
bool pinState; // 存储D3引脚状态
void setup() {
Serial.begin(115200); // 启动串口通讯
pinMode(buttonPin, INPUT_PULLUP); // 按键引脚设置为输入上拉模式
// 通过addAP函数存储 WiFi名，WiFi密码
wifiMulti.addAP("zjd", "1233211234567");
wifiMulti.addAP("SHHOO", "shhoo2018");
Serial.print("\r\nConnecting ..."); // 通过串口监视器输出信息告知用户esp8266正在尝试连接WiFi
while (wifiMulti.run() != WL_CONNECTED)
{
delay(1000);
Serial.print('.');
}
Serial.print("\r\n"); // WiFi连接成功后
Serial.print("Connection Successful\r\n"); // esp8266将通过串口监视器输出
Serial.print("WiFi: " + WiFi.SSID() + "\r\n"); // 连接的WiFI名称
Serial.print("IP address: "); // esp8266的IP地址
Serial.println(WiFi.localIP());
esp8266_server.begin(); // 启动网站服务
esp8266_server.on("/", handleRoot); // 设置服务器根目录即'/'的函数'handleRoot'
esp8266_server.onNotFound(handleNotFound); // 设置处理404情况的函数"handleNotFound"
Serial.println("HTTP esp8266_server started"); // ESP8266网络服务功能已经启动
}
void loop() {
esp8266_server.handleClient(); // 处理http服务器访问
pinState = digitalRead(buttonPin); // 获取引脚状态
}
/*处理网站根目录"/"的访问请求*/
void handleRoot()
{
esp8266_server.send(200, "text/html", sendHTML(pinState));
}
/*处理404情况的函数*/
void handleNotFound()
{
esp8266_server.send(404, "text/plain", "404: Not found"); // 当浏览器请求的网络资源无法在服务器找到时，esp8266调用此函数
}
/*
*建立用于发送给客户端浏览器的HTML代码。此代码将会每隔5秒刷新页面。
*通过页面刷新，引脚的最新状态也会显示于页面中
*/
String sendHTML(bool buttonState)
{
String htmlCode = "<!DOCTYPE html> <html>\n";
htmlCode +="<head><meta http-equiv='refresh' content='5'/>\n";
htmlCode +="<title>ESP8266 Butoon State</title>\n";
htmlCode +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
htmlCode +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;} h3 {color: #444444;margin-bottom: 50px;}\n";
htmlCode +="</style>\n";
htmlCode +="</head>\n";
htmlCode +="<body>\n";
htmlCode +="<h1>ESP8266 BUTTON STATE</h1>\n";
if(buttonState)
{
htmlCode +="<p>Button Status: HIGH</p>\n";
}
else
{
htmlCode +="<p>Button Status: LOW</p>\n";
}
htmlCode +="</body>\n";
htmlCode +="</html>\n";
return htmlCode;
}
(1)在以上示例程序中的handleRoot函数中，esp8266_server.send(200, "text/html", sendHTML(pinState))语句的的3个参数 sendHTML(pinState)调用了sendHTML函数。该函数的作用是建立一个可以定时刷新的HTML网页代码。通过定时刷新网页，开发板的引脚状态将会不断地在页面中进行更新。
(2)此HTML网页代码是由sendHTML函数产生的。该函数建立了一个字符串变量，该字符串变量所存储的信息正是网页HTML代码。值得注意的是，该HTML代码会不断地检查变量pinState状态，并且根据pinState的状态改变HTML代码的信息，从而实现在网页上显示引脚状态。
(3)此HTML代码中真正实现定时刷新网页功能的语句是代码中如下语句:
htmlCode +="<head><meta http-equiv='refresh' content='5'/>\n";
这条语句是告诉网页需要定时刷新，刷新频率5秒钟，即每5秒钟刷新一次页面。您可以通过改变此行语句中的数值5来调整页面刷新频率。
(4)每一次页面刷新，浏览器都会向NodeMCU发送HTTP请求。NodeMCU在收到浏览器请求后，将会把最新的HTML代码信息返回给浏览器。浏览器收到最新的HTML代码后将会在页面中显示引脚的状态。
(5)HTML代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='refresh' content='5'/>
<title>ESP8266 Butoon State</title>
<style>
html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}
"body{margin-top: 50px;}
h1 {color: #444444;margin: 50px auto 30px;}
h3 {color: #444444;margin-bottom: 50px;}\n";
</style>
</head>
<body>
<h1>ESP8266 BUTTON STATE</h1>
<p>Button Status: HIGH</p>
</body>
</html>4.1、没有按下按键时的页面显示信息
4.2、按下按键时的页面显示信息
