你通常會(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)頁上更新。

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

組件的要求

?NodeMCU ESP8266

?DHT11傳感器

?跳線

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

線路圖

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

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

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

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

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

在安裝庫之后，包括所有必需的庫。

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

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

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

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

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

第一個(gè)函數(shù)用于在客戶端請(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ù)偵聽來自客戶端的HTTP請(qǐng)求

網(wǎng)頁的HTML代碼

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

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

標(biāo)簽用于包含jQuery。jQuery是JavaScript庫。標(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，我們可以在不重新加載頁面的情況下更新網(wǎng)頁，從服務(wù)器請(qǐng)求數(shù)據(jù)，從服務(wù)器接收數(shù)據(jù)，并可以向服務(wù)器發(fā)送數(shù)據(jù)。這里我們使用這個(gè)對(duì)象從NodeMCU獲取溫度和濕度數(shù)據(jù)，并在不刷新網(wǎng)頁的情況下更新數(shù)據(jù)表。

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

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

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

本文編譯自iotdesignpro