物聯(lián)網(wǎng)或IoT是指由全球數(shù)十億個物理設(shè)備連接到互聯(lián)網(wǎng)形成的網(wǎng)絡(luò)，所有這些設(shè)備都在收集，處理和共享數(shù)據(jù)。由于如今基于物聯(lián)網(wǎng)的技術(shù)的進(jìn)步，有可能將任何東西變成物聯(lián)網(wǎng)應(yīng)用程序。雖然市場上有很多支持物聯(lián)網(wǎng)的硬件，但專業(yè)人士和業(yè)余愛好者最常用的硬件之一是ESP8266-NodeMCU模塊或ESP32模塊。

說到基于ESP的模塊，常用的配置之一是基于ESP的簡單web服務(wù)器，但是這種基于ESP的簡單web服務(wù)器存在一個問題。它運(yùn)行在簡單的HTTP請求上，并要求您完全刷新網(wǎng)頁以獲得任何更新的數(shù)據(jù)。

因此，在本文中，我們將通過使用ESP32制作一個web服務(wù)器來解決這個問題，該服務(wù)器將運(yùn)行WebSocket通信協(xié)議，當(dāng)發(fā)生更改時，它將通知所有客戶端，并且網(wǎng)頁將立即更新。我們可以使用ESP32 WebSocket Server實(shí)現(xiàn)兩個ESP32之間的穩(wěn)定通信。

什么是Websocket?

回到WWW(萬維網(wǎng))的黑暗時代，任何時候你想要更新網(wǎng)頁上的任何內(nèi)容，你都必須調(diào)用服務(wù)器并制作一個全新的網(wǎng)頁(即使它只是一個點(diǎn))。它不像你進(jìn)去找一個網(wǎng)頁!您必須與服務(wù)器建立一個全新的連接，然后服務(wù)器使用OK響應(yīng)，之后您通常會連接。

現(xiàn)在，你必須向服務(wù)器發(fā)送請求，然后服務(wù)器發(fā)送回?cái)?shù)據(jù)，當(dāng)它完成后，你必須關(guān)閉連接來更新你的網(wǎng)頁。這通常被稱為HTTP請求。這個過程非常緩慢。但是，當(dāng)時人們使用這種方法與服務(wù)器通信。

然后，微軟有了XMLHTTP的想法，開始于1999年的請求，Outlook Web Access的開發(fā)人員為Microsoft Exchange服務(wù)器創(chuàng)建了它。在那之后，他們開始發(fā)布帶有internet explorer5.0的庫的第二個版本。這就是AJAX的工作原理。這就是Gmail如何能夠列出您的電子郵件并在它們到達(dá)時更新它們。這就是Facebook如何更新你的喜歡和評論，而無需重新加載你的網(wǎng)頁和更多?，F(xiàn)在，一旦你建立了一個連接，你就有了你的網(wǎng)頁。您可以在不關(guān)閉連接的情況下更新它的任何部分。這就是W3C引入WebSockets之前的情況。

使用WebSockets，你必須再做一次基本的HTTP請求，但是當(dāng)你需要更新你的網(wǎng)頁時，你只需要從服務(wù)器打開一個WebSocket端口，這花費(fèi)很少的時間，使過程非常簡單。

現(xiàn)在，我們了解了基礎(chǔ)知識，我們可以進(jìn)入實(shí)際的部分，我們將使用esp32制作WebSocket服務(wù)器。

構(gòu)建ESP32 WebSocket服務(wù)器電路所需的組件

Arduino和ESP32 WebSocket服務(wù)器的電路由非?；镜慕M件組成，您可以在當(dāng)?shù)氐臉I(yè)余愛好商店找到這些組件。當(dāng)你積累了所有的組件，它可以很容易地建立在家里沒有任何復(fù)雜性。

?ESP32-DevKit - 1

?Dht22 - 1

?Led - 1

?33R電阻- 1

?面包板- 1

?跳線- 1

ESP32 WebSocket服務(wù)器原理圖

基于Arduino和ESP32的WebSocket服務(wù)器測試電路的完整原理圖如下所示。

正如你在上圖中所看到的，這個項(xiàng)目的大腦是ESP32開發(fā)板。電路如下。我們已經(jīng)將LED連接到ESP32的引腳22。我們還將DHT22溫濕度傳感器與ESP32的引腳21連接。為了測試電路，我們將從USB供電。

基于ESP32的web服務(wù)器是如何工作的?

下圖顯示了服務(wù)器需要更新溫度和濕度數(shù)據(jù)時發(fā)生的情況。

要訪問該web服務(wù)器，首先需要輸入該服務(wù)器的IP地址。在web服務(wù)器中，您可以看到來自DHT傳感器的溫度和濕度數(shù)據(jù)，還可以看到LED的切換按鈕。

現(xiàn)在，如果您打開網(wǎng)頁到其他設(shè)備，您可以看到DHT傳感器數(shù)據(jù)在您的其他設(shè)備上自動更新?，F(xiàn)在，如果你點(diǎn)擊任何其他設(shè)備上的切換按鈕，你可以在其他設(shè)備上觀察到，變化同時發(fā)生。為了更好地理解，您可以觀看文章末尾提供的視頻。

基于Arduino的web服務(wù)器代碼

由于這是一個基于web和web服務(wù)器的項(xiàng)目，因此代碼分為兩部分。前端部分和后端部分。前端部分是一個簡單的HTML頁面，我們將用于測試，對于后端，我們將使用Arduino IDE編寫代碼。

前端代碼說明：

我們通過聲明開始代碼，聲明用于通知瀏覽器該文檔是HTML文檔。接下來，我們?yōu)閹в袠?biāo)記的頭部定義所有參數(shù)。在head標(biāo)簽中，我們給它一個標(biāo)題，并設(shè)置視點(diǎn)和縮放的設(shè)置。接下來，為了添加一些CSS，我們在標(biāo)簽中添加標(biāo)簽。

接下來，在<\body>標(biāo)簽中，我們使用。在這些標(biāo)題中，我們將顯示來自DHT22傳感器的溫度和濕度數(shù)據(jù)，我們也將能夠在本節(jié)中看到LED的狀態(tài)。為了打開和關(guān)閉LED，我們增加了兩個按鈕，一個命名為開，另一個命名為關(guān)。

接下來，我們必須實(shí)現(xiàn)所有WebSocket操作。我們在標(biāo)簽的幫助下開始編寫腳本。在腳本標(biāo)記中，我們首先聲明一個變量，該變量將保存套接字對象。接下來，我們添加兩個addEventListener()，它們將在按下兩個對應(yīng)按鈕中的任何一個時被調(diào)用。接下來，聲明一個函數(shù)init()。這個函數(shù)將在加載HTML頁面時調(diào)用。在函數(shù)內(nèi)部，我們定義了Socket。

當(dāng)我們將它聲明為一個新對象時，我們的套接字現(xiàn)在是一個WebSocket，它將能夠連接到ESP32服務(wù)器并獲取數(shù)據(jù)。在WebSocket('ws://' + window.location.hostname + ':81/')中，你可以看到，這一行請求用端口81上的IP地址連接到web套接字服務(wù)器。借助onmessage事件，我們創(chuàng)建了一個函數(shù)。每次接收到更新時，都會發(fā)生onmessage事件。這個事件將調(diào)用我們的函數(shù)processCommand()。在processCommand()函數(shù)中，我們解析傳入的JSON并將其值放在相應(yīng)的位置。最后兩個函數(shù)button_1_pressed()和button_2_pressed()事件發(fā)生，當(dāng)它們發(fā)生時，通過WebSocket發(fā)送1或0。

這標(biāo)志著前端代碼的結(jié)束。現(xiàn)在，我們可以繼續(xù)了解Arduino IDE中的代碼。

但在進(jìn)入Arduino之前，我們需要將整個網(wǎng)頁轉(zhuǎn)換為字符串，因?yàn)?，在Arduino IDE中，我們將把它作為字符串保存和上傳。為此，轉(zhuǎn)到textfixer并壓縮HTML。這將使它成為一個字符串。下面的圖片會讓你更好地了解這個過程。

Arduino代碼說明：

要在Arduino IDE中編譯代碼，首先，您需要在board manager方法的幫助下下載一些WebSocket庫，或者您可以使用下面給出的鏈接。

?下載DHT傳感器庫

?下載Websockets庫由Links2004

?下載Arduino JSON庫

安裝完所有庫后，我們需要將它們包含在Arduino代碼中。

接下來，我們定義DHT傳感器的類型和我們用來連接到它的引腳。

接下來，我們?yōu)榫W(wǎng)絡(luò)定義SSID和Password。

我們將使用mills()函數(shù)更新特定時間段內(nèi)的溫度數(shù)據(jù)，因此我們需要聲明一些變量。

接下來，我們聲明一個字符串類型的變量web，我們將在其中存儲整個網(wǎng)頁。這個字符串類型變量的內(nèi)容就是您將在網(wǎng)頁上看到的內(nèi)容。

接下來，我們再次聲明一些String類型的變量來存儲一些有價值的數(shù)據(jù)。

接下來，我們?yōu)镈HT傳感器、web服務(wù)器和WebSocket服務(wù)器創(chuàng)建實(shí)例。

在循環(huán)部分，我們調(diào)用webserver Handle client方法來處理所有的webserver客戶端，我們也調(diào)用WebSocket server loop方法來處理所有的WebSocket客戶端。接下來，我們調(diào)用millis函數(shù)來更新溫度和濕度數(shù)據(jù)。

接下來我們有webSocketEvent()函數(shù)。這個函數(shù)在WebSocket事件發(fā)生時被調(diào)用。在本節(jié)中，我們將檢查狀態(tài)并打印連接的客戶端數(shù)量。接下來，我們檢查客戶端是否通過WebSocket連接。如果是，我們在網(wǎng)頁上更新狀態(tài)。接下來，我們檢查web服務(wù)器是否向我們發(fā)送了任何數(shù)據(jù)作為響應(yīng)。如果是，我們處理它，并根據(jù)狀態(tài);我們打開或關(guān)閉附加的LED。

update_temp_hum()函數(shù)用于更新溫度和濕度數(shù)據(jù)。

接下來，我們有了update_網(wǎng)頁()函數(shù)。在這個函數(shù)中，我們用所有的值更新網(wǎng)頁。在這個函數(shù)中，我們創(chuàng)建了一個JSON對象，我們在這個對象中打印信息只是為了調(diào)試。接下來，我們在webSocket.broadcasrTXT(jsonString)的幫助下廣播JSON對象中的數(shù)據(jù);函數(shù)。

本文編譯自iotdesignpro