WebSocket服务器与ESP32和Arduino IDE

物联网或IoT是指由全球数十亿个物理设备连接到互联网形成的网络，所有这些设备都在收集，处理和共享数据。由于如今基于物联网的技术的进步，有可能将任何东西变成物联网应用程序。虽然市场上有很多支持物联网的硬件，但专业人士和业余爱好者最常用的硬件之一是ESP8266-NodeMCU模块或ESP32模块。

说到基于ESP的模块，常用的配置之一是基于ESP的简单web服务器，但是这种基于ESP的简单web服务器存在一个问题。它运行在简单的HTTP请求上，并要求您完全刷新网页以获得任何更新的数据。

因此，在本文中，我们将通过使用ESP32制作一个web服务器来解决这个问题，该服务器将运行WebSocket通信协议，当发生更改时，它将通知所有客户端，并且网页将立即更新。我们可以使用ESP32 WebSocket Server实现两个ESP32之间的稳定通信。

什么是Websocket?

回到WWW(万维网)的黑暗时代，任何时候你想要更新网页上的任何内容，你都必须调用服务器并制作一个全新的网页(即使它只是一个点)。它不像你进去找一个网页!您必须与服务器建立一个全新的连接，然后服务器使用OK响应，之后您通常会连接。

现在，你必须向服务器发送请求，然后服务器发送回数据，当它完成后，你必须关闭连接来更新你的网页。这通常被称为HTTP请求。这个过程非常缓慢。但是，当时人们使用这种方法与服务器通信。

然后，微软有了XMLHTTP的想法，开始于1999年的请求，Outlook Web Access的开发人员为Microsoft Exchange服务器创建了它。在那之后，他们开始发布带有internet explorer5.0的库的第二个版本。这就是AJAX的工作原理。这就是Gmail如何能够列出您的电子邮件并在它们到达时更新它们。这就是Facebook如何更新你的喜欢和评论，而无需重新加载你的网页和更多。现在，一旦你建立了一个连接，你就有了你的网页。您可以在不关闭连接的情况下更新它的任何部分。这就是W3C引入WebSockets之前的情况。

使用WebSockets，你必须再做一次基本的HTTP请求，但是当你需要更新你的网页时，你只需要从服务器打开一个WebSocket端口，这花费很少的时间，使过程非常简单。

现在，我们了解了基础知识，我们可以进入实际的部分，我们将使用esp32制作WebSocket服务器。

构建ESP32 WebSocket服务器电路所需的组件

Arduino和ESP32 WebSocket服务器的电路由非常基本的组件组成，您可以在当地的业余爱好商店找到这些组件。当你积累了所有的组件，它可以很容易地建立在家里没有任何复杂性。

•ESP32-DevKit - 1

•Dht22 - 1

•Led - 1

•33R电阻- 1

•面包板- 1

•跳线- 1

ESP32 WebSocket服务器原理图

基于Arduino和ESP32的WebSocket服务器测试电路的完整原理图如下所示。

正如你在上图中所看到的，这个项目的大脑是ESP32开发板。电路如下。我们已经将LED连接到ESP32的引脚22。我们还将DHT22温湿度传感器与ESP32的引脚21连接。为了测试电路，我们将从USB供电。

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

下图显示了服务器需要更新温度和湿度数据时发生的情况。

要访问该web服务器，首先需要输入该服务器的IP地址。在web服务器中，您可以看到来自DHT传感器的温度和湿度数据，还可以看到LED的切换按钮。

现在，如果您打开网页到其他设备，您可以看到DHT传感器数据在您的其他设备上自动更新。现在，如果你点击任何其他设备上的切换按钮，你可以在其他设备上观察到，变化同时发生。为了更好地理解，您可以观看文章末尾提供的视频。

基于Arduino的web服务器代码

由于这是一个基于web和web服务器的项目，因此代码分为两部分。前端部分和后端部分。前端部分是一个简单的HTML页面，我们将用于测试，对于后端，我们将使用Arduino IDE编写代码。

前端代码说明：

我们通过声明开始代码，声明用于通知浏览器该文档是HTML文档。接下来，我们为带有标记的头部定义所有参数。在head标签中，我们给它一个标题，并设置视点和缩放的设置。接下来，为了添加一些CSS，我们在标签中添加标签。

接下来，在<\body>标签中，我们使用。在这些标题中，我们将显示来自DHT22传感器的温度和湿度数据，我们也将能够在本节中看到LED的状态。为了打开和关闭LED，我们增加了两个按钮，一个命名为开，另一个命名为关。

接下来，我们必须实现所有WebSocket操作。我们在标签的帮助下开始编写脚本。在脚本标记中，我们首先声明一个变量，该变量将保存套接字对象。接下来，我们添加两个addEventListener()，它们将在按下两个对应按钮中的任何一个时被调用。接下来，声明一个函数init()。这个函数将在加载HTML页面时调用。在函数内部，我们定义了Socket。

当我们将它声明为一个新对象时，我们的套接字现在是一个WebSocket，它将能够连接到ESP32服务器并获取数据。在WebSocket('ws://' + window.location.hostname + ':81/')中，你可以看到，这一行请求用端口81上的IP地址连接到web套接字服务器。借助onmessage事件，我们创建了一个函数。每次接收到更新时，都会发生onmessage事件。这个事件将调用我们的函数processCommand()。在processCommand()函数中，我们解析传入的JSON并将其值放在相应的位置。最后两个函数button_1_pressed()和button_2_pressed()事件发生，当它们发生时，通过WebSocket发送1或0。

这标志着前端代码的结束。现在，我们可以继续了解Arduino IDE中的代码。

但在进入Arduino之前，我们需要将整个网页转换为字符串，因为，在Arduino IDE中，我们将把它作为字符串保存和上传。为此，转到textfixer并压缩HTML。这将使它成为一个字符串。下面的图片会让你更好地了解这个过程。

Arduino代码说明：

要在Arduino IDE中编译代码，首先，您需要在board manager方法的帮助下下载一些WebSocket库，或者您可以使用下面给出的链接。

•下载DHT传感器库

•下载Websockets库由Links2004

•下载Arduino JSON库

安装完所有库后，我们需要将它们包含在Arduino代码中。

接下来，我们定义DHT传感器的类型和我们用来连接到它的引脚。

接下来，我们为网络定义SSID和Password。

我们将使用mills()函数更新特定时间段内的温度数据，因此我们需要声明一些变量。

接下来，我们声明一个字符串类型的变量web，我们将在其中存储整个网页。这个字符串类型变量的内容就是您将在网页上看到的内容。

接下来，我们再次声明一些String类型的变量来存储一些有价值的数据。

接下来，我们为DHT传感器、web服务器和WebSocket服务器创建实例。

在循环部分，我们调用webserver Handle client方法来处理所有的webserver客户端，我们也调用WebSocket server loop方法来处理所有的WebSocket客户端。接下来，我们调用millis函数来更新温度和湿度数据。

接下来我们有webSocketEvent()函数。这个函数在WebSocket事件发生时被调用。在本节中，我们将检查状态并打印连接的客户端数量。接下来，我们检查客户端是否通过WebSocket连接。如果是，我们在网页上更新状态。接下来，我们检查web服务器是否向我们发送了任何数据作为响应。如果是，我们处理它，并根据状态;我们打开或关闭附加的LED。

update_temp_hum()函数用于更新温度和湿度数据。

接下来，我们有了update_网页()函数。在这个函数中，我们用所有的值更新网页。在这个函数中，我们创建了一个JSON对象，我们在这个对象中打印信息只是为了调试。接下来，我们在webSocket.broadcasrTXT(jsonString)的帮助下广播JSON对象中的数据;函数。

本文编译自iotdesignpro