esp32 链接wifi 热点

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

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

●    使用ESP32创建Web服务器

<ignore_js_op>

 

 

什么是Web服务器？

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

 

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

 

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

<ignore_js_op>

 

 

所需的材料

●    ESP32模块

●    Arduino IDE

 

在站模式下（STA）设置ESP32

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

<ignore_js_op>

 

 

代码

要在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地址。

<ignore_js_op>

 

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

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

<ignore_js_op>

 

 

代码解释

  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网络。由于可以连接到此连接点的设备数量有限，因此它也称为软访问点。

<ignore_js_op>

 

 

代码

在电路板上上传以下代码，以便在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. }
复制代码

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

<ignore_js_op>

 

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

<ignore_js_op>

 

 

代码解释

  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模式相同。

posted on 2021-06-10 13:29  码农也疯狂  阅读(4078)  评论(0)  编辑  收藏  举报

导航