• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

esp32 链接wifi 热点

开发技术 开发技术 4小时前 3次浏览

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

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

●    使用ESP32创建Web服务器

<ignore_js_op>esp32  链接wifi  热点

 

 

什么是Web服务器?

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

 

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

 

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

<ignore_js_op>esp32  链接wifi  热点

 

 

所需的材料

●    ESP32模块

●    Arduino IDE

 

在站模式下(STA)设置ESP32

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

<ignore_js_op>esp32  链接wifi  热点

 

 

代码

要在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. */
  7. #include <WiFi.h>
  8. #include <WebServer.h>
  9. // SSID & Password
  10. const char* ssid = “*****”;  // Enter your SSID here
  11. const char* password = “*****”;  //Enter your Password here
  12. WebServer server(80);  // Object of WebServer(HTTP port, 80 is defult)
  13. void setup() {
  14.   Serial.begin(115200);
  15.   Serial.println(“Try Connecting to “);
  16.   Serial.println(ssid);
  17.   // Connect to your wi-fi modem
  18.   WiFi.begin(ssid, password);
  19.   // Check wi-fi is connected to wi-fi network
  20.   while (WiFi.status() != WL_CONNECTED) {
  21.   delay(1000);
  22.   Serial.print(“.”);
  23.   }
  24.   Serial.println(“”);
  25.   Serial.println(“WiFi connected successfully”);
  26.   Serial.print(“Got IP: “);
  27.   Serial.println(WiFi.localIP());  //Show ESP32 IP on serial
  28.   server.on(“/”, handle_root);
  29.   server.begin();
  30.   Serial.println(“HTTP server started”);
  31.   delay(100);
  32. }
  33. void loop() {
  34.   server.handleClient();
  35. }
  36. // HTML & CSS contents which display on web server
  37. String HTML = “<!DOCTYPE html>
  38. <html>
  39. <body>
  40. <h1>My First Web Server with ESP32 – Station Mode</h1>
  41. </body>
  42. </html>”;
  43. // Handle root url (/)
  44. void handle_root() {
  45.   server.send(200, “text/html”, HTML);
  46. }

复制代码

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

<ignore_js_op>esp32  链接wifi  热点

 

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

注意:您的PC(您的浏览器)应该连接到与ESP32相同的路由器。

<ignore_js_op>esp32  链接wifi  热点

 

 

代码解释

  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() {
  2.   server.send(200, “text/html”, HTML);
  3. }

复制代码

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

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

 

在接入点模式(AP)中设置ESP32

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

<ignore_js_op>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. */
  7. #include <WiFi.h>
  8. #include <WebServer.h>
  9. // SSID & Password
  10. const char* ssid = “Electripeak”;  // Enter your SSID here
  11. const char* password = “123456789”;  //Enter your Password here
  12. // IP Address details
  13. IPAddress local_ip(192, 168, 1, 1);
  14. IPAddress gateway(192, 168, 1, 1);
  15. IPAddress subnet(255, 255, 255, 0);
  16. WebServer server(80);  // Object of WebServer(HTTP port, 80 is defult)
  17. void setup() {
  18.   Serial.begin(115200);
  19.   // Create SoftAP
  20.   WiFi.softAP(ssid, password);
  21.   WiFi.softAPConfig(local_ip, gateway, subnet);
  22.   Serial.print(“Connect to My access point: “);
  23.   Serial.println(ssid);
  24.   server.on(“/”, handle_root);
  25.   server.begin();
  26.   Serial.println(“HTTP server started”);
  27.   delay(100);
  28. }
  29. void loop() {
  30.   server.handleClient();
  31. }
  32. // HTML & CSS contents which display on web server
  33. String HTML = “<!DOCTYPE html>
  34. <html>
  35. <body>
  36. <h1>My First Web Server with ESP32 – AP Mode </h1>
  37. </body>
  38. </html>”;
  39. // Handle root url (/)
  40. void handle_root() {
  41.   server.send(200, “text/html”, HTML);
  42. }

复制代码

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

<ignore_js_op>esp32  链接wifi  热点

 

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

<ignore_js_op>esp32  链接wifi  热点

 

 

代码解释

  1. const char* ssid = “Electropeak”;  
  2. const char* password = “123456789”;

复制代码

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

  1. IPAddress local_ip(192, 168, 1, 1);
  2. IPAddress gateway(192, 168, 1, 1);
  3. IPAddress subnet(255, 255, 255, 0);

复制代码

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

  1. WiFi.softAP(ssid, password);
  2. WiFi.softAPConfig(local_ip, gateway, subnet);

复制代码

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

 

其余代码与STA模式相同。


程序员灯塔
转载请注明原文链接:esp32 链接wifi 热点
喜欢 (0)