你通常會(huì)在ThingSpeak和其他物聯(lián)網(wǎng)平臺(tái)上看到帶有實(shí)時(shí)圖表和表格的數(shù)據(jù)記錄web服務(wù)器。但是我們也可以創(chuàng)建我們自己的web服務(wù)器，可以實(shí)時(shí)更新數(shù)據(jù)，我們以前使用不同的板創(chuàng)建了許多web服務(wù)器。在這里，我們還將使用DHT11傳感器創(chuàng)建ESP8266 Web服務(wù)器數(shù)據(jù)記錄器。在這里，溫度和濕度數(shù)據(jù)將使用AJAX在網(wǎng)頁(yè)上更新。

AJAX(異步JavaScript和XML)允許通過(guò)在后臺(tái)與服務(wù)器共享少量數(shù)據(jù)來(lái)自動(dòng)更新網(wǎng)站，而無(wú)需刷新整個(gè)網(wǎng)頁(yè)。這確保了網(wǎng)頁(yè)的某些部分將被更改，而無(wú)需重新加載整個(gè)網(wǎng)站。讓我們開(kāi)始吧!

組件的要求

?NodeMCU ESP8266

?DHT11傳感器

?跳線(xiàn)

DHT11傳感器用于測(cè)量溫度和濕度，通常用于創(chuàng)建氣象站。

線(xiàn)路圖

ESP8266數(shù)據(jù)記錄儀電路圖如下：

將DHT11連接到NodeMCU很容易。DHT11的VCC和GND引腳連接到NodeMCU的3.3V和GND， DHT的Data引腳連接到NodeMCU的D5 (GPIO 14)引腳。

NodeMCU ESP8266數(shù)據(jù)記錄編程

完整的代碼NodeMCU溫度記錄器可以在頁(yè)面的末尾找到。這里我們逐行解釋完整的代碼：

在直接進(jìn)行編碼之前，請(qǐng)安裝所需的庫(kù)，ESP8266庫(kù)已預(yù)先安裝在IDE上;您只需要安裝可以從這里下載的DHT11庫(kù)。

在安裝庫(kù)之后，包括所有必需的庫(kù)。

現(xiàn)在在下一行中，輸入您的Wi-Fi名稱(chēng)和密碼。

然后定義DHT傳感器的類(lèi)型和傳感器連接的引腳。如果您使用的是DHT22，那么將DHT類(lèi)型更改為DHT22。在我的情況下，DHT傳感器連接到NodeMCU的GPIO14 (D5)。

當(dāng)我們使用NodeMCU IP地址在瀏覽器中打開(kāi)網(wǎng)頁(yè)時(shí)，執(zhí)行handleRoot函數(shù)。

下一個(gè)函數(shù)是readData()，用于從DHT11傳感器讀取數(shù)據(jù)并將其發(fā)送到網(wǎng)頁(yè)。在這個(gè)循環(huán)中，NodeMCU將DHT11值存儲(chǔ)為兩個(gè)float變量：溫度和濕度，在此之后，它將float變量轉(zhuǎn)換為字符串，并將其數(shù)據(jù)存儲(chǔ)為另一個(gè)字符串變量data，并在請(qǐng)求時(shí)將其發(fā)送給網(wǎng)頁(yè)。

在void setup()函數(shù)中，我們初始化波特率，使用.begin()函數(shù)初始化DHT傳感器，使用server.begin()函數(shù)初始化網(wǎng)頁(yè)，然后使用Wi-Fi名稱(chēng)和密碼將模塊與Wi-Fi連接。

第一個(gè)函數(shù)用于在客戶(hù)端請(qǐng)求URI(統(tǒng)一資源標(biāo)識(shí)符)時(shí)調(diào)用‘handleRoot’函數(shù)“/”而第二個(gè)函數(shù)用于在POST請(qǐng)求URI “/readData”時(shí)調(diào)用‘readData’函數(shù)

void loop()函數(shù)持續(xù)偵聽(tīng)來(lái)自客戶(hù)端的HTTP請(qǐng)求

網(wǎng)頁(yè)的HTML代碼

標(biāo)簽用于告訴web瀏覽器我們正在使用哪個(gè)版本的html來(lái)編寫(xiě)html代碼。這個(gè)標(biāo)簽寫(xiě)在頂部。這段代碼中的所有內(nèi)容都是在它之后編寫(xiě)的。

在標(biāo)簽之間編寫(xiě)的代碼將被瀏覽器讀取。標(biāo)簽用于定義網(wǎng)頁(yè)的標(biāo)題、標(biāo)題行和樣式。中寫(xiě)入的數(shù)據(jù)是瀏覽器中選項(xiàng)卡的名稱(chēng)。標(biāo)簽用于給表格和標(biāo)題行設(shè)置樣式。

標(biāo)簽用于包含jQuery。jQuery是JavaScript庫(kù)。標(biāo)記中的getData()函數(shù)用于從NodeMCU獲取數(shù)據(jù)并更新數(shù)據(jù)表。

XMLHttpRequest對(duì)象用于從web服務(wù)器請(qǐng)求數(shù)據(jù)。所有瀏覽器都有一個(gè)內(nèi)置的XMLHttpRequest對(duì)象，用于從服務(wù)器請(qǐng)求數(shù)據(jù)。使用XMLHttpRequest，我們可以在不重新加載頁(yè)面的情況下更新網(wǎng)頁(yè)，從服務(wù)器請(qǐng)求數(shù)據(jù)，從服務(wù)器接收數(shù)據(jù)，并可以向服務(wù)器發(fā)送數(shù)據(jù)。這里我們使用這個(gè)對(duì)象從NodeMCU獲取溫度和濕度數(shù)據(jù)，并在不刷新網(wǎng)頁(yè)的情況下更新數(shù)據(jù)表。

XMLHttpRequest對(duì)象的open()和send()方法用于向服務(wù)器發(fā)送請(qǐng)求。http.open()的語(yǔ)法如下所示：

測(cè)試NodeMCU數(shù)據(jù)記錄器

最后，將DHT11傳感器與NodeMCU連接并上傳代碼。在NodeMCU上傳程序后，打開(kāi)波特率為115200的串口監(jiān)視器，獲取NodeMCU的IP地址。在瀏覽器中打開(kāi)它，你的網(wǎng)頁(yè)看起來(lái)像這樣：

本文編譯自iotdesignpro