WebServer

EXP1 WebServer (STA mode) LED Control

響應式網頁

EXP2 WebServer (AP mode) LED Control

EXP3 WebServer (STA mode) LDR

HTML

DEMO

參考

IOT > IOT Server > Start Server Port

程式碼

WiFiServer server(80);

void setup()

{

server.begin();

}

IOT > IOT Server > Client IP

程式碼

client.remoteIP();

IOT > IOT Server > Wait Connection：

程式碼

loop()

WiFiClient client = server.available();

if (!client) { return; }

while(!client.available()){ delay(1); }

IOT > IOT Server > Server Read request：

程式碼

loop()

client.readStringUntil('\r')

String ReadIncomingRequest(){

while(client.available()) {

ClientRequest = (client.readStringUntil('\r'));

if ((ClientRequest.indexOf("HTTP/1.1")>0)&&(ClientRequest.indexOf("/favicon.ico")<0)){

myresultat = ClientRequest;

}

return myresultat;

}

void loop()

{

ReadIncomingRequest();

}

IOT > IOT Server > Answer "html 語法"：

void loop()

{

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("");

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("HTML語法");

client.println("</html>");

delay(1);

}

IOT > IOT Server > Wait Connection：

WiFiClient client;

void loop()

{

client = server.available();

if (!client) { return; }

while(!client.available()){ delay(1); }

}

IOT > IOT Server > client flush

void loop()

{

client.flush();

}

IOT > Web page > Answer Web page

void loop()

{

client.println("HTTP/1.1 200 OK");

client.println("Content-Type: text/html");

client.println("");

client.println("<!DOCTYPE HTML>");

client.println("<html>");

client.println("<head>");

client.println("</head>");

client.println("<body>");

client.println("</body>");

client.println("</html>");

delay(1);

}

IOT > Web page > Web page HTML

void loop()

{

client.println("");

}

IOT > Web page > Heading

void loop()

{

client.println("<h1 style=""color:#ff0000"">");

client.println("");

client.println("</h1>");

}

IOT > Web page > New line

void loop()

{

client.println("<br>");

}

IOT > Web page > SPAN

void loop()

{

client.println("<span style=""color:#ff0000;font-size:14px"">");

client.println("");

client.println("</span>");

}

IOT > Web page > Button

void loop()

{

client.println("<a href=");

client.println("");

client.println("><button>");

client.println("ON");

client.println("</button></a>");

}

String > String Index of：找出字串 "xxx" 在 String 中的位置

request.indexOf("")

EXP1 WebServer (STA mode) LED Control

Welcome ESP32 Webserver LED Control<br>Use http://IP/on to turn on integrated LED. <br>Use http://IP/off to turn off integrated LED. <br>

開 Chrome，網址列輸入 ip，進入首頁

開 Chrome，網址列輸入 ip/on，開啟內建 LED

開 Chrome，網址列輸入 ip/off，關閉內建 LED

響應式網頁

開 Chrome，網址列輸入 ip，進入首頁

開 Chrome，網址列輸入 ip/on，開啟內建 LED

開 Chrome，網址列輸入 ip/off，關閉內建 LED

EXP2 WebServer (AP mode) LED Control

Welcome ESP32 Webserver LED Control<br>Use http://IP/on to turn on integrated LED. <br>Use http://IP/off to turn off integrated LED. <br>

開 Chrome，網址列輸入 ip，進入首頁

開 Chrome，網址列輸入 ip/on，開啟內建 LED

開 Chrome，網址列輸入 ip/off，關閉內建 LED

EXP3 WebServer (STA mode) LDR

client.println("<meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <meta http-equiv=\"refresh\" content=\"5\"> <title>ESP32 WebServer (STA)</title>");

client.println("<p id=\"datetime\"></p>");

client.println("<script> var now = new Date(); var datetime = now.toLocaleString(); document.getElementById(\"datetime\").innerHTML = datetime; </script>");