WebSocket服務(wù)器與ESP32和Arduino IDE

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

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

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

什么是Websocket?

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

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

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

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

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

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

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

?ESP32-DevKit - 1

?Dht22 - 1

?Led - 1

?33R電阻- 1

?面包板- 1

?跳線- 1

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

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

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

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

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

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

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

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

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

前端代碼說(shuō)明：

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

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

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

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

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

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

Arduino代碼說(shuō)明：

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

?下載DHT傳感器庫(kù)

?下載Websockets庫(kù)由Links2004

?下載Arduino JSON庫(kù)

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

接下來(lái)，我們定義DHT傳感器的類(lèi)型和我們用來(lái)連接到它的引腳。

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

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

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

接下來(lái)，我們?cè)俅温暶饕恍㏒tring類(lèi)型的變量來(lái)存儲(chǔ)一些有價(jià)值的數(shù)據(jù)。

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

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

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

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

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

本文編譯自iotdesignpro