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

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

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

什么是Websocket?

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

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

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

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

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

構建ESP32 WebSocket服務器電路所需的組件

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

?ESP32-DevKit - 1

?Dht22 - 1

?Led - 1

?33R電阻- 1

?面包板- 1

?跳線- 1

ESP32 WebSocket服務器原理圖

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

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

基于ESP32的web服務器是如何工作的?

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

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

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

基于Arduino的web服務器代碼

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

前端代碼說明：

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

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

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

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

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

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

Arduino代碼說明：

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

?下載DHT傳感器庫

?下載Websockets庫由Links2004

?下載Arduino JSON庫

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

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

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

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

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

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

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

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

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

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

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

本文編譯自iotdesignpro