目的
在之前的文章《从零开始的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功能,提高了开发效率。