近年來，基于Arduino和ESP32的web服務(wù)器項(xiàng)目在各種應(yīng)用中變得非常流行和有用。但是這種web服務(wù)器的一個(gè)主要缺點(diǎn)是它的靜態(tài)特性。意思是通過HTTP更新網(wǎng)頁(yè)，你需要在更新任何數(shù)據(jù)之前更新整個(gè)網(wǎng)頁(yè)。這個(gè)問題有很多解決方法，比如幾秒鐘后自動(dòng)刷新網(wǎng)頁(yè)，等等。

但是最有效的方法是使用WebSocket連接來實(shí)時(shí)獲取更新的數(shù)據(jù)。這種方法不僅效率高，而且為資源密集型應(yīng)用程序節(jié)省了大量的時(shí)鐘周期。

在我們之前的一篇文章中，我們構(gòu)建了這樣一個(gè)基于ESP32的WebSocket服務(wù)器，它可以托管網(wǎng)頁(yè)并發(fā)送更新，而無(wú)需完全刷新頁(yè)面。這樣做讓我們想知道是否有任何方法可以將ESP32配置為可以通過Wi-Fi連接到服務(wù)器的客戶端。

為了回答這個(gè)問題，我們將構(gòu)建一個(gè)基于ESP32的WebSocket客戶端，它將能夠連接到ESP32 WebSocket服務(wù)器。

這樣，我們將使用最快、最有效的方式在ESP設(shè)備之間建立通信。所以，不要再拖延了，讓我們開始吧。

在我們之前的項(xiàng)目中，我們已經(jīng)構(gòu)建了許多基于ESP32的項(xiàng)目和物聯(lián)網(wǎng)相關(guān)應(yīng)用程序的項(xiàng)目，如果您對(duì)該主題感興趣，您可以查看它們。

ESP32 WebSocket客戶端是如何工作的?

這個(gè)項(xiàng)目的目標(biāo)是將ESP32配置為WebSocket客戶端，這樣做將使我們能夠在兩個(gè)ESP32設(shè)備之間建立更快和穩(wěn)定的通信。

首先，客戶端通過WebSocket握手建立一個(gè)WebSocket連接。握手從一個(gè)HTTP請(qǐng)求開始，該請(qǐng)求允許所有必需的服務(wù)處理HTTP連接和WebSocket連接。

一旦連接建立，esp32就可以以全雙工模式發(fā)送和接收數(shù)據(jù)。使用WebSocket協(xié)議，客戶端(Web瀏覽器和ESP32板)可以不需要請(qǐng)求就可以向服務(wù)器發(fā)送和接收信息，如果配置正確，服務(wù)器可以請(qǐng)求客戶端發(fā)送或接收數(shù)據(jù)。正如我們前面所說的，如果客戶端是web瀏覽器，這個(gè)過程仍然成立。

構(gòu)建ESP32 WebSocket客戶端所需組件

構(gòu)建基于ESP32的WebSocket客戶端所需的組件如下所示。我們用非常通用的元件設(shè)計(jì)了這個(gè)電路，這使得復(fù)制過程非常容易。

?ESP32開發(fā)板- 2

?128 X 64 OLED顯示屏- 1

?面包板- 2

?DHT22傳感器- 1

?LED紅- 1

?330R電阻- 1

?跳線

?USB電纜

ESP32 WebSocket服務(wù)器端，客戶端-原理圖

基于ESP32的WebSocket客戶端測(cè)試電路的完整原理圖如下所示。

正如你在上面的圖表中看到的，我們有兩個(gè)電路;一個(gè)用于ESP32 WebSocket服務(wù)器，我們?cè)谇耙黄恼轮杏懻撨^，另一個(gè)用于基于ESP32的WebSocket客戶端。在這個(gè)項(xiàng)目中，我們將討論客戶端。

客戶端的演示電路并不多，一個(gè)簡(jiǎn)單的128x64 OLED顯示器連接到一個(gè)ESP32模塊。

打開電源后，客戶端可以通過WebSocket連接連接到服務(wù)器，并從服務(wù)器實(shí)時(shí)獲取數(shù)據(jù)。

ESP32 Websocket客戶端Arduino代碼

用于將esp32配置為WebSocket客戶端的完整代碼可以在本頁(yè)底部找到。添加所需的頭文件和源文件后，您應(yīng)該能夠直接編譯Arduino代碼，而不會(huì)出現(xiàn)任何錯(cuò)誤。如果你沒有ESP32 Websocket庫(kù)，你可以從下面給出的鏈接下載它們。

?下載Adafruit SSD1396 OLED顯示庫(kù)

?下載Arduino Websockets庫(kù)由Links2004

?下載Arduino JSON庫(kù)由bblanchon

我們通過包含所有必需的庫(kù)來開始編寫代碼。由于我們正在使用WebSocket客戶端和OLED，我們需要包括websocketclient .h庫(kù)以及Adafruit_SSD1306.h和ArduinoJson.h庫(kù)以及WiFi.h和WebServer.h庫(kù)。

接下來，我們定義OLED顯示器的屏幕寬度和屏幕高度。

之后，我們定義Wi-Fi的SSID和Password，接下來我們定義WebSocketsClient實(shí)例并分配一個(gè)靜態(tài)JSON文檔，我們將在其中保存?zhèn)魅氲腏SON字符串。

最后，我們?yōu)長(zhǎng)ED顯示器創(chuàng)建一個(gè)SSD1306實(shí)例，并將屏幕高度和屏幕寬度作為參數(shù)傳遞。

接下來，我們有我們的設(shè)置函數(shù)，其中我們調(diào)用WiFi。begin(SSID, password)開始Wi-Fi實(shí)例的方法，并將之前定義的SSID和密碼作為參數(shù)傳遞。

接下來，我們用115200波特初始化串行以進(jìn)行調(diào)試。一旦Wi-Fi初始化，我們初始化顯示并檢查它是否連接。

接下來，我們開始一個(gè)WebSocket連接，并為WebSocket初始化一個(gè)事件句柄。當(dāng)WebSocket事件發(fā)生時(shí)，invent處理程序調(diào)用webSocketEvent()函數(shù)。

接下來，我們有了loop()函數(shù)。在循環(huán)函數(shù)中，我們通過調(diào)用WebSocket.loop()函數(shù)來保持WebSocket的活動(dòng)狀態(tài)。

接下來，我們有WebSocket事件函數(shù)。這個(gè)函數(shù)在WebSocket事件發(fā)生時(shí)自動(dòng)調(diào)用。在這個(gè)函數(shù)中，我們首先檢查是否有傳入的有效負(fù)載，并驗(yàn)證它是否是字符串。

我們期望從服務(wù)器得到一個(gè)JSON字符串。如果它是一個(gè)字符串，那么我們使用deserializeJSON函數(shù)對(duì)它進(jìn)行反序列化，并傳遞有效負(fù)載和我們之前聲明的靜態(tài)JSON文檔。

一旦JSON字符串被反序列化，我們就聲明了三個(gè)變量來保存服務(wù)器發(fā)送的三個(gè)參數(shù)，即LED_STATUS和來自DHT22傳感器的溫度和濕度數(shù)據(jù)。

一旦我們這樣做，我們?cè)O(shè)置顯示器，并將所有信息打印到OLED顯示器上。

測(cè)試ESP32無(wú)線客戶端

基于ESP32的WebSocket客戶端的測(cè)試電路如上所示。正如你所看到的，在左邊，我們有一個(gè)基于ESP32的服務(wù)器，它有一個(gè)DHT22傳感器和一個(gè)LED連接，在右邊，我們有我們的安卓手機(jī)，它作為一個(gè)WebSocket客戶端，在右邊，我們有另一個(gè)ESP32板，它作為另一個(gè)WebSocket客戶端。

現(xiàn)在，由于我們通過WebSocket連接，如果DHT傳感器數(shù)據(jù)或LED狀態(tài)發(fā)生變化，這些變化將反映在手機(jī)上，我們也可以在OLED顯示器上觀察到變化。

果然，當(dāng)我們點(diǎn)擊“打開和關(guān)閉”按鈕時(shí)，OLED顯示屏上的數(shù)據(jù)也會(huì)發(fā)生變化，我們也會(huì)從DHT22傳感器獲得恒定的數(shù)據(jù)流，這意味著我們的WebSocket連接工作順利。

這標(biāo)志著ESP32 WebSocket教程結(jié)束。

本文編譯自iotdesignpro