Need help in websocket and esp32 please

Other Hardware Home Automation
1

i am trying to make controller with esp32 board which is able to run websocket server i found sample example but i want to edit it .. i want to upload the webpage in my website instead of the esp32 and then this page controls the esp32 istead of the example where the esp32 runs as webserver and providing the webpage via request in its ip address
i will post the example i found

//=====================================
//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>
)=====";

this is the example

should i edite those first :

server.on("/", handleRoot);

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

to give it my webpage link istead of webpageCont which is the page code written in this code
and then in the webpage it self i edit the websocket here

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

to change window.location.hostname to my esp32 ip address ?
please if this is not right just tell me what topic ishould read to understand this and how i can do this please

thank you

2

if you serve the webpage from one server and want this web page to access a different server, you'll likely fall into CORS challenges

3

So how is this project works ?

4

you can work around CORS challenges. just saying you need to be aware of this

5

Uhhh i miss understand you so its possible to make two servers talk to each other via websocket right ?

6

to make life easier, you have to have a hosted server, with MQTT broker running on it, there are bunch of cloud MQTT providers like this or this , you can a have a free plan account there

and then both the webpage (running a websocket) with JS lib like paho-mqtt and the ESP32 ( as in here ) act as clients

you can eventually send data between webpage and ESP32 back and forth

1 Like
7

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.