Zelin's blog

用ESP32搭建web网站

在本篇文章中，您将学习到如何使用ESP32设置一个Web服务器，以及使用HTML和CSS创建Web页面。通过本文，你将学习到：

●    了解Web服务器的基础知识

●    使用ESP32创建Web服务器


什么是Web服务器？

Web服务器是发送和接收信息，处理信息并存储信息的地方。 Web服务器还可以在网页上显示这些信息。


服务器通过称为超文本传输​​协议（HTTP）的协议与用户通信。


当请求发送到此服务器时（例如，在浏览器中搜索其地址），服务器返回代码作为响应（例如，代码200，表示连接已正确建立，或代码404，表示地址不正确）。您可以在此处找到这些代码的完整列表。


所需的材料

●    ESP32模块

●    Arduino IDE


在站模式下（STA）设置ESP32

在这种情况下，ESP32模块作为客户端连接到Wi-Fi路由器，可以通过路由器访问Internet。


代码

要在STA模式下启动ESP32，只需在开发板上上传以下代码即可。

  1. /*

  2.   ESP32 Web Server - STA Mode

  3.   modified on 25 MAy 2019

  4.   by Mohammadreza Akbari @ Electropeak

  5.   https://electropeak.com/learn

  6. */

  8. #include <WiFi.h>

  9. #include <WebServer.h>

  11. // SSID & Password

  12. const char* ssid = "*****";  // Enter your SSID here

  13. const char* password = "*****";  //Enter your Password here

  15. WebServer server(80);  // Object of WebServer(HTTP port, 80 is defult)

  17. void setup() {

  18.   Serial.begin(115200);

  19.   Serial.println("Try Connecting to ");

  20.   Serial.println(ssid);

  22.   // Connect to your wi-fi modem

  23.   WiFi.begin(ssid, password);

  25.   // Check wi-fi is connected to wi-fi network

  26.   while (WiFi.status() != WL_CONNECTED) {

  27.   delay(1000);

  28.   Serial.print(".");

  29.   }

  30.   Serial.println("");

  31.   Serial.println("WiFi connected successfully");

  32.   Serial.print("Got IP: ");

  33.   Serial.println(WiFi.localIP());  //Show ESP32 IP on serial

  35.   server.on("/", handle_root);

  37.   server.begin();

  38.   Serial.println("HTTP server started");

  39.   delay(100);

  40. }

  42. void loop() {

  43.   server.handleClient();

  44. }

  46. // HTML & CSS contents which display on web server

  47. String HTML = "<!DOCTYPE html>\

  48. <html>\

  49. <body>\

  50. <h1>My First Web Server with ESP32 - Station Mode</h1>\

  51. </body>\

  52. </html>";

  54. // Handle root url (/)

  55. void handle_root() {

  56.   server.send(200, "text/html", HTML);

  57. }

上传代码后，打开串口监视器窗口。如果您输入了正确的SSID和密码，几秒钟后，ESP32将连接到路由器并返回IP地址。

在浏览器中输入该IP，您可以看到刚刚创建的网页。

注意：您的PC（您的浏览器）应该连接到与ESP32相同的路由器。


代码解释

  1. #include <WiFi.h>

  2. #include <WebServer.h>

在代码的起始处添加了两个必需的库。 WiFi.h库用于设置wifi部分，WebServer.h库用于构建网页。

  1. const char* ssid = "****";   

  2. const char* password = "****";

在这两行代码中输入路由器的SSID和密码。

  1. WebServer server(80);

此命令从webserver类定义一个名为server的对象。使用此对象，您可以在端口80上创建网页。


在setup()函数部分，首先启动串行通信。

  1. WiFi.begin(ssid, password);

使用WiFi.begin命令，ESP32尝试使用SSID和代码中定义的密码连接到您的wifi路由器。

  1. while (WiFi.status() != WL_CONNECTED) {

  2.   delay(1000);

  3.   Serial.print(".");

  4.   }

  5.   Serial.println("");

  6.   Serial.println("WiFi connected successfully");

上面的代码在串口监视器上打印字符“.”，直到ESP32连接到Wi-Fi路由器。正确建立连接后，串行监视器上会显示“WiFi connected successfully”。

  1. Serial.print("Got IP: ");

  2. Serial.println(WiFi.localIP());

然后ESP32的IP地址将打印在串口监视器上。


要管理HTTP请求并指定在搜索URL地址时要运行的代码部分，请使用on方法。

  1. server.on("/", handle_root);

在上面的代码中，当在浏览器中搜索主地址（放置在IP之后）时，调用handle_root函数。

最后，使用server. begin命令，您的Web服务器开始工作。


在loop()函数部分中，只调用handleClient方法，这样您的代码始终监听Web服务器以管理服务器上发生的事件。

  1. String HTML = "<!DOCTYPE html>\

  2. <html>\

  3. <body>\

  4. <h1>My First Web Server with ESP32 - Station Mode </h1>\

  5. </body>\

  6. </html>";

HTML字符串包含应在网页上显示的代码。

小提示：要在几行中编写一条指令，只需在每行的末尾添加一个反斜杠（\）。

  1. void handle_root() {

  3.   server.send(200, "text/html", HTML);

  5. }

只要在浏览器中搜索主路径（IP地址），就会调用handle_root-unction。在此函数中，使用send方法。

send命令发送代码号200（表示页面正确打开）以及我们编写的HTML代码，以在网页上显示它。


在接入点模式（AP）中设置ESP32

在这种情况下，ESP32充当路由器并使用所需的名称和密码创建本地wifi网络。由于可以连接到此连接点的设备数量有限，因此它也称为软访问点。


代码

在电路板上上传以下代码，以便在AP模式下设置ESP32。

  1. /*

  2.   ESP32 Web Server - AP Mode

  3.   modified on 25 MAy 2019

  4.   by Mohammadreza Akbari @ Electropeak

  5.   https://electropeak.com/learn

  6. */

  8. #include <WiFi.h>

  9. #include <WebServer.h>

  11. // SSID & Password

  12. const char* ssid = "Electripeak";  // Enter your SSID here

  13. const char* password = "123456789";  //Enter your Password here

  15. // IP Address details

  16. IPAddress local_ip(192, 168, 1, 1);

  17. IPAddress gateway(192, 168, 1, 1);

  18. IPAddress subnet(255, 255, 255, 0);

  20. WebServer server(80);  // Object of WebServer(HTTP port, 80 is defult)

  23. void setup() {

  24.   Serial.begin(115200);

  26.   // Create SoftAP

  27.   WiFi.softAP(ssid, password);

  28.   WiFi.softAPConfig(local_ip, gateway, subnet);

  31.   Serial.print("Connect to My access point: ");

  32.   Serial.println(ssid);

  34.   server.on("/", handle_root);

  36.   server.begin();

  37.   Serial.println("HTTP server started");

  38.   delay(100);

  39. }

  41. void loop() {

  42.   server.handleClient();

  43. }

  45. // HTML & CSS contents which display on web server

  46. String HTML = "<!DOCTYPE html>\

  47. <html>\

  48. <body>\

  49. <h1>My First Web Server with ESP32 - AP Mode </h1>\

  50. </body>\

  51. </html>";

  53. // Handle root url (/)

  54. void handle_root() {

  55.   server.send(200, "text/html", HTML);

  56. }

上传代码后，连接到您所建立的连接点。

现在在浏览器中输入192.168.1.1 IP。


代码解释

  1. const char* ssid = "Electropeak";  

  2. const char* password = "123456789";

在该段代码中，您可以输入任意SSID和密码，以便ESP32创建该名称的Wi-Fi连接点。

  1. IPAddress local_ip(192, 168, 1, 1);

  3. IPAddress gateway(192, 168, 1, 1);

  5. IPAddress subnet(255, 255, 255, 0);

然后，您需要输入您的IP来创建网络。 （您可以使用代码中定义的相同IP。）

  1. WiFi.softAP(ssid, password);

  3. WiFi.softAPConfig(local_ip, gateway, subnet);

上述命令创建Wi-Fi连接点。


其余代码与STA模式相同。

Hi,Friend

© 2025 Zelin's blog