碼上歡樂
相關內容    簡體    繁體

esp32 鏈接wifi 熱點

本文轉載自   查看原文   2021-06-10 13:29   3697 

在本篇文章中，您將學習到如何使用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模式相同。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ESP32 Ethernet to wifi 關於esp32的省電模式的WiFi連接 Arduino ESP32 WIFI功能 Arduino ESP32 WiFi功能 野路子學習esp32(十三) 自動鏈接WiFi並啟動MQTT 學習記錄@a.宏萬 ESP32那些事兒(六)：功能開發之藍牙及WiFi功能 ESP32省電模式連接WIFI筆記 ESP32 TIMER ESP32 ADC ESP32 DAC
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM