目的

在之前的文章《从零开始的ESP8266探索（06）-使用Server功能搭建Web Server》中已经实现的基本的Web Server功能，但是该文中的方式写起来不那么简洁，代码耦合度较高，不适合复杂应用的开发。对此在Arduino for esp8266中提供了更加直接的ESP8266WebServer功能，这将大大简化代码，提高开发速度。
官方例程：https://github.com/esp8266/Arduino/tree/master/libraries/ESP8266WebServer

使用介绍

ESP8266WebServer使用步骤如下：

引入相应的库#include <ESP8266WebServer.h>;
建立全局的Web服务器并监听某端口ESP8266WebServer server(port)；(port一般可写80);
在setup()中绑定http请求的回调函数server.on(url, function);;
在setup()中绑定http请求不可用时的回调函数server.onNotFound(function);(可选);
在setup()中开启WebServer功能server.begin();;
在loop()中监听客户请求并处理server.handleClient();;

最基本的应用可以参考官方示例HelloServer。
在keywords.txt中可以看到更多方法，具体的使用可以参考源码或是官方例程。

应用测试

下面的代码实现了最简单的功能，用户在浏览器输入web服务器的IP时会显示内容为这是homepage的页面:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

const char* ssid = "********";
const char* password = "********";

ESP8266WebServer server(80);

const int led = 2 ;

void homepage() {
  server.send(200, "text/plain", "这是homepage");
  Serial.println("用户访问了主页");
}

void setup(void) {
  //初始化串口
  Serial.begin(115200);
  Serial.println("");

  //初始化网络
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  //初始化WebServer
  server.on("/", homepage);
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  //监听客户请求并处理
  server.handleClient();
}

在这里插入图片描述
通过下面这行代码，用户在访问WebServer地址的时候，WebServer会调用void homepage();函数：

server.on("/", homepage);

============================================================
只有一个页面不过瘾？让我们再添加一个页面试试。在代码头部添加一个函数：

void anotherpage() {
  server.send(200, "text/plain", "这是因一个页面");
  Serial.println("用户访问了另一个页面");
}

然后在setup()中进行注册：

server.on("/an", anotherpage);

在这里插入图片描述

============================================================
如果用户访问了个我实际没有注册过的页面我们可以做什么？
其实就算什么都不做在ESP8266WebServer中也会返回Not found: url这样的信息的，但是想要更进一步的话我们可以手动处理下。在代码头部添加一个函数:

void ifnotfound() {
  server.send(404, "text/plain", "嘤嘤嘤！你访问的页面被外星人劫持了哦");
  Serial.println("用户访问了一个不存在的页面");
}

然后在setup()中进行注册：

server.onNotFound(ifnotfound);

在这里插入图片描述

============================================================
好了，到这了ESP8266WebServer基本的使用方法就介绍完了，是不是很简单？

应用示例

接下来将之前文章《从零开始的ESP8266探索（06）-使用Server功能搭建Web Server》中的代码改成用新方法来实现，通过网页来控制LED。
改写后代码如下：

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

//网页
String myhtmlPage =
    String("") +
    "<html>" +
    "<head>" +
    "    <title>ESP8266 Web Server Test</title>" +
    "    <script defer=\"defer\">" +
    "        function ledSwitch() {" +
    "            var xmlhttp;" +
    "            if (window.XMLHttpRequest) {" +
    "                xmlhttp = new XMLHttpRequest();" +
    "            } else {" +
    "                xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\");" +
    "            }" +
    "            xmlhttp.onreadystatechange = function () {" +
    "                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {" +
    "                    document.getElementById(\"txtState\").innerHTML = xmlhttp.responseText;" +
    "                }" +
    "            }," +
    "            xmlhttp.open(\"GET\", \"Switch\", true);" +
    "            xmlhttp.send(); " +
    "        }" +
    "    </script>" +
    "</head>" +
    "<body>" +
    "    <div id=\"txtState\">Unkwon</div>" +
    "    <input type=\"button\" value=\"Switch\" onclick=\"ledSwitch()\">" +
    "</body>" +
    "</html>";

bool isLedTurnOpen = false; // 记录LED状态

const char* ssid = "********";
const char* password = "********";

ESP8266WebServer server(80);

void handleRoot() {
  server.send(200, "text/html", myhtmlPage); //！！！注意返回网页需要用"text/html" ！！！
  Serial.println("用户访问了主页");
}

void handleSwitch() {
  if (isLedTurnOpen == false) {
    digitalWrite(2, LOW); // 点亮LED
    server.send(200, "text/plain", "LED has been turn on");
    Serial.println("用户开启了LED");
    isLedTurnOpen = true;
  }
  else {
    digitalWrite(2, HIGH); // 熄灭LED
    server.send(200, "text/plain", "LED has been turn off");
    Serial.println("用户关闭了LED");
    isLedTurnOpen = false;
  }                      
}

void handleNotFound() {
  server.send(404, "text/plain", "嘤嘤嘤！你访问的页面被外星人劫持了哦");
  Serial.println("用户访问了一个不存在的页面");
}
void setup(void) {
  //初始化LED
  pinMode(2, OUTPUT);
  digitalWrite(2, HIGH);

  //初始化串口
  Serial.begin(115200);
  Serial.println("");

  //初始化网络
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  //初始化WebServer
  server.on("/", handleRoot);
  server.on("/Switch", handleSwitch);
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  //监听客户请求并处理
  server.handleClient();
}

在这里插入图片描述

可以看到用了新方法后代码大大的简化了。

总结

使用ESP8266WebServer库可以更加方便的实现WebServer功能，提高了开发效率。

从零开始的ESP8266探索（09）-更加方便的ESP8266WebServer使用介绍

目的

使用介绍

应用测试

应用示例

总结

猜你喜欢