A webszerver ESP8266-on történő beállítása nagyon kevés kódot igényel, és meglepően egyszerű. Ez a sokoldalú ESP8266WiFi könyvtár által biztosított funkcióknak köszönhető.
A példa célja egy webböngészőben megnyitható weboldal elkészítése. Ezen az oldalon az ESP analóg bemeneti kivezetésének aktuális nyers leolvasását kell mutatnia.
Kezdjük egy szerverobjektum létrehozásával.
WiFiServer server(80);
A szerver a 80-as porton válaszol a klienseknek (ebben az esetben a webböngészőknek), amely egy szabványos port, amely a webböngészők webszervereivel kommunikál.
Ezután írjunk egy rövid függvényt prepareHtmlPage(), amely egy String osztályú változót ad vissza, amely tartalmazza a weboldal tartalmát. Ezt a változót ezután átadjuk a szervernek, hogy átadhassuk egy kliensnek.
String prepareHtmlPage()
{
String htmlPage;
htmlPage.reserve(1024); // megakadályozza a ram töredezettségét
htmlPage = F("HTTP/1.1 200 OK\r\n"
"Content-Type: text/html\r\n"
"Connection: close\r\n" // a kapcsolat a válasz befejezése után megszakad
"Refresh: 5\r\n" // az oldal automatikus frissítése 5 másodpercenként
"\r\n"
"<!DOCTYPE html>"
"<html>"
"Analog input: ");
htmlPage += analogRead(A0);
htmlPage += F("</html>"
"\r\n");
return htmlPage;
}
A funkció nem csinál semmi különöset, csak összeállít egy szöveges fejlécet és az oldal HTML-tartalmát.
A fejléc tájékoztatja az ügyfelet, hogy milyen típusú tartalmat kell követnie, és hogyan lesz kiszolgálva:
Content-Type: text/html
Connection: close
Refresh: 5
Példánkban a tartalom típusa text/html, kiszolgálás után a kapcsolat megszakad, és a kliensnek 5 másodpercenként újra le kell kérnie a tartalmat. A fejléc egy üres sorral zárul \r\n. Ezzel kell elkülöníteni a fejlécet az azt követő tartalomtól.
<!DOCTYPE html>
<html>
Analog input: [Value]
</html>
A tartalom két alapvető HTML címkét tartalmaz, az egyik a <!DOCTYPE html> HTML dokumentumtípust jelöli, a másik pedig a dokumentum <html> elejét és végét </html>. Belül van egy nyers érték, amelyet az ESP analóg bemenetéről olvasott be, az analogRead(A0) String típusba konvertálva.
analogRead(A0)
Ennek a weboldalnak a kiszolgálása a loop()-ban történik, ahol a szerver arra vár, hogy egy új kliens csatlakozzon, és kérést tartalmazó adatokat küldjön:
void loop()
{
WiFiClient client = server.accept();
if (client)
{
// van egy új ügyfelünk, aki kérést küld
}
}
Új kliens csatlakoztatása után a szerver elolvassa az ügyfél kérését, és kinyomtatja egy soros monitoron.
while (client.connected())
{
if (client.available())
{
String line = client.readStringUntil('\r');
Serial.print(line);
}
}
Az ügyféltől érkező kérést egy üres sor jelzi. Ha megtaláljuk ezt a jelölést, visszaküldhetjük a weboldalt, és a break segítségével kiléphetünk a while() ciklusból.
if (line.length() == 1 && line[0] == '\n')
{
client.println(prepareHtmlPage());
break;
}
A teljes folyamat az ügyféllel való kapcsolat leállításával zárul:
client.stop();
Előtte azonban nem szakíthatjuk meg az ügyfél kérését:
while (client.available()) {
// de először hagyja, hogy az ügyfél befejezze a kérését,
// amely a protokolloknak való diplomáciai megfelelést jelenti
// (és egyébként egyes kliensek panaszkodhatnak, például curl)
// (ez például egy megfelelő webszerver-könyvtár használatát részesíti előnyben)
client.read();
}
A teljes vázlatot az alábbiakban mutatjuk be.
#include <ESP8266WiFi.h>
const char* ssid = "********";
const char* password = "********";
WiFiServer server(80);
void setup()
{
Serial.begin(115200);
Serial.println();
Serial.printf("Connecting to %s ", ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(500);
Serial.print(".");
}
Serial.println(" connected");
server.begin();
Serial.printf("Web server started, open %s in a web browser\n", WiFi.localIP().toString().c_str());
}
// weblap elkészítése egy kliensnek (böngészőnek) történő elküldéshez
String prepareHtmlPage()
{
String htmlPage;
htmlPage.reserve(1024); // megakadályozza a ram töredezettségét
htmlPage = F("HTTP/1.1 200 OK\r\n"
"Content-Type: text/html\r\n"
"Connection: close\r\n" // a kapcsolat a válasz befejezése után megszakad
"Refresh: 5\r\n" // az oldal automatikus frissítése 5 másodpercenként
"\r\n"
"<!DOCTYPE html>"
"<html>"
"Analog input: ");
htmlPage += analogRead(A0);
htmlPage += F("</html>"
"\r\n");
return htmlPage;
}
void loop()
{
WiFiClient client = server.accept();
// várja meg, amíg egy kliens (böngésző) csatlakozik
if (client)
{
Serial.println("\n[Client connected]");
while (client.connected())
{
// soronként olvassa el, amit a kliens (böngésző) kér
if (client.available())
{
String line = client.readStringUntil('\r');
Serial.print(line);
// várja meg az ügyfél kérésének végét, amely üres sorral van megjelölve
if (line.length() == 1 && line[0] == '\n')
{
client.println(prepareHtmlPage());
break;
}
}
}
while (client.available()) {
// de először hagyja, hogy az ügyfél befejezze a kérését,
// amely a protokolloknak való diplomáciai megfelelést jelenti
// (és egyébként egyes kliensek panaszkodhatnak, például curl)
// (ez például egy megfelelő webszerver-könyvtár használatát részesíti előnyben)
client.read();
}
// zárja le a kapcsolatot:
client.stop();
Serial.println("[Client disconnected]");
}
}
Frissítse az ssid-t és a password-öt a vázlatban, hogy megfeleljenek a hozzáférési pont hitelesítő adatainak. Töltse be a vázlatot az ESP modulba, és nyisson meg egy soros monitort. Először megerősítést kell látnia, hogy a modul a hozzáférési ponthoz csatlakozott és a webszerver elindult.
Connecting to sensor-net ........ connected
Web server started, open 192.168.1.104 in a web browser
Írja be a megadott IP-címet egy webböngészőbe. Látnia kell az ESP8266 által kiszolgált oldalt:
Az oldal 5 másodpercenként frissül. Minden alkalommal, amikor ez megtörténik, látnia kell egy kérést az ügyféltől (a webböngészőtől) kinyomtatva a soros monitoron:
[Client connected]
GET / HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: en-US
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Accept-Encoding: gzip, deflate
Host: 192.168.1.104
DNT: 1
Connection: Keep-Alive
[client disconnected]
A fenti példa azt mutatja, hogy egy webszerver ESP8266-on szinte pillanatok alatt beállítható. Az ilyen szerverek könnyedén fel tudják állítani a sokkal erősebb hardverek és szoftverek kérését, például egy webböngészővel rendelkező számítógépet. Nézzen meg más osztályokat, például az ESP8266WebServer-t, amelyek segítségével fejlettebb alkalmazásokat programozhat.
Ha szeretne egy másik szerver példát kipróbálni, nézze meg a WiFiManualWebServer.ino webhelyet, amely lehetőséget biztosít a GPIO PIN-kód be- és kikapcsolására a webböngészőben.
A szerverek megvalósításához és kezeléséhez biztosított funkciók listáját a Szerver osztály dokumentációjában találja.
© Copyright 2017, Ivan Grokhotkov Revision b080c507. Fordította: Maczák András