抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

1、建立基本网络服务器

  1. 导入库文件 ESP8266WebServer.h

  2. 创建服务器对象

    1
    ESP8266WebServer server(80);  //80是端口号

  3. 启动服务器

    1
    server.begin();

  4. 服务器访问配置

    1
    2
    3
    4
    5
    // 访问根节点时，调用处理函数 handleRoot
    server.on("/", handleRoot);

    //访问不到，即404时，调用处理函数 handleNotFound
    server.onNotFound(handleNotFound);

  5. 访问处理函数

    1
    2
    3
    void handleRoot(){
        server.send(200, "text/plain", "Hello from ESP8266");
    }
    1
    2
    3
    void handleNotFound(){
        server.send(404, "text/plain", "404: Not found");
    }

  6. 循环监听端口

    1
    2
    3
    void loop(){
        server.handleClient();   //循环监听客户端访问情况
    }

完整code：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266WebServer.h>

ESP8266WiFiMulti wifiMulti;
ESP8266WebServer server(80); //80是端口号

void setup(){
    Serial.begin(9600);
    server.begin();
    server.on("/", handleRoot);
    server.onNotFound(handleNotFound);

    wifiMulti.addAP("RBook", "17191719");
    wifiMulti.addAP("bbb", "12345678");
    wifiMulti.addAP("ccc", "12345678");

    int i = 0;
    while (wifiMulti.run() != WL_CONNECTED){
        delay(600);
        Serial.print(++i);
        Serial.print(" ");
    }

    Serial.println("");
    Serial.print("IP Address: ");
    Serial.println(WiFi.localIP());
    
}

//监听客户端
void loop(){
    server.handleClient();
}

//访问处理函数
void handleRoot(){
    server.send(200, "text/plain", "Hello esp8266");
}

void handleNotFound(){
    server.send(404, "text/plain", "404 not found");
}

2、通过网络服务器实现开发板控制

通过网页控制nodeMCU开发板小灯亮灭

步骤1、2、3、6不变，只是第3、4步的服务器访问配置和访问处理函数有些许改动

  1. 服务器访问配置

    1
    2
    3
    4
    5
    6
    server.on("/", HTTP_GET, handleRoot);

    /*添加这个控制LED的网页, 使用post方式发送http请求*/
    server.on("/LED", HTTP_POST, handleLED); 

    server.onNotFound(handleNotFound);

  2. 访问处理函数

    1
    2
    3
    4

    void handleRoot(){
        server.send(200, "text/html", "<form action=\"/LED\" method=\"POST\"><input type=\"submit\" value=\"Toggle LED\"></form>");
    }

    注意这句html代码：

    1
    2
    3
    <form action="/LED" method="POST">
        <input type="submit" value="Toggle LED">
    </form>

    这会生成一个按钮，点击这个按钮会把数据发到"/LED"页面

    下面是“/LED”页面的处理函数：

    1
    2
    3
    4
    5
    6
    7
    void handleLED(){
        static bool LEDState = LOW;//记录LED此时亮灭状态
        LEDState = !LEDState;
        digitalWrite(LED_BUILTIN, LEDState);
        server.sendHeader("Location", "/");
        server.send(303);        //303表示将网页重定向
    }

完整code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266WebServer.h>

ESP8266WiFiMulti wifiMulti;
ESP8266WebServer server(80); //80是端口号

void setup(){
    Serial.begin(9600);

    pinMode(LED_BUILTIN, OUTPUT);  //设置内置LED引脚为输出模式
    
    /*服务器配置*/
    server.begin();
    server.on("/", HTTP_GET, handleRoot);
    server.on("/LED", HTTP_POST, handleLED);
    server.onNotFound(handleNotFound);

    /*Wifi配置*/
    wifiMulti.addAP("RBook", "17191719");
    wifiMulti.addAP("bbb", "12345678");
    wifiMulti.addAP("ccc", "12345678");

    int i = 0;
    while (wifiMulti.run() != WL_CONNECTED){
        delay(600);
        Serial.print(++i);
        Serial.print(" ");
    }

    Serial.println("");
    Serial.print("IP Address: ");
    Serial.println(WiFi.localIP());
}

void loop(){
    server.handleClient();
}

void handleRoot(){
    server.send(200, "text/html", "<form action=\"/LED\" method=\"POST\"><input type=\"submit\" value=\"Toggle LED\"></form>");
}

void handleNotFound(){
    server.send(404, "text/plain", "404 not found");
}

void handleLED(){
    static bool LEDState = LOW; //记录LED此时亮灭状态
    LEDState = !LEDState;
    digitalWrite(LED_BUILTIN, LEDState);
    server.sendHeader("Location", "/");
    server.send(303);        //303表示将网页重定向
}

3、将开发板引脚状态发送到终端网页

将引脚D3（已经与flash按键相连，按键按下为低电平）的电平状态显示到网页中

  1. 首先在开始时将D3引脚设置为上拉输入模式

    1
    pinMode(D3, INPUT_PULLUP);

  2. 循环读取引脚状态 digitalRead()

    1
    2
    3
    4
    5
    bool pinState;
    void loop(){
        pinState = digitalRead(D3); // 获取引脚状态
        //......
    }

  3. 要在根节点下显示引脚状态，所以其访问处理函数为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

    void handleRoot() {   
      String displayPinState;                   // 存储按键状态的字符串变量
      
      if(pinState == HIGH){                     // 当按键引脚D3为高电平
        displayPinState = "Button State: HIGH"; // 字符串赋值高电平信息
      } else {                                  // 当按键引脚D3为低电平
        displayPinState = "Button State: LOW";  // 字符串赋值低电平信息
      }
      esp8266_server.send(200, "text/plain", displayPinState); 
                                               // 向浏览器发送按键状态信息  
    }

完整code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266WebServer.h>

ESP8266WiFiMulti wifiMulti;
ESP8266WebServer server(80); //80是端口号

bool pinState;

void setup(){
    Serial.begin(9600);

    pinMode(D3, INPUT_PULLUP);  //上拉输入模式
    
    /*服务器配置*/
    server.begin();
    server.on("/", HTTP_GET, handleRoot);
    server.onNotFound(handleNotFound);

    /*Wifi配置*/
    wifiMulti.addAP("RBook", "17191719");
    wifiMulti.addAP("bbb", "12345678");
    wifiMulti.addAP("ccc", "12345678");

    int i = 0;
    while (wifiMulti.run() != WL_CONNECTED){
        delay(800);
        Serial.print(++i);
        Serial.print(" ");
    }

    Serial.println("");
    Serial.print("IP Address: ");
    Serial.println(WiFi.localIP());
}

void loop(){
    server.handleClient();
    pinState = digitalRead(D3);
}

void handleRoot(){
    String displayPinState;
    if(pinState == HIGH){                     // 当按键引脚D3为高电平
      displayPinState = "Button State: HIGH"; // 字符串赋值高电平信息
    } else {                                  // 当按键引脚D3为低电平
      displayPinState = "Button State: LOW";  // 字符串赋值低电平信息
    }
    server.send(200, "text/plain", displayPinState);
}

void handleNotFound(){
    server.send(404, "text/plain", "404 not found");
}

注意：引脚状态改变后需要手动刷新网页，网页显示才会改变

更新于：2024年9月22日

评论