zoukankan      html  css  js  c++  java

  • 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模式相同。
  • 相关阅读:
    抽象工厂模式(Abstract Factory)
    工厂模式（Factory Method Pattern）
    简单工厂模式（Simple Factory Pattern）
    UML类图
    .Net之美读书笔记10(网络编程一)
    .Net之美读书笔记16
    tensorflow：验证码的识别（下）
    OpenCV-Python入门教程6-Otsu阈值法
    OpenCV-Python入门教程5-阈值分割
    OpenCV-Python入门教程4-颜色空间转换
  • 原文地址：https://www.cnblogs.com/crazyxu/p/14870697.html
Copyright © 2011-2022 走看看