Real Time Response esp32 web server

Projects General Guidance
1

hy guyz i need help for my new project which is based on esp32 web server but i did not get real time response. For multiple relays i want every time add multiple function "GET" and multiple "/state" depend on how much relays
is that any ways to do this with single "/state" function for all buttons with real time responce

here is web html


<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 3.0rem;}
    p {font-size: 3.0rem;}
    body {max-width: 600px; margin:0px auto; padding-bottom: 25px;}
    .switch {position: relative; display: inline-block; width: 120px; height: 68px}
    .switch input {display: none}
    .slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}
    .slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}
    input:checked+.slider {background-color: #2196F3}
    input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
  </style>
</head>
<body>
  <h2>ESP Web Server</h2>
  %BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
  var xhr = new XMLHttpRequest();
  if(element.checked){ xhr.open("GET", "/update?relay="+element.id+"&state=1", true); }
  else { xhr.open("GET", "/update?relay="+element.id+"&state=0", true); }
  xhr.send();
}
setInterval(function ( )
{
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function()
  {
    if (this.readyState == 4 && this.status == 200)
    {
      var inputChecked;
      var outputStateM;
      if( this.responseText == 1)
      {
        inputChecked = true;
        outputStateM = "On";
      }
      else
      {
        inputChecked = false;
        outputStateM = "Off";
      }
      document.getElementById("output").checked = inputChecked;
      document.getElementById("outputState").innerHTML = outputStateM;
    }
  };
  xhttp.open("GET", "/state" , true);
  xhttp.send();
}, 1000 ) ;

</script>
</body>
</html>

here "/state" code

    server.on("/state", HTTP_GET, [](AsyncWebServerRequest *request)
              { request->send(200, "text/plain", String(digitalRead(relayGPIOs[0])).c_str()); });
    server.begin();
2

Please tell us what "real time" means to you. Put some numbers to it.
Paul

1 Like
3

When i turn on light manually than i didn't get response without refreshing page

Yas i can do that with small amount of relays and swiches but using multiple state1,and state2 and so on it's work fine but here i want a small code that i can get update of button when i'm turn on relays manually without lot's of code lines for each button state single function

When i call that Singal function it's check all relay states and update associated buttons without refreshing entire page

4

So you need to code it to do that.

1 Like
5

No i have entire code just help me with java script part

6

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