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

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

Naisu Xu

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

阅读量1.6w

点赞数 17

分类专栏： ESP32与ESP8266相关文章标签： ESP8266 Arduino

本文链接：https://blog.csdn.net/Naisu_kun/article/details/83179466

版权

ESP32与ESP8266相关专栏收录该内容

54 篇文章 557 订阅

订阅专栏

文章目录

目的
使用介绍
应用测试
应用示例
总结

目的

在之前的文章《从零开始的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中可以看到更多方法，具体的使用可以参考源码或是官方例程。

应用测试

本文中各种例程测试中出现中文可能在有些浏览器中会出现乱码（我这里用的是傲游浏览器ao），这是由于编码格式引起的。正式使用如果是在浏览器中访问text/html类型的网页文件，可以在网页文件的head标签中加入<meta charset=“utf-8”>字段，可以保证在浏览器端中文正常显示。

下面的代码实现了最简单的功能，用户在浏览器输入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>" +
    "    <meta charset=\"utf-8\">" +
    "    <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\" οnclick=\"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();
}

上面的代码直接拷贝可能网页的字符串部分代码会出现编码问题导致无法正确运行，该部分最好删除重新手打。如果想偷懒的话可以试试只删除 onclick 这个词的 o 然后手打输入。
在这里插入图片描述

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

总结

使用ESP8266WebServer库可以更加方便的实现WebServer功能，提高了开发效率。除了官方自带的WebServer库外还有第三方的库ESPAsyncWebServer可以使用，相关内容可以参考下面文章：
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：快速入门》
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：事件处理绑定》
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：请求与响应》
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：静态文件和模板引擎》
《Arduino for ESP8266&ESP32适用库ESPAsyncWebServer：WebSocket和EventSource》

Naisu Xu

关注

17
点赞
踩
119

收藏

觉得还不错? 一键收藏
打赏
27
评论
从零开始的ESP8266探索（09）-更加方便的ESP8266WebServer使用介绍

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

扫一扫