esp32 中的网络套接字答案

【问题标题】：websocket in esp32esp32 中的网络套接字
【发布时间】：2022-12-20 14:55:06
【问题描述】：

我正在尝试使用能够运行 websocket 服务器的 esp32 板制作控制器。我找到了示例，但我想对其进行编辑。

我想在我的网站上上传网页而不是 esp32 然后这个页面控制 esp32 而不是 esp32 作为网络服务器运行并通过其 ip 地址中的请求提供网页的示例。我将发布我找到的示例

//=====================================
//ESP32 WebSocket Server: DHT22 Sensor
//=====================================
#include <WiFi.h>
#include <WebServer.h>
#include <WebSocketsServer.h>
#include <DHT.h>
//---------------------------------------------------
DHT dht(32, DHT22);
//---------------------------------------------------
#define fanLED 2
#define humLED 4
#define SW     23
//---------------------------------------------------
const char* ssid = "ssid";
const char* password = "password";
//---------------------------------------------------
WebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);
//---------------------------------------------------
boolean fanLEDonoff=false; boolean humLEDonoff=false;
String JSONtxt;
//---------------------------------------------------
#include "webpage.h"
#include "functions.h"
//====================================================================
void setup()
{
  Serial.begin(9600);
  pinMode(fanLED, OUTPUT); pinMode(humLED, OUTPUT);
  pinMode(SW, INPUT);
  //-----------------------------------------------
  dht.begin();
  //-----------------------------------------------
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED)
  {
    Serial.print("."); delay(500);  
  }
  WiFi.mode(WIFI_STA);
  Serial.print(" Local IP: ");
  Serial.println(WiFi.localIP());
  //-----------------------------------------------
  server.on("/", handleRoot);
  server.begin();
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
}
//====================================================================
void loop() 
{
  webSocket.loop(); server.handleClient();
  //----------------------------------------------------
  delay(2000);
  //----------------------------------------------------
  if(fanLEDonoff == false) digitalWrite(fanLED, LOW);
  else digitalWrite(fanLED, HIGH);
  String fanLEDstatus = "OFF";
  if(fanLEDonoff == true) fanLEDstatus = "ON";
  //----------------------------------------------------
  if(humLEDonoff == false) digitalWrite(humLED, LOW);
  else digitalWrite(humLED, HIGH);
  String humLEDstatus = "OFF";
  if(humLEDonoff == true) humLEDstatus = "ON";
  //----------------------------------------------------
  String SWstatus;
  if(digitalRead(SW) == HIGH) SWstatus = "ON";
  else SWstatus = "OFF";
  //----------------------------------------------------
  String TEMPvalString = String(dht.readTemperature());
  String HUMvalString = String(int(dht.readHumidity()));
  //----------------------------------------------------
  String humidifier, fan;
  if(dht.readTemperature() >= 25) fan = "ON";
  else fan = "OFF";
  if(int(dht.readHumidity()) < 40) humidifier = "ON";
  else humidifier = "OFF";
  //----------------------------------------------------
  JSONtxt  = "{\"TEMP\":\""+TEMPvalString+"\",";
  JSONtxt += "\"HUM\":\""+HUMvalString+"\",";
  JSONtxt += "\"fanLEDonoff\":\""+fanLEDstatus+"\",";
  JSONtxt += "\"humLEDonoff\":\""+humLEDstatus+"\",";
  JSONtxt += "\"SWonoff\":\""+SWstatus+"\",";
  JSONtxt += "\"FANonoff\":\""+fan+"\",";
  JSONtxt += "\"HUMonoff\":\""+humidifier+"\"}";
  //----------------------------------------------------
  webSocket.broadcastTXT(JSONtxt);
}

functions.h file:

//=======================================
//handle function: send webpage to client
//=======================================
void handleRoot()
{
  server.send(200,"text/html", webpageCont);
}
//=====================================================
//function process event: new data received from client
//=====================================================
void webSocketEvent(uint8_t num, WStype_t type, uint8_t *payload, size_t welength)
{
  String payloadString = (const char *)payload;
  //--------------------------------------------------
  if(type == WStype_TEXT)
  {
    byte separator=payloadString.indexOf('=');
    String var = payloadString.substring(0,separator);
    String val = payloadString.substring(separator+1);
    //------------------------------------------------
    if(var == "fanLEDonoff")
    {
      fanLEDonoff = false;
      if(val == "ON") fanLEDonoff = true;
    }
    //------------------------------------------------
    if(var == "humLEDonoff")
    {
      humLEDonoff = false;
      if(val == "ON") humLEDonoff = true;
    }
  }
}

webpage.h file:

//=========================================
//HTML, CSS & JavaScript Codes for Webpage
//=========================================
const char webpageCont[] PROGMEM = 
R"=====(
<!DOCTYPE HTML>
<html>
<title>ESP32 WebSocket Server</title>
<!------------------------------------------CSS----------------------------------------->
<style>
    #dynRectangle1
    {
        width:0px;
        height:12px;
        top: 9px;
        background-color: rgba(255, 0, 0, 0.863);
        z-index: -1;
        margin-top: 1px;
        border: 3px solid black;
    }
    #dynRectangle2
    {
        width:0px;
        height:12px;
        top: 9px;
        background-color:rgba(0, 0, 255, 0.534);
        z-index: -1;
        margin-top:1px;
        border: 3px solid black;
    }
    body   {background-color:rgba(128,128,128,0.322)}
    h1     {font-size: 40px; color: rgb(156, 5, 5); text-align:center; font-family:calibri}
    h2     {font-size: 25px; color: black; font-family:cursive}
    h3     {font-size: 17px; color:black; font-family:calibri}
    h4     {font-size: 14px; color: black; font-family:Trebuchet MS}
    div.h1 {background-color: whitesmoke;}
    .btn1  
    {
        background-color:#ff3c00b7;
        border: solid 2px rgb(10, 0, 0);
        color: white;
        padding: 4px 16px; 
        font-weight: bold;
        font: 16px arial, sans-serif;
        width: 60px;
        height: 32px;
        line-height: 22px;
        border-radius: 10%;
        opacity: 0.6;
        transition: 0.3s;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;
    }
    .btn1:hover {opacity: 1}
    .btn2 
    {
        background-color:#002fffa4;
        border: solid 2px rgb(10, 0, 0);
        color: white;
        padding: 4px 16px; 
        font-weight: bold;
        font: 16px arial, sans-serif;
        width: 60px;
        height: 32px;
        line-height: 22px;
        border-radius: 10%;
        opacity: 0.6;
        transition: 0.3s;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;
    }
    .btn2:hover {opacity: 1}
    span.b1 {float: left; padding: 5px 10px}
    span.b2 {float: left; padding: 5px 10px}
    .msgRect1
    {
        float: left;
        text-align: center;
        margin: 21px 1px;
        padding: 10px 10px;
        height: 10px;
        width: 120px;
        line-height: 10px;
        background-color:white;
        border: 2px solid black;
    }
    .msgRect2
    {
        float: left;
        text-align: center;
        margin: 21px 1px;
        padding: 10px 10px;
        height: 10px;
        width: 120px;
        line-height: 10px;
        background-color:white;
        border: 2px solid black;
    }
    .msgRect3
    {
        float: left;
        text-align: center;
        margin: 21px 1px;
        padding: 10px 10px;
        height: 10px;
        width: 120px;
        line-height: 10px;
        background-color:white;
        border: 2px solid black;
    }
</style>
<!-----------------------------------------HTML----------------------------------------->
<body>
    <h1><div class="h1">ESP32 WebSocket Server<br>DHT22 Temp & Humidity Sensor</div></h1>
    <h2>
        Temperature: <span style="color:rgb(216, 3, 3)" id="Tempvalue">0</span> C<br>
        Humidity&emsp;&emsp;: <span style="color:rgba(0, 0, 255, 0.795)" id="Humvalue">0</span> % 
    </h2>
    <h3>
        0 C &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 50 C
        <div id="dynRectangle1"></div><br>
        0 % &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
        &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 100 %
        <div id="dynRectangle2"></div>
    </h3>
    <h4>
        <span class="b1">
            Fan<br>
            <button class="btn1" id="FANbtn" onclick="fanONOFF()"> </button>
        </span>
        <span class="b2">
            Humidifier<br>
            <button class="btn2" id="HUMbtn" onclick="humONOFF()"> </button>
        </span>
        <span class="msgRect1" id="msg1""> </span>
        <span class="msgRect2" id="msg2""> </span>
        <span class="msgRect3" id="msg3""> </span>
    </h4>
</body>
<!-------------------------------------JavaScript--------------------------------------->
<script>
  InitWebSocket()
  function InitWebSocket()
  {
    websock = new WebSocket('ws://'+window.location.hostname+':81/');
    websock.onmessage=function(evt)
    {
       JSONobj = JSON.parse(evt.data);
       document.getElementById('Tempvalue').innerHTML = JSONobj.TEMP;
       var temp = parseInt(JSONobj.TEMP * 9.5);
       document.getElementById("dynRectangle1").style.width = temp+"px";
       
       document.getElementById('Humvalue').innerHTML = JSONobj.HUM;
       var hum = parseInt(JSONobj.HUM * 4.8);
       document.getElementById("dynRectangle2").style.width = hum+"px";

       document.getElementById('FANbtn').innerHTML = JSONobj.fanLEDonoff;
       document.getElementById('HUMbtn').innerHTML = JSONobj.humLEDonoff;
       
       document.getElementById('msg1').innerHTML = JSONobj.FANonoff;
       if(JSONobj.FANonoff == 'ON')
       {
        document.getElementById("msg1").innerHTML="Fan ON";
        document.getElementsByClassName("msgRect1")[0].style.backgroundColor="#FFFF33";
       }
       else
       {
        document.getElementById("msg1").innerHTML="Fan OFF";
        document.getElementsByClassName("msgRect1")[0].style.backgroundColor="#00BFFF";
       }
       
       document.getElementById('msg2').innerHTML = JSONobj.HUMonoff;
       if(JSONobj.HUMonoff == 'ON')
       {
        document.getElementById("msg2").innerHTML="Humidifier ON";
        document.getElementsByClassName("msgRect2")[0].style.backgroundColor="#FFFF33";
       }
       else
       {
        document.getElementById("msg2").innerHTML="Humidifier OFF";
        document.getElementsByClassName("msgRect2")[0].style.backgroundColor="#00BFFF";
       }

       document.getElementById('msg3').innerHTML = JSONobj.SWonoff;
       if(JSONobj.SWonoff == 'ON')
       {
        document.getElementById("msg3").innerHTML="Check Server";
        document.getElementsByClassName("msgRect3")[0].style.backgroundColor="#FF0000";
       }
       else
       {
        document.getElementById("msg3").innerHTML="Server OK";
        document.getElementsByClassName("msgRect3")[0].style.backgroundColor="#90EE90";
       }
    }
  }
  //----------------------------------------------------------------------------------
  function fanONOFF()
  {
    FANbtn = 'fanLEDonoff=ON';
    if(document.getElementById('FANbtn').innerHTML == 'ON')
    {
      FANbtn = 'fanLEDonoff=OFF';
    }
    websock.send(FANbtn);
  }
  //-----------------------------------------------------------------------------------
  function humONOFF()
  {
    HUMbtn = 'humLEDonoff=ON';
    if(document.getElementById('HUMbtn').innerHTML == 'ON')
    {
      HUMbtn = 'humLEDonoff=OFF';
    }
    websock.send(HUMbtn);
  }
</script>
</html>
)=====";

这是例子

我应该先编辑那些吗：

server.on("/", handleRoot);

//this void hadleRoot is in the functions.h file
void handleRoot()
{
  server.send(200,"text/html", webpageCont);
}

给它我的网页链接而不是 webpageCont 这是用这段代码编写的页面代码，然后在网页本身我在这里编辑 websocket

InitWebSocket()
  function InitWebSocket()
  {
    websock = new WebSocket('ws://'+window.location.hostname+':81/');
    websock.onmessage=function(evt)
    {
       JSONobj = JSON.parse(evt.data);

将 window.location.hostname 更改为我的 esp32 IP 地址？我应该阅读哪个主题来理解这一点以及如何做到这一点？

【问题讨论】：

标签： javascript html c++ websocket arduino-esp32

【解决方案1】：

在这些场景中使用 websocket 有 3 个部分。

Websocket 服务器。
Websocket 客户端。

托管 Websocket 客户端的 HTML 页面。

你的情况下的 Websocket 服务器在运行 <host>:81 的 ESP32 上。
Websocket 客户端使用javascript 在 html 文件中运行，通常它也托管在同一个 ESP32 网络服务器中。这就是您看到提到的 url ${window.location.hostname} 的原因。这只是意味着 websocket 和 html 都来自同一个主机名。

如果将 HTML（Websocket 客户端）移动到外部服务器，唯一的要求是更改 url

websock = new WebSocket('ws://<device-ip-address>:81/');

以下是 javascript 客户端的基本要求。


// Your IP address instead of ${window.location.hostname}
var wsurl = `ws://<device-ip-address>:81/`;
var websocket;

// Add a listener to initialize websocket on page load
window.addEventListener('load', onload);

// On page load, initialize websocket
function onload(event) {
    initWebSocket();
}

// Setup all the required callback functions for the websocket events
function initWebSocket() {
    console.log('Trying to open a WebSocket connection…');
    websocket = new WebSocket(wsurl);
    websocket.onopen = onOpen;
    websocket.onclose = onClose;
    websocket.onmessage = onMessage;
}

// Connected
function onOpen(event) {
    console.log('Connected');
}

// Disconnected
function onClose(event) {
    console.log('Disconnected');
}

// Show the received message 
function onMessage(event) {
    console.log(event.data);
}

注意：测试时请确保您在同一个本地网络上，因为 ESP32 在 2.4GHz Wi-Fi 上工作，所以您的 PC 应该连接到同一个 AP 而不是 5GHz。

【讨论】：