WiFi-ESP8266入门开发(十六)-HTTP服务器
阅读原文时间:2021年04月26日阅读:1

注:对于ESP8266开源技术感兴趣的可以加群,我们一起探索交流学习,群号:579932824。群名:ESP8266开源技术交流群。

介绍

超文本传输​​协议(HTTP)是标准的应用层协议,用作服务器和客户端之间的请求响应协议。

它被广泛应用于物联网(IoT)嵌入式应用,每个传感器都连接到一个服务器,我们可以通过互联网进行控制。

NodeMCU具有可用的Wi-Fi功能。通过这种Wi-Fi功能,NodeMCU可以作为客户端连接到任何Wi-Fi网络,也可以创建其他支持Wi-Fi的设备连接的网络。

NodeMCU作为Wi-Fi使用AP模式的HTTP Server

NodeMCU wi-fi具有接入点(AP)模式,通过它可以创建无线LAN,任何支持Wi-Fi的设备都可以连接,如下图所示。

NodeMCU作为使用Wi-Fi AP模式的HTTP Server

我们可以设置AP模式下的SSID和密码,这个模式用来连接到其他设备。

NodeMCU作为Wi-Fi使用STA模式的HTTP Server

NodeMCU具有Station(STA)模式,可以使用该模式连接到现有的Wi-Fi网络,并可以充当该网络分配的IP地址的HTTP服务器。

NodeMCU作为使用Wi-Fi STA模式的HTTP Server

NodeMCU从连接的Wi-Fi路由器获取IP。使用此IP地址,它可以充当任何Wi-Fi设备可以连接的HTTP服务器。

让我们编写Arduino Sketch,使NodeMCU成为具有Wi-Fi STA / AP模式的HTTP服务器,并控制从客户端连接到服务器端的LED。

在这里,我们已经连接LED到引脚号。2即NodeMCU板上的D2引脚,如下图所示。

客户端的HTML页面

由于我们正在开发用于LED开/关功能的HTTP服务器,因此我们将制作一个简单的HTML页面,这个页面将在客户端可见,并且能够接通/断开LED的用户输入。这是用户友好的按钮输入代表,从用户点击输入。

我们需要为LED ON和LED OFF状态编写两个HTML页面,即当客户点击LED ON按钮时,下一步我们需要提供LED OFF的选项。以下是LED ON和LED OFF状态显示的两个HTML代码片段。

用于LED的HTML代码片段

<!DOCTYPE html>
<html>
<head><title>LED Control</title></head>
<body>
<h1>LED</h1>
<p>Click to switch LED on and off.</p>
<form method="get">
<input type="button" value="LED ON" onclick="window.location.href='/ledon'">
</form>
</body>
</html>

关闭LED的HTML代码片段

<!DOCTYPE html>
<html>
<head><title>LED Control</title></head>
<body>
<h1>LED</h1>
<p>Click to switch LED on and off.</p>
<form method="get">
<input type="button" value="LED OFF" onclick="window.location.href='/ledoff'">
</form>
</body>
</html>

从上面的两个HTML代码片断中,我们可以看到只有LED ON和LED OFF状态的形式不同。

我们来看看HTML行

<!DOCTYPE html>:该声明将该文档定义为HTML,并帮助浏览器正确显示网页。它只能出现一次,在页面的顶部。

:这个元素是HTML页面的根元素

:这个元素包含关于文档的元信息

</strong>:这个元素指定文档的标题</p> <p><strong><body></strong>:这个元素包含可见的页面内容,即文档的主体</p> <p><strong><h1></strong>:这个元素定义了标题的最大字体大小。同样的,我们可以使用<h2> / <h3>等来标题的较小的字体大小。</p> <p><strong><p></strong>:这个元素定义了一个段落。</p> <p><strong><form></strong>:这个元素定义了一个用来收集用户输入的表单</p> <p><strong>window.location.href</strong>:这是一个属性,会告诉我们当前的URL位置。更改属性的值将重定向页面。</p> <p>比如<code>window.location.href='/ledon'</code>将当前页面重定向到URL <code>current_url/ledon</code> 页面。如果当前位置是<code>http://192.168.0.1</code>那么它将重定向到<code>http://192.168.0.1/ledon</code> 页面。页面重定向动作是在点击事件(例如点击按钮)上进行的。  </p> <p>这里我们使用上面提到的概念(页面重定向)将客户端从LED ON页面重定向到LED OFF页面,反之亦然。</p> <p>要了解有关HTML的更多信息,请参阅<a rel="nofollow noopener noreferrer" href="https://www.w3schools.com/html/default.asp">https://www.w3schools.com/html/default.asp</a></p> <p>现在,我们可以发送上面的HTML片段,当客户端连接到服务器,也当客户端点击按钮。</p> <p><strong>程序</strong></p> <p>在Wi-Fi接入点(AP)模式下,NodeMCU创建服务器,因此我们可以设置其IP地址,IP子网掩码和IP网关。</p> <p>我们来看下SSID,密码加入网络和AP模式的地址</p> <ul> <li>SSID =“NodeMCU”</li> <li>密码=“12345678”</li> <li>IP =“192.168.2.1”</li> <li>Sub netmask =“255.255.255.0”</li> <li>网关=“192.168.2.1”</li> </ul> <h1 id="带有wi-fi-ap模式的http服务器的arduino-sketch">带有Wi-Fi AP模式的HTTP服务器的Arduino Sketch</h1> <pre><code>#include <ESP8266WiFi.h> #include <ESP8266WebServer.h> /* Put your SSID & Password */ const char* ssid = "NodeMCU"; // Enter SSID here const char* password = "12345678"; //Enter Password here /* Put IP Address details */ IPAddress local_ip(192,168,2,1); IPAddress gateway(192,168,2,1); IPAddress subnet(255,255,255,0); ESP8266WebServer server(80); uint8_t LEDpin = D2; bool LEDstatus = LOW; void setup() { Serial.begin(9600); pinMode(LEDpin, OUTPUT); WiFi.softAP(ssid, password); WiFi.softAPConfig(local_ip, gateway, subnet); delay(100); server.on("/", handle_OnConnect); server.on("/ledon", handle_ledon); server.on("/ledoff", handle_ledoff); server.onNotFound(handle_NotFound); server.begin(); Serial.println("HTTP server started"); } void loop() { server.handleClient(); if(LEDstatus) digitalWrite(LEDpin, HIGH); else digitalWrite(LEDpin, LOW); } void handle_OnConnect() { LEDstatus = LOW; server.send(200, "text/html", SendHTML(false)); } void handle_ledon() { LEDstatus = HIGH; server.send(200, "text/html", SendHTML(true)); } void handle_ledoff() { LEDstatus = LOW; server.send(200, "text/html", SendHTML(false)); } void handle_NotFound(){ server.send(404, "text/plain", "Not found"); } String SendHTML(uint8_t led){ String ptr = "<!DOCTYPE html>\n"; ptr +="<html>\n"; ptr +="<head>\n"; ptr +="<title>LED Control</title>\n"; ptr +="</head>\n"; ptr +="<body>\n"; ptr +="<h1>LED</h1>\n"; ptr +="<p>Click to switch LED on and off.</p>\n"; ptr +="<form method=\"get\">\n"; if(led) ptr +="<input type=\"button\" value=\"LED OFF\" onclick=\"window.location.href='/ledoff'\">\n"; else ptr +="<input type=\"button\" value=\"LED ON\" onclick=\"window.location.href='/ledon'\">\n"; ptr +="</form>\n"; ptr +="</body>\n"; ptr +="</html>\n"; return ptr; }</code></pre> <p><strong>注意:</strong>成功上传以上草图客户端需要先连接到NodeMCU创建的网络。</p> <p>从wifi连接到NodeMCU网络后,在浏览器中输入服务器地址,<code>http://server_ip_address</code>例如在我们的情况下<code>http://192.168.2.1</code>_。_按Enter键后,我们可以看到服务器的HTML页面响应,如下图所示。现在只需点击按钮来改变LED的状态。</p> <p><img class='lazyload' data-src="https://article.cdnof.com/2104/508de9f6-6037-4044-a4d8-3993e4fdfe20.png" alt="" /></p> <p>现在,让我们使用Wi-Fi站模式对NodeMCU执行HTTP服务器。</p> <p>在Wi-Fi Station(STA)模式下,NodeMCU从Wi-Fi路由器(接入点)获取IP地址。如果我们也在同一个网络中,那么我们可以直接使用IP地址连接到NodeMCU HTTP Server。</p> <h1 id="带有wi-fi-sta模式的http服务器的arduino-sketch">带有Wi-Fi STA模式的HTTP服务器的Arduino Sketch</h1> <pre><code>#include <ESP8266WiFi.h> #include <ESP8266WebServer.h> /*Put your SSID & Password*/ const char* ssid = "ssid"; // Enter SSID here const char* password = "password"; //Enter Password here ESP8266WebServer server(80); uint8_t LEDpin = D2; bool LEDstatus = LOW; void setup() { Serial.begin(9600); delay(100); pinMode(LEDpin, OUTPUT); Serial.println("Connecting to "); Serial.println(ssid); //connect to your local wi-fi network WiFi.begin(ssid, password); //check wi-fi is connected to wi-fi network while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected..!"); Serial.print("Got IP: "); Serial.println(WiFi.localIP()); server.on("/", handle_OnConnect); server.on("/ledon", handle_ledon); server.on("/ledoff", handle_ledoff); server.onNotFound(handle_NotFound); server.begin(); Serial.println("HTTP server started"); } void loop() { server.handleClient(); if(LEDstatus) digitalWrite(LEDpin, HIGH); else digitalWrite(LEDpin, LOW); } void handle_OnConnect() { LEDstatus = LOW; server.send(200, "text/html", SendHTML(false)); } void handle_ledon() { LEDstatus = HIGH; server.send(200, "text/html", SendHTML(true)); } void handle_ledoff() { LEDstatus = LOW; server.send(200, "text/html", SendHTML(false)); } void handle_NotFound(){ server.send(404, "text/plain", "Not found"); } String SendHTML(uint8_t led){ String ptr = "<!DOCTYPE html>\n"; ptr +="<html>\n"; ptr +="<head>\n"; ptr +="<title>LED Control</title>\n"; ptr +="</head>\n"; ptr +="<body>\n"; ptr +="<h1>LED</h1>\n"; ptr +="<p>Click to switch LED on and off.</p>\n"; ptr +="<form method=\"get\">\n"; if(led) ptr +="<input type=\"button\" value=\"LED OFF\" onclick=\"window.location.href='/ledoff'\">\n"; else ptr +="<input type=\"button\" value=\"LED ON\" onclick=\"window.location.href='/ledon'\">\n"; ptr +="</form>\n"; ptr +="</body>\n"; ptr +="</html>\n"; return ptr; }</code></pre> <p><strong>注意:</strong>在Wi-Fi站模式下,我们需要输入现有网络的ssid和密码。连接到WiFi网络后,在浏览器中输入服务器地址即<code>http://assigned_ip_address</code>_。_按下回车键后,我们可以在浏览器中看到服务器的HTML页面响应,如上图所示</p> <hr /> <p>支持文件</p> <p>源代码</p> <ul> <li><p>NodeMCU HTTP服务器Arduino草图 <a rel="nofollow noopener noreferrer" href="http://www.electronicwings.com/download/attachment=Sat-08-17-16-57-38.NodeMCU_HTTP_Server.zip">下载</a> </p> <p>  95</p></li> </ul></div></div><div class="MuiGrid-root jss8 MuiGrid-item MuiGrid-grid-xs-true MuiGrid-grid-md-3"><div class="MuiTypography-root jss26 MuiTypography-body1"><div class="MuiTypography-root jss27 MuiTypography-body1"><canvas style="height:108px;width:108px" height="108" width="108"></canvas><div class="MuiTypography-root jss28 MuiTypography-body1"><p class="MuiTypography-root jss29 MuiTypography-body1">手机扫一扫</p><p class="MuiTypography-root jss29 MuiTypography-body1">移动阅读更方便</p></div></div></div><div class="MuiTypography-root jss9 MuiTypography-body1"><div class="MuiTypography-root jss30 MuiTypography-body1" style="height:150px"><div class="swiper-container jss32"><div class="swiper-pagination"></div><div class="swiper-wrapper"><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/aliyun"><img alt="阿里云服务器" class="jss31" src="https://article.cdnof.com/promotion/aliyun.jpg"/></a></div><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/tencent"><img alt="腾讯云服务器" class="jss31" src="https://article.cdnof.com/promotion/tencent.jpg"/></a></div><div class="swiper-slide jss32"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover jss32 MuiTypography-colorInherit" target="_blank" rel="nofollow noopener noreferrer" href="https://qd.rs/qiniu"><img alt="七牛云服务器" class="jss31" src="https://article.cdnof.com/promotion/qiniu.png"/></a></div></div></div></div></div><div class="MuiTypography-root MuiTypography-body1"><div class="MuiTypography-root jss33 MuiTypography-body1"><p class="MuiTypography-root jss34 MuiTypography-body1">你可能感兴趣的文章</p><div class="MuiList-root MuiList-padding" aria-label="main mailbox folders"></div></div></div></div></div></div><footer style="margin-top:30px"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter">Copyright © <a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit" href="https://v2as.com" title="哇哦,有大量工具等你探索">V2AS | 问路</a> <!-- -->2024<!-- --> <!-- -->.</p><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary MuiTypography-alignCenter"><a class="MuiTypography-root MuiLink-root MuiLink-underlineHover MuiTypography-colorInherit" rel="nofollow noopener noreferrer" href="https://beian.miit.gov.cn/">浙ICP备15029886号</a></p></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"article":{"article_id":"0f9eeee9-c10b-4f54-b65a-2a94db4ee970","title":"WiFi-ESP8266入门开发(十六)-HTTP服务器","link":"","description":"注:对于ESP8266开源技术感兴趣的可以加群,我们一起探索交流学习,群号:579932824。群名:ESP8266开源技术交流群。 \n介绍 \n超文本传输​​协议(HTTP)是标准的应用层协议,用作服务器和客户端之间的请求响应协议。 \n它被广泛应用于物联网(IoT)嵌入式应用,每个传感器都连接到一个服务器,我们可以通过互联网进行控制。 \nNodeMCU具有可用的Wi-Fi功能。通过这种Wi-Fi功","image":"https://article.cdnof.com/2104/597393b4-d010-483b-9836-e0225bd91c58.png","keywords":["var","ESP8266","LED","HTTP","服务器","ptr","csdn","server","window","NodeMCU"],"created_at":"2021-04-26T00:45:15.738Z","html":"\u003ch1 id=\"注:对于esp8266开源技术感兴趣的可以加群,我们一起探索交流学习,群号:579932824。群名:esp8266开源技术交流群。\"\u003e注:对于ESP8266开源技术感兴趣的可以加群,我们一起探索交流学习,群号:579932824。群名:ESP8266开源技术交流群。\u003c/h1\u003e\n\u003ch1 id=\"介绍\"\u003e介绍\u003c/h1\u003e\n\u003cp\u003e超文本传输​​协议(HTTP)是标准的应用层协议,用作服务器和客户端之间的请求响应协议。\u003c/p\u003e\n\u003cp\u003e它被广泛应用于物联网(IoT)嵌入式应用,每个传感器都连接到一个服务器,我们可以通过互联网进行控制。\u003c/p\u003e\n\u003cp\u003eNodeMCU具有可用的Wi-Fi功能。通过这种Wi-Fi功能,NodeMCU可以作为客户端连接到任何Wi-Fi网络,也可以创建其他支持Wi-Fi的设备连接的网络。\u003c/p\u003e\n\u003ch1 id=\"nodemcu作为wi-fi使用ap模式的http-server\"\u003eNodeMCU作为Wi-Fi使用AP模式的HTTP Server\u003c/h1\u003e\n\u003cp\u003eNodeMCU wi-fi具有接入点(AP)模式,通过它可以创建无线LAN,任何支持Wi-Fi的设备都可以连接,如下图所示。\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2104/597393b4-d010-483b-9836-e0225bd91c58.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eNodeMCU作为使用Wi-Fi AP模式的HTTP Server\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e我们可以设置AP模式下的SSID和密码,这个模式用来连接到其他设备。\u003c/p\u003e\n\u003ch1 id=\"nodemcu作为wi-fi使用sta模式的http-server\"\u003eNodeMCU作为Wi-Fi使用STA模式的HTTP Server\u003c/h1\u003e\n\u003cp\u003eNodeMCU具有Station(STA)模式,可以使用该模式连接到现有的Wi-Fi网络,并可以充当该网络分配的IP地址的HTTP服务器。\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2104/19ca64db-b2ad-4b23-87c7-cef04b76d432.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eNodeMCU作为使用Wi-Fi STA模式的HTTP Server\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003eNodeMCU从连接的Wi-Fi路由器获取IP。使用此IP地址,它可以充当任何Wi-Fi设备可以连接的HTTP服务器。\u003c/p\u003e\n\u003ch1 id=\"例\"\u003e例\u003c/h1\u003e\n\u003cp\u003e让我们编写Arduino Sketch,使NodeMCU成为具有Wi-Fi STA / AP模式的HTTP服务器,并控制从客户端连接到服务器端的LED。\u003c/p\u003e\n\u003cp\u003e在这里,我们已经连接LED到引脚号。2即NodeMCU板上的D2引脚,如下图所示。\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2104/114834fe-36d0-4f4c-86a9-f615e96bd39c.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003ch1 id=\"客户端的html页面\"\u003e客户端的HTML页面\u003c/h1\u003e\n\u003cp\u003e由于我们正在开发用于LED开/关功能的HTTP服务器,因此我们将制作一个简单的HTML页面,这个页面将在客户端可见,并且能够接通/断开LED的用户输入。这是用户友好的按钮输入代表,从用户点击输入。\u003c/p\u003e\n\u003cp\u003e我们需要为LED ON和LED OFF状态编写两个HTML页面,即当客户点击LED ON按钮时,下一步我们需要提供LED OFF的选项。以下是LED ON和LED OFF状态显示的两个HTML代码片段。\u003c/p\u003e\n\u003ch1 id=\"用于led的html代码片段\"\u003e用于LED的HTML代码片段\u003c/h1\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html\u0026gt;\n\u0026lt;head\u0026gt;\u0026lt;title\u0026gt;LED Control\u0026lt;/title\u0026gt;\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n\u0026lt;h1\u0026gt;LED\u0026lt;/h1\u0026gt;\n\u0026lt;p\u0026gt;Click to switch LED on and off.\u0026lt;/p\u0026gt;\n\u0026lt;form method=\"get\"\u0026gt;\n\u0026lt;input type=\"button\" value=\"LED ON\" onclick=\"window.location.href='/ledon'\"\u0026gt;\n\u0026lt;/form\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003ch1 id=\"关闭led的html代码片段\"\u003e\u003cstrong\u003e关闭LED的\u003c/strong\u003e\u003cstrong\u003eHTML代码\u003c/strong\u003e片段\u003c/h1\u003e\n\u003cpre\u003e\u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\n\u0026lt;html\u0026gt;\n\u0026lt;head\u0026gt;\u0026lt;title\u0026gt;LED Control\u0026lt;/title\u0026gt;\u0026lt;/head\u0026gt;\n\u0026lt;body\u0026gt;\n\u0026lt;h1\u0026gt;LED\u0026lt;/h1\u0026gt;\n\u0026lt;p\u0026gt;Click to switch LED on and off.\u0026lt;/p\u0026gt;\n\u0026lt;form method=\"get\"\u0026gt;\n\u0026lt;input type=\"button\" value=\"LED OFF\" onclick=\"window.location.href='/ledoff'\"\u0026gt;\n\u0026lt;/form\u0026gt;\n\u0026lt;/body\u0026gt;\n\u0026lt;/html\u0026gt;\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e从上面的两个HTML代码片断中,我们可以看到只有LED ON和LED OFF状态的形式不同。\u003c/p\u003e\n\u003cp\u003e我们来看看HTML行\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003c!DOCTYPE html\u003e\u003c/strong\u003e:该声明将该文档定义为HTML,并帮助浏览器正确显示网页。它只能出现一次,在页面的顶部。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003chtml\u003e\u003c/strong\u003e:这个元素是HTML页面的根元素\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003chead\u003e\u003c/strong\u003e:这个元素包含关于文档的元信息\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ctitle\u003e\u003c/strong\u003e:这个元素指定文档的标题\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cbody\u003e\u003c/strong\u003e:这个元素包含可见的页面内容,即文档的主体\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003ch1\u003e\u003c/strong\u003e:这个元素定义了标题的最大字体大小。同样的,我们可以使用\u003ch2\u003e / \u003ch3\u003e等来标题的较小的字体大小。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cp\u003e\u003c/strong\u003e:这个元素定义了一个段落。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e\u003cform\u003e\u003c/strong\u003e:这个元素定义了一个用来收集用户输入的表单\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003ewindow.location.href\u003c/strong\u003e:这是一个属性,会告诉我们当前的URL位置。更改属性的值将重定向页面。\u003c/p\u003e\n\u003cp\u003e比如\u003ccode\u003ewindow.location.href='/ledon'\u003c/code\u003e将当前页面重定向到URL\u0026nbsp;\u003ccode\u003ecurrent_url/ledon\u003c/code\u003e 页面。如果当前位置是\u003ccode\u003ehttp://192.168.0.1\u003c/code\u003e那么它将重定向到\u003ccode\u003ehttp://192.168.0.1/ledon\u003c/code\u003e 页面。页面重定向动作是在点击事件(例如点击按钮)上进行的。\u0026nbsp;\u0026nbsp;\u003c/p\u003e\n\u003cp\u003e这里我们使用上面提到的概念(页面重定向)将客户端从LED ON页面重定向到LED OFF页面,反之亦然。\u003c/p\u003e\n\u003cp\u003e要了解有关HTML的更多信息,请参阅\u003ca rel=\"nofollow noopener noreferrer\" href=\"https://www.w3schools.com/html/default.asp\"\u003ehttps://www.w3schools.com/html/default.asp\u003c/a\u003e\u003c/p\u003e\n\u003cp\u003e现在,我们可以发送上面的HTML片段,当客户端连接到服务器,也当客户端点击按钮。\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003e程序\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e在Wi-Fi接入点(AP)模式下,NodeMCU创建服务器,因此我们可以设置其IP地址,IP子网掩码和IP网关。\u003c/p\u003e\n\u003cp\u003e我们来看下SSID,密码加入网络和AP模式的地址\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eSSID =“NodeMCU”\u003c/li\u003e\n\u003cli\u003e密码=“12345678”\u003c/li\u003e\n\u003cli\u003eIP =“192.168.2.1”\u003c/li\u003e\n\u003cli\u003eSub netmask =“255.255.255.0”\u003c/li\u003e\n\u003cli\u003e网关=“192.168.2.1”\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch1 id=\"带有wi-fi-ap模式的http服务器的arduino-sketch\"\u003e带有Wi-Fi AP模式的HTTP服务器的Arduino Sketch\u003c/h1\u003e\n\u003cpre\u003e\u003ccode\u003e#include \u0026lt;ESP8266WiFi.h\u0026gt;\n#include \u0026lt;ESP8266WebServer.h\u0026gt;\n\n/* Put your SSID \u0026amp; Password */\nconst char* ssid = \"NodeMCU\"; // Enter SSID here\nconst char* password = \"12345678\"; //Enter Password here\n\n/* Put IP Address details */\nIPAddress local_ip(192,168,2,1);\nIPAddress gateway(192,168,2,1);\nIPAddress subnet(255,255,255,0);\n\nESP8266WebServer server(80);\n\nuint8_t LEDpin = D2;\nbool LEDstatus = LOW;\n\nvoid setup() {\n Serial.begin(9600);\n pinMode(LEDpin, OUTPUT);\n\n WiFi.softAP(ssid, password);\n WiFi.softAPConfig(local_ip, gateway, subnet);\n delay(100);\n\n server.on(\"/\", handle_OnConnect);\n server.on(\"/ledon\", handle_ledon);\n server.on(\"/ledoff\", handle_ledoff);\n server.onNotFound(handle_NotFound);\n\n server.begin();\n Serial.println(\"HTTP server started\");\n}\nvoid loop() {\n server.handleClient();\n if(LEDstatus)\n digitalWrite(LEDpin, HIGH);\n else\n digitalWrite(LEDpin, LOW);\n}\n\nvoid handle_OnConnect() {\n LEDstatus = LOW;\n server.send(200, \"text/html\", SendHTML(false)); \n}\n\nvoid handle_ledon() {\n LEDstatus = HIGH;\n server.send(200, \"text/html\", SendHTML(true)); \n}\n\nvoid handle_ledoff() {\n LEDstatus = LOW;\n server.send(200, \"text/html\", SendHTML(false)); \n}\n\nvoid handle_NotFound(){\n server.send(404, \"text/plain\", \"Not found\");\n}\n\nString SendHTML(uint8_t led){\n String ptr = \"\u0026lt;!DOCTYPE html\u0026gt;\\n\";\n ptr +=\"\u0026lt;html\u0026gt;\\n\";\n ptr +=\"\u0026lt;head\u0026gt;\\n\";\n ptr +=\"\u0026lt;title\u0026gt;LED Control\u0026lt;/title\u0026gt;\\n\";\n ptr +=\"\u0026lt;/head\u0026gt;\\n\";\n ptr +=\"\u0026lt;body\u0026gt;\\n\";\n ptr +=\"\u0026lt;h1\u0026gt;LED\u0026lt;/h1\u0026gt;\\n\";\n ptr +=\"\u0026lt;p\u0026gt;Click to switch LED on and off.\u0026lt;/p\u0026gt;\\n\";\n ptr +=\"\u0026lt;form method=\\\"get\\\"\u0026gt;\\n\";\n if(led)\n ptr +=\"\u0026lt;input type=\\\"button\\\" value=\\\"LED OFF\\\" onclick=\\\"window.location.href='/ledoff'\\\"\u0026gt;\\n\";\n else\n ptr +=\"\u0026lt;input type=\\\"button\\\" value=\\\"LED ON\\\" onclick=\\\"window.location.href='/ledon'\\\"\u0026gt;\\n\";\n ptr +=\"\u0026lt;/form\u0026gt;\\n\";\n ptr +=\"\u0026lt;/body\u0026gt;\\n\";\n ptr +=\"\u0026lt;/html\u0026gt;\\n\";\n return ptr;\n}\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e\u003cstrong\u003e注意:\u003c/strong\u003e成功上传以上草图客户端需要先连接到NodeMCU创建的网络。\u003c/p\u003e\n\u003cp\u003e从wifi连接到NodeMCU网络后,在浏览器中输入服务器地址,\u003ccode\u003ehttp://server_ip_address\u003c/code\u003e例如在我们的情况下\u003ccode\u003ehttp://192.168.2.1\u003c/code\u003e_。_按Enter键后,我们可以看到服务器的HTML页面响应,如下图所示。现在只需点击按钮来改变LED的状态。\u003c/p\u003e\n\u003cp\u003e\u003cimg class='lazyload' data-src=\"https://article.cdnof.com/2104/508de9f6-6037-4044-a4d8-3993e4fdfe20.png\" alt=\"\" /\u003e\u003c/p\u003e\n\u003cp\u003e现在,让我们使用Wi-Fi站模式对NodeMCU执行HTTP服务器。\u003c/p\u003e\n\u003cp\u003e在Wi-Fi Station(STA)模式下,NodeMCU从Wi-Fi路由器(接入点)获取IP地址。如果我们也在同一个网络中,那么我们可以直接使用IP地址连接到NodeMCU HTTP Server。\u003c/p\u003e\n\u003ch1 id=\"带有wi-fi-sta模式的http服务器的arduino-sketch\"\u003e带有Wi-Fi STA模式的HTTP服务器的Arduino Sketch\u003c/h1\u003e\n\u003cpre\u003e\u003ccode\u003e#include \u0026lt;ESP8266WiFi.h\u0026gt;\n#include \u0026lt;ESP8266WebServer.h\u0026gt;\n\n/*Put your SSID \u0026amp; Password*/\nconst char* ssid = \"ssid\"; // Enter SSID here\nconst char* password = \"password\"; //Enter Password here\n\nESP8266WebServer server(80);\n\nuint8_t LEDpin = D2;\nbool LEDstatus = LOW;\n\nvoid setup() {\n Serial.begin(9600);\n delay(100);\n pinMode(LEDpin, OUTPUT);\n\n Serial.println(\"Connecting to \");\n Serial.println(ssid);\n\n //connect to your local wi-fi network\n WiFi.begin(ssid, password);\n\n //check wi-fi is connected to wi-fi network\n while (WiFi.status() != WL_CONNECTED) {\n delay(1000);\n Serial.print(\".\");\n }\n Serial.println(\"\");\n Serial.println(\"WiFi connected..!\");\n Serial.print(\"Got IP: \"); Serial.println(WiFi.localIP());\n\n server.on(\"/\", handle_OnConnect);\n server.on(\"/ledon\", handle_ledon);\n server.on(\"/ledoff\", handle_ledoff);\n server.onNotFound(handle_NotFound);\n\n server.begin();\n Serial.println(\"HTTP server started\");\n}\nvoid loop() {\n server.handleClient();\n if(LEDstatus)\n digitalWrite(LEDpin, HIGH);\n else\n digitalWrite(LEDpin, LOW);\n}\n\nvoid handle_OnConnect() {\n LEDstatus = LOW;\n server.send(200, \"text/html\", SendHTML(false)); \n}\n\nvoid handle_ledon() {\n LEDstatus = HIGH;\n server.send(200, \"text/html\", SendHTML(true)); \n}\n\nvoid handle_ledoff() {\n LEDstatus = LOW;\n server.send(200, \"text/html\", SendHTML(false)); \n}\n\nvoid handle_NotFound(){\n server.send(404, \"text/plain\", \"Not found\");\n}\n\nString SendHTML(uint8_t led){\n String ptr = \"\u0026lt;!DOCTYPE html\u0026gt;\\n\";\n ptr +=\"\u0026lt;html\u0026gt;\\n\";\n ptr +=\"\u0026lt;head\u0026gt;\\n\";\n ptr +=\"\u0026lt;title\u0026gt;LED Control\u0026lt;/title\u0026gt;\\n\";\n ptr +=\"\u0026lt;/head\u0026gt;\\n\";\n ptr +=\"\u0026lt;body\u0026gt;\\n\";\n ptr +=\"\u0026lt;h1\u0026gt;LED\u0026lt;/h1\u0026gt;\\n\";\n ptr +=\"\u0026lt;p\u0026gt;Click to switch LED on and off.\u0026lt;/p\u0026gt;\\n\";\n ptr +=\"\u0026lt;form method=\\\"get\\\"\u0026gt;\\n\";\n if(led)\n ptr +=\"\u0026lt;input type=\\\"button\\\" value=\\\"LED OFF\\\" onclick=\\\"window.location.href='/ledoff'\\\"\u0026gt;\\n\";\n else\n ptr +=\"\u0026lt;input type=\\\"button\\\" value=\\\"LED ON\\\" onclick=\\\"window.location.href='/ledon'\\\"\u0026gt;\\n\";\n ptr +=\"\u0026lt;/form\u0026gt;\\n\";\n ptr +=\"\u0026lt;/body\u0026gt;\\n\";\n ptr +=\"\u0026lt;/html\u0026gt;\\n\";\n return ptr;\n}\u003c/code\u003e\u003c/pre\u003e\n\u003cp\u003e\u003cstrong\u003e注意:\u003c/strong\u003e在Wi-Fi站模式下,我们需要输入现有网络的ssid和密码。连接到WiFi网络后,在浏览器中输入服务器地址即\u003ccode\u003ehttp://assigned_ip_address\u003c/code\u003e_。_按下回车键后,我们可以在浏览器中看到服务器的HTML页面响应,如上图所示\u003c/p\u003e\n\u003chr /\u003e\n\u003cp\u003e支持文件\u003c/p\u003e\n\u003cp\u003e源代码\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cp\u003eNodeMCU HTTP服务器Arduino草图\u0026nbsp;\u003ca rel=\"nofollow noopener noreferrer\" href=\"http://www.electronicwings.com/download/attachment=Sat-08-17-16-57-38.NodeMCU_HTTP_Server.zip\"\u003e下载\u003c/a\u003e \u003c/p\u003e\n\u003cp\u003e\u0026nbsp;\u0026nbsp;95\u003c/p\u003e\u003c/li\u003e\n\u003c/ul\u003e"},"seo":{"title":"WiFi-ESP8266入门开发(十六)-HTTP服务器","description":"注:对于ESP8266开源技术感兴趣的可以加群,我们一起探索交流学习,群号:579932824。群名:ESP8266开源技术交流群。 \n介绍 \n超文本传输​​协议(HTTP)是标准的应用层协议,用作服务器和客户端之间的请求响应协议。 \n它被广泛应用于物联网(IoT)嵌入式应用,每个传感器都连接到一个服务器,我们可以通过互联网进行控制。 \nNodeMCU具有可用的Wi-Fi功能。通过这种Wi-Fi功","image":"https://article.cdnof.com/2104/597393b4-d010-483b-9836-e0225bd91c58.png","url":"https://v2as.com/article/0f9eeee9-c10b-4f54-b65a-2a94db4ee970","keywords":["var","ESP8266","LED","HTTP","服务器","ptr","csdn","server","window","NodeMCU"]},"viewsCount":1,"promotionList":[{"title":"阿里云服务器","image":"https://article.cdnof.com/promotion/aliyun.jpg","link":"https://qd.rs/aliyun"},{"title":"腾讯云服务器","image":"https://article.cdnof.com/promotion/tencent.jpg","link":"https://qd.rs/tencent"},{"title":"七牛云服务器","image":"https://article.cdnof.com/promotion/qiniu.png","link":"https://qd.rs/qiniu"}],"similarKeywordsList":null},"__N_SSG":true},"page":"/article/[article_id]","query":{"article_id":"0f9eeee9-c10b-4f54-b65a-2a94db4ee970"},"buildId":"7EtL49Y65E8zx1NwcIC_o","isFallback":false,"gsp":true,"scriptLoader":[]}</script></body></html>