物聯網-使用網頁查看溫溼度數據&&開關燈
一、項目介紹
-
ESP8266可以方便的進行UDP通訊實現通過網絡控制設備的功能，但是該方法對於用戶來說還需要一個界面來完成數據通訊，所幸ESP系列有着不錯的性能和不小的存儲空間，足夠用來構建簡單的網頁服務器（Web Server），這樣用戶就可以通過瀏覽器訪問服務器的ip地址進行查看數據或控制設備。
-
我們這次的方案將採用ESP8266 NodeMCU構建簡單的網頁服務器（Web Server），後通過http協議將獲取的DHT11溫溼度傳感器的溫溼度數據傳送到web頁面，使得用戶可以通過瀏覽器訪問服務器的ip地址進行溫溼度數據的查詢（數據每5秒更新一次），並且用戶可以通過on/off按鈕下發請求命令，控制led燈的亮滅。
二、實現效果
（1）串口調試助手-實驗數據展示與分析
利用友善串口調試助手連接我們開發板所在的串口com15,波特率選擇115200，接收設置選擇ASCII，自動換行，則在數據窗口我們就可以看到串口打印的WIFI名、本地IP地址、MDNS域名服務信息、溫溼度數據。
（2）網頁-實驗數據展示與分析
在瀏覽器訪問我們的服務端IP地址，即可看到採集的溫溼度數據（每5秒更新一次），點擊on按鈕可以下發請求開燈命令，點亮LED燈；點擊off按鈕可以下發請求關燈命令，熄滅LED燈。
三、器件接線
- 器件接線示意表
| ESP8266 NodeMCU開發板 | DHT11傳感 | LED燈 |
|---|---|---|
| D2 | 正極 | |
| D4 | S（DATA數據引腳） | |
| 3.3V | + | |
| GND | - | 負極 |
- 器件接線示意圖
![在這裏插入圖片描述]()
四、相關代碼
- 流程圖
- 相關頭文件及代碼
- NodeMcu arduino編程環境搭建（Esp8266開發環境搭建）
這裏有這次代碼所用到的ESP8266 NodeMCU的頭文件 - 鏈接：https://pan.baidu.com/s/1liNawFRqJ2C-i-gNlp-MIw
提取碼：t29r
這裏面有dth11的頭文件及項目源碼
/**頭文件**/
#include <SPI.h>
#include <Wire.h>
#include <dht11.h> //溫度的頭文件
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
const char *ssid = "111";//WIFI名
const char *password =
"wubaoshi";//密碼
char temp[900]; //網頁顯示內容
ESP8266WebServer server ( 80 );//建立服務器對象，設置監聽端口號爲80（網頁默認端口號）
//溫度傳感器加載
dht11 DHT11;
#define DHT11_PIN 2 //dht11引腳 D4
#define led 4 //led引腳 D2
int temperature=0;//存放溫度的變量
int humidity=0;//存放溼度的變量
void handleRoot() {//根目錄發送主頁
//網頁內容如下
snprintf (temp, 900,
"<html>\
<head>\
<meta http-equiv='refresh' content='5'/>\
<title>ESP8266 Demo</title>\
<style>\
body { background-color: #cccccc; font-family: Arial, Helvetica,
Sans-Serif; Color: #000088; }\
</style>\
</head>\
<body>\
<h1>Hello from ESP8266!</h1>\
<p>temperature : %02d</p>\
<p>humidity : %02d</p>\
<p>On_LED</p>\
<a href=./pin?light=On><input type=button
value=On></a>\
<p>OFF_LED</p>\
<a href=./pin?light=Off><input type=button
value=Off></a>\
</body>\
</html>\
",
temperature,humidity
);
/**code：狀態代碼 如：200， 404， 500等
type：網頁類型 如：text/html，image/svg+xml等
message：要發給客戶端的內容
server.send ( code, type, message );
**/
server.send ( 200, "text/html", temp );
}
void handleNotFound() {//訪問地址不存在返回404
//message:要發給客戶端的內容
String message = "File Not Found\n\n"; //字符串內容
message += "URI: "; //字符串內容
message += server.uri();//獲取uri
message += "\nMethod: ";
//字符串內容
message += ( server.method() == HTTP_GET ) ? "GET" :
"POST";//判斷是get方法，還是post方法
message += "\nArguments: "; //字符串內容
message += server.args(); //獲取返回參數的內容
message += "\n"; //換行
//獲取返回參數的名字、內容
for
( uint8_t i = 0; i < server.args(); i++ ) {
message += " " + server.argName ( i ) + ": " +
server.arg ( i ) + "\n";
}
server.send ( 404, "text/plain", message ); //返回404錯誤信息給客戶端
}
/**點擊按鈕後的連接函數**/
void pin(){
if(server.arg("light")=="On"){ // 如果獲得的light參數值等於on
digitalWrite(led,HIGH); //拉高led的引腳，即可點亮led
server.send ( 200, "text/html", temp ); //返回temp信息給客戶端
}
if(server.arg("light")=="Off"){ // 如果獲得的light參數值等於off
digitalWrite(led,LOW); //拉低led的引腳，即可熄滅led
server.send ( 200, "text/html",
temp ); //返回temp信息給客戶端
}
}
//在這裏加入初始化相關代碼，只運行一次:
void setup ( void ) {
Serial.begin ( 115200 ); //初始化串口通信，並將波特率設置爲115200
WiFi.mode ( WIFI_STA ); //WIFI設爲STA模式
WiFi.begin ( ssid, password ); //連接WIFI
Serial.println ( "" ); //串口打印
pinMode(DHT11_PIN,OUTPUT); //dht11引腳設置爲輸出模式
pinMode(led,OUTPUT); //led引腳設置爲輸出模式
//
Wait for connection
while ( WiFi.status() != WL_CONNECTED ) { //WIFI的連接狀態
delay ( 500 );
Serial.print ( "." ); //如果沒有連通向串口發送.....
}
Serial.println ( "" );
//串口打印
Serial.print ( "Connected to " ); //串口打印Connected to
Serial.println
( ssid ); //串口打印WIFI名
Serial.print ( "IP address: " ); //串口打印IP address:
Serial.println ( WiFi.localIP() ); //串口打印本地IP地址
if
( MDNS.begin ( "esp8266" ) ) {
//MDNS域名服務，begin方法創建我們將使用的Web地址，並將其命名爲“esp8266”。
Serial.println ( "MDNS responder started" ); //如果已經存在，串口打印MDNS responder started提示信息
}
server.on ( "/", handleRoot );//註冊訪問根目錄回調函數
server.on("/pin", HTTP_GET ,pin); //註冊按鈕點擊的事件
server.onNotFound ( handleNotFound );//註冊無地址訪問函數
server.begin();//啓動服務器
Serial.println ( "HTTP server started" ); //串口打印HTTP server started
}
// 在這裏加入主要程序代碼，重複執行:
void loop ( void ) {
/**串口溫度**/
int chk1 = DHT11.read(DHT11_PIN); //將讀取到的數據賦給chk
temperature=DHT11.temperature;//將溫溼度值賦值給變量temperature
humidity=DHT11.humidity;//將溼度值賦值給變量humidity
/**串口打印溫溼度數據**/
Serial.print("Temperature: ");
Serial.println(temperature);
Serial.print("humidity ");
Serial.println(humidity);
delay(100); //延時100ms
server.handleClient();//監聽客戶端請求，並處理
}
五、備註
（1）三個web註冊函數的內容註解
| 函數 | 內容註解 |
|---|---|
| 根目錄註冊函數 | 主要用於顯示頁面的主要內容，存放html相關的文件 |
| 請求不可用時的回調函數 | 主要用於出現404錯誤時，在客戶端打印錯誤信息 |
| 點擊按鈕後的連接函數 | 主要用於接收客戶端下發的請求開關燈參數，比較參數是開燈/關燈，後上拉/下拉LED燈的引腳，從而控制LED燈的亮滅 |
（2）網頁顯示中文的問題
運用中文轉utf-8工具(百度就用)，將中文轉化爲utf-8，
如溫度轉後的utf-8內容爲：温度
溼度轉後的utf-8內容爲：湿度
將utf-8的內容放在html文件相應的地方即可。
（3）HTTP狀態碼
網頁上面的200、404等是HTTP狀態碼。
用戶在請求訪問某個地址的時候，WebServer需要進行響應，發送響應頭，響應頭中第一行一般像是這樣的HTTP/1.1
200 OK，其中200就是狀態碼。
- 常見的狀態碼如下：
| 狀態碼 | 註解 |
|---|---|
| 200 | 服務器成功返回網頁 |
| 404 | 請求的網頁不存在 |
| 301 | 本網頁被永久性轉移到另一個URL |
| 503 | 服務器目前不可用 |
| 401 | 請求未經授權，需要登錄認證 |
(4)Content-Type
Content-Type（MediaType），即是Internet
Media Type，互聯網媒體類型，也叫做MIME類型。在互聯網中有成百上千中不同的數據類型，HTTP在傳輸數據對象時會爲他們打上稱爲MIME的數據格式標籤，用於區分數據類型。最初MIME是用於電子郵件系統的，後來HTTP也採用了這一方案。
在HTTP協議消息頭中，使用Content-Type來表示請求和響應中的媒體類型信息。它用來告訴服務端如何處理請求的數據，以及告訴客戶端（一般是瀏覽器）如何解析響應的數據，比如顯示圖片，解析並展示html等等。
- Content-Type舉例
| 狀態碼 | 註解 |
|---|---|
| text/plain | 純文本文件 |
| text/html | html文件 |
| application/json | json形式數據文件 |
| application/xml | xml形式數據文件 |
| image/png | png格式圖片 |