Blog

ESP8266入門指南-ESP8266第一台Web Server

事實上，Web服務器要執行起來比聽起來容易得多，因為ESP8266 Arduino Core包含一些出色的程式庫，可以為您處理幾乎所有事情。讓我們看一個基本的Hello World！範例。
許多程式碼與Wi-Fi和mDNS範例中的程式碼相同。
實際上服務器程式碼非常簡單。首先，我們建一個服務器實體，該實體在port 80上監聽HTTP請求。這是Web服務器的預設port。在設定中，我們告訴服務器如何處理某些HTTP請求。如果請求URI’/’，則服務器應使用HTTP狀態代碼200（Ok）進行回覆，然後發送帶有“ Hello world！”字樣的回應。我們寫一段回應的程式碼放在handleRoot函數中，並告訴服務器在請求“ /”時執行該回應，使用 server.on 函式。
 
我們沒有指定如果客戶端請求除“ /”以外的任何URI時服務器應該做什麼。它應該以HTTP狀態404（未找到）和一則針對用戶的消息作為回應。我們也將其放在一個函數中，並使用 server.onNotFound 告訴它在收到未使用URI指定的請求時應執行該命令 server.on .
 
接著，我們開始使用監聽HTTP請求 server.begin 。
在循環期間，我們通過持續運行不斷檢查是否收到了新的HTTP請求 server.handleClient 。如果handleClient檢測到新請求，它將自動執行我們在設置中指定的正確功能。
 
要對其進行測試，請上傳程式碼，打開新的瀏覽器選項卡，然後瀏覽至http：//esp8266.local。你應該得到網頁回覆 Hello，World！ 。而如果您嘗試轉到其他頁面http：//esp8266.local/test，則應收到404錯誤： 404：找不到 .
 

經由Wi-Fi打開和關閉LED

我們可以使用Web服務器來提供交互式頁面，並回應某些POST請求。在以下示例中，ESP8266託管一個有按鍵的網頁。當按下按鍵時，瀏覽器將POST請求發送到/ LED。當ESP在/ LED URI上收到這樣的POST請求時，它將打開或關閉LED，然後使用按鈕將瀏覽器重定向回主頁。
 
為了執行此重新導向，ESP必須在回應中添加一個Location header，並使用303（請參閱其他）HTTP狀態代碼。
 
在瀏覽器中發送POST請求的按鈕是HTML form的一部分。您必須指定要將請求發送到的目標URI和請求方法，在這種情況下，分別是“ / LED”和POST。
 
請注意，我將回應的內容類型從”text/plain”更改為”text/html”。如果以plain text形式發送，則瀏覽器會將其顯示為text，而不是將其解釋為HTML並將其顯示為按鈕。
server.on 的function具有三個參數：URI、請求方法（GET或POST）和要執行的函數。
 
將LED連接到GPIO2，上傳程式碼。然後轉到http：//esp8266.local/，點擊按鈕開啟或關閉LED。
 
您可以在Chrome（F12）中打開開發人員選項，以查看單擊按鈕時發出的HTTP請求：您會看到它首先發送POST請求，然後以303（See Other）狀態顯示為HTTP回應。該回應還具有一個包含URI“ /”的Location標頭，因此瀏覽器將向該新位置的URI發送GET請求：
如果檢查頁面源始碼（CTRL + U），則可以看到使用的簡單HTML表單：
<form action="/LED" method="POST">
    <input type="submit" value="Toggle LED">
</form>

使用HTTP POST將數據發送到ESP

在上面範例中，我們向ESP8266發送一個空的POST請求。在上一章中，我解釋了可以在POST請求的body中發送各種數據。
 
接下來的範例中，我將向您展示如何向ESP發送用戶名和密碼。然後，ESP將檢查它們是否正確，並在適當的頁面上回應請求。
handleRoot中的HTML是：
<form action="/login" method="POST">
    <input type="text" name="username" placeholder="Username"></br>
    <input type="password" name="password" placeholder="Password"></br>
    <input type="submit" value="Login">
</form>
<p>
    Try 'Terry Lee' and 'password123' ...
</p>
上傳程式碼並轉到http：//esp8266.local/，然後在用戶名字欄位中鍵入”Terry Lee”，在密碼欄位中鍵入“ password123”，然後點擊“登錄”。您應該會看到一個歡迎畫面。如果您保留兩個欄立中的一個或兩個都為空，則會收到400（錯誤請求）錯誤。如果您輸入了錯誤的用戶名或密碼，則應該收到401（未經授權）錯誤。
 
POST主體的數據可以使用 server.arg（”key”） ，然後您可以使用檢查特定密鑰是否存在server.hasArg（” key”） 。ESP8266上的key name對應於網頁上HTML形式的name參數。
 
收到POST請求後，我們首先檢查是否存在必要的參數（用戶名和密碼）。如果不是這種情況，我們將發送400（無效請求）狀態。
然後，我們檢查憑據是否與”Terry Lee”和”password123″匹配。如果是這種情況，我們會以200（確定）的狀態和歡迎頁面進行回應。如果用戶名和密碼不匹配，我們將發送401（未經授權）狀態。
 

內嵌函數

上面的範例中，我們通過了 handleRoot 和 handleNotFound 到 服務器上 函數作為參數（callback函式）。但是，在某些情況下，僅內嵌編寫函數的定義更容易理解，如下所示：
void setup(){
  // ...
  server.onNotFound([](){
    server.send(404, "text/plain", "404: Not found");
  });
}
Tags:

發佈留言