Try   HackMD

如何在ESP32上架設網站-第五週

tags: NKFW第二届

❓如果使用上有值得思考的問題，就寫在此處

⚠️注意（觀念澄清）

以下details裏面有提示，如果同學還是想不到，可以按開 details 裡面有些提示

網路概論復習

Week 5 English ver.

網路的運作原理

先來復習第一二週上課的内容
網路之所以能夠互相通聯的原因是因為我們互相都連接在一起

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

而我們常常說的中華電信就是擔任 ISP 的角色
並透過中華電信與纜線公司傳輸到外網去

通常家中的架構

通常你們家裡會有一臺中華電信給你們的機臺，又稱為小烏龜

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

通常後面就是連接家裡的 WIFI 基地台
Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

如果家裡網路孔比較多的話就會加入交換器
Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

小烏龜 -> 交換器 -> WIFI基地台

網路的基本概念

而今天要把資料從 A 傳到 B，一定要有些基本資訊才可以把資料成功的送達
我們可以把資料的傳送比喻成網購

伺服器内部路由

（比喻）當你今天在網路上訂了一臺電腦，他就會從倉庫開始調貨到卡車上
（務實）網路亦有這樣的功能，我們所説的包裹網路上對應的就是封包，今天伺服器收到了一個請求（下單）就會把封包丟到小烏龜上

公網路由

（比喻）而今天當你的包裹已經到了卡車上，卡車就會把他載走，然後跑在國道上面
（務實）網路上對應的作業就是在中華電信的主幹網路進行封包傳輸

封包到達客戶端

（比喻）而最後卡車下了國道後面到你家了，然後你就把電腦搬到你的房間
（務實）封包傳輸到你家的小烏龜上，到達你的電腦

問題點

那在這整個過程中，宅配要怎麽知道你家在哪裡？
就是透過你下單時候給他的基本資料的地址
網路也是一樣，我們必須透過給基本資料才知道封包要怎麽送，而地址在網路的世界就稱為

IP（Internet Protocol）

可是家裡那麽多人你怎麽知道要給誰？這個時候宅配司機就會問你的名字
在網路的世界也是一樣，當你送到了家裡的小烏龜之後，小烏龜就會問家裡的網路設備這個封包是誰的，而這個網路世界中的名字就是

MAC地址

WIFI的運作原理

WIFI是什麽

WIFI 又稱為 Wireless Fidelity，就是使用無線電的方式把資料傳輸，過去網路只能透過有線的方式進行傳輸，而當無線電技術成熟了之後就開始被普遍使用在網路傳輸上了

而現代的 WIFI 又可以被分成兩種普遍的頻段
5ghz
2.4ghz

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

那這兩個差在哪裡呢?

5GHZ

  • 速度快
  • 傳輸距離短
  • 訊號傳輸干預比較少

2.4GHZ

  • 速度慢
  • 傳輸距離長
  • 訊號傳輸干預比較多

而我們剛剛說WIFI是一種無線電的應用，那是如何產生無線電的呢?
原理就是透過一直切換電線正負去產生磁場，大家高中都有學過了，當電壓在改變的時候就會產生磁場

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

那我們看一下 ESP32 上的天線就是佈局在那條彎彎曲曲的線上了

ESP32如何實作WIFI功能

而在介紹如何在 ESP32 上實作前
我們要知道 ESP32 上有不同的模式

  1. AP（Access Point）模式
  2. STA (Station) 模式
  3. 雙開

那這兩個模式的差別就在

  1. 只是一個中繼站，無法提供其他功能
  2. 可以提供不同的路由服務
  3. 兩種模式都有的功能

那通常我們在寫 Arduino 的時候會遵守以下的架構


















#include <library.h>

const a;
const b;

void setup(){

functiona.begin();
functionb.begin();

}

void loop(){

//some code

}

我們這個實作要做到的目標是將 ESP32 連上 WIFI 並在Serial Monitor 上面列印出 IP

開始實作前我們先告訴你們一些可以用的函式庫

#include "WiFi.h"







WiFi.begin("WIFI網路名稱","密碼");
//這一行代表啓動 WiFi 模組
WiFi.status();
//查詢目前WIFI狀態，如果 == WL_CONNECTED 則代表已經連綫上了
WiFi.localIP();
//讀取現在 ESP32 的 IP

而這個實作的流程大概如下

  1. 啓動 WIFI
  2. 設定連線的 WIFI 網路
  3. 等待 WIFI 連線
  4. 連線後列印 IP

以下 details 裡面有提示，如果同學還是想不到，可以按開 details 裏面有些提示

針對這個等待 WIFI 連線這個地方
我們需要用到 WiFi.status() 的狀態回傳
我們要確定 WIFI 連上才能繼續下一步






Serial.print("wifi connecting")
while(WiFi.status() != WL_CONNECTED){
    Serial.print(".");
    delay(500);
}

正確的輸出結果應該類似以下的格式

wifi connecting…
192.168.1.24

ESP32上網頁進行 hosting

還記得一二週我們寫的網頁嗎？我們可以把那些檔案寫在 ESP32 裡面的 code 哦！讓在同一個網路底下的電腦都能看到你的網頁！

什麽是 Webserver

當我們今天要把自己網頁放上不論是伺服器或是 ESP32 的時候，我們就需要有一個 Webserver 去幫忙把你的網頁資料給其他人看，那 Webserver 實質上就是理解你打在 google 搜尋欄的路徑，然後回傳資料給你
image

webserver Status Code

同時 Webserver 也有不同的狀態存在，就像大家搶演唱會的票，說 YOASOBI 的票，大家都在 503，這就是 Webserver 回應的 code，那常見的 code 有哪些呢？

狀態 意思
404 找不到網頁
401 需要帳密才能登入
403 沒有授權進入
500 伺服器内部路由問題
503 流量過大

實作一個簡單顯示 hello,ESP32 的一個網頁

那我們依照 arduino coding 架構


















#include <library.h>

const a;
const b;

void setup(){

functiona.begin();
functionb.begin();

}

void loop(){

//some code;

}

我們整理一下我們需要做的步驟

  1. 啓動 WIFI
  2. 建立 webserver 物件
  3. 建立一個 HTML 文檔
  4. 設定連線的 WIFI 網路
  5. 設定 ESP32 模式
  6. 設定網頁路徑
  7. 等待 WIFI 連線
  8. 開啓伺服器
  9. 連線後列印 IP
  10. 持續監控客戶的連線狀況

那我們就一步一步的做下去吧！

以下是我們需要用的函式庫

#include <ESPAsyncWebServer.h>

首先我們先來解釋一些基本的函式和其意義是什麽

Asyncwebserver 就是我們在 ESP32 用的 webserver 函式庫
我們首先要先建立一個伺服器物件

AsyncWebServer server(80);

然後我們需要如何在一個 ESP32 裡面建立一個 HTML 文檔呢？
我們可以參考一下以下的做法









String htmlmodule(){
    String HTML = "\
    <!DOCTYPE html>\
    <html><head><meta charset='utf-8'></head>\
    <body>hello,esp32\
    </body></html>";
    return HTML;
}

而我們在早上的時候，有設定過一次的 WIFI 就可以拿出來用了
同時我們也就能夠應用早上教的 STA 模式進行設定

WiFi.mode(WIFI_STA);

建立完文檔，我們就可以來設定我們的 Webserver 的作動機制了
我們現在要設定當客戶端在瀏覽我們的網站時 ESP32 如何回復
以下是設定的方法





  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    String html = htmlmodule();
    request->send(200, "text/html", html);
  });

這邊要清楚瞭解 [](AsyncWebServerRequest *request){}是指當現在有客戶端在訪問 ESP32 的時候所觸發的，而 server.on() 則是設定路徑，然後執行[](AsyncWebServerRequest *request){}的事情！

最後則是要開啓我們的伺服器了！

server.begin();

在 loop 的裡面則是要擺上一行讓 ESP32 隨時聽取客戶端有沒有連線

server.handleClient();

最後的結果應該像這樣，當你在瀏覽器裡面打你的 ESP32 IP 的時候要看到以下的畫面

Last changed by 
 
NCU NKFW
0
994

Read more

ESP32進階使用方法-第六周

❓如果使用上有值得思考的問題，就寫在此處

May 4, 2024
Final Project-第六周

今天最後要交個你們的就是六周上課的集大成!那我們要交什麽呢？

Apr 24, 2024
排版方式(2)：flex大顯神威

❓如果使用上有值得思考的問題，就寫在此處

Apr 3, 2024
第六周教學内容綱要

教會學員如何使用ESP32實作以下内容

Apr 3, 2024
Read more from NCU NKFW
Published on HackMD