B4R Question [Solved]ESP WebServer "without" reloading page, is it possible in B4R?

XorAndOr · Feb 8, 2024

hi,
Here on the forum I find examples of webserver esp that with each command
the server page refreshes, I don't like this.
Searching online I came across a tutorial but as usual it is with Arduino code.
https://circuitdigest.com/microcont...266-dynamic-web-page-update-without-reloading
This tutorial example makes use of a file that is loaded with #include index.h
The file must be placed in the folder where the Arduino code of the project is located.
This example is exactly what I'm looking for.
Is this possible on B4R?
To simplify the help, I attach the 2 example files.
if you want to try you only have to enter the ssid and password of the webserver.
start it and open a web page with the IP you see on the serial terminal of arduino.
Thank you

hatzisn · Feb 8, 2024

I suppose it would be done the same way as refressing but with AJAX on client side... The response from the esp would have to be in JSON and not a page...

XorAndOr · Feb 8, 2024

hatzisn said:
I suppose it would be done the same way as refressing but with AJAX on client side... The response from the esp would have to be in JSON and not a page...

Thank you
as well as writing Astream.Write("<!DOCTYPE HTML>") etc... for each command request from the webserver, I don't know how to write anything else

hatzisn · Feb 8, 2024

XorAndOr said:
Thank you
as well as writing Astream.Write("<!DOCTYPE HTML>") etc... for each command request from the webserver, I don't know how to write anything else

In w3schools.com it explains how to make AJAX calls (Advanced Javascript and XML). You can use the javascript approach or the JQuery approach (easier - but in the end you use javascript both ways). In the response you will also use Async.Write but add the prefix I mentioned in Cesar Morisco's question. Also the buttons would make the calls with onclick="........javascript function......" (add in a javascript function the desired AJAX call).

XorAndOr · Feb 8, 2024

hatzisn said:
In w3schools.com it explains how to make AJAX calls (Advanced Javascript and XML). You can use the javascript approach or the JQuery approach (easier - but in the end you use javascript both ways). In the response you will also use Async.Write but add the prefix I mentioned in Cesar Morisco's question. Also the buttons would make the calls with onclick="........javascript function......" (add in a javascript function the desired AJAX call).

ok ty
in your opinion...where is the problem of b4r having similar code as the arduino code does?

hatzisn · Feb 8, 2024

XorAndOr said:
ok ty
in your opinion...where is the problem of b4r having similar code as the arduino code does?

I haven't seen a lot of Arduino's code except only in ESP32CAM webserver sketch that it uses something similar to what I said if I remember 100% correctly. I will check your example at night.

XorAndOr · Feb 8, 2024

hatzisn said:
I will check your example at night.

Thanks for your interest and help
let's say that it is not a problem to use the webserver made with Arduino code but I have some other code with functions written in b4r and it makes it complicated for me to write them with arduino code I would like to use everything in b4r.
In Arduino you write #include "index.h" evidently upload this file which would be the server page I don't have to write Ajax code, at most I modify it
How is it done in B4R?
when I have to send from the client to the server...which would then be in the same esp
then I will try to understand how it can be done in ajax and send it with astreamwrite(...)
the difficulty is that index.h file which in b4r I don't know how to do.
sry googl. trad.

hatzisn · Feb 10, 2024

Hi, take a look at this code in the sketch you posted:

JavaScript:

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("state").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "led_set?state="+led_sts, true);
  xhttp.send();

This code is Javascript and runs in client side. When the page loads and it is executed it does exactly what I said. It makes a request to the back end from client side.

XorAndOr · Feb 10, 2024

hatzisn said:
This code is Javascript and runs in client side. When the page loads and it is executed it does exactly what I said. It makes a request to the back end from client side.

ty
the working arduino code I understood how it works, even if ajax.
The problem is translating that code into b4r.
I tried but it gives me Sintax error with AstreamWrite ("code ajax here")
I also tried with....
1) LittleFS (maybe the right way)
2) raWOT (too complicated)
3) B4R and #if C code .... (compilation ok but still doesn't display the page)

hatzisn · Feb 10, 2024

XorAndOr said:
ty
the working arduino code I understood how it works, even if ajax.
The problem is translating that code into b4r.
I tried but it gives me Sintax error with AstreamWrite ("code ajax here")
I also tried with....
1) LittleFS (maybe the right way)
2) raWOT (too complicated)
3) B4R and #if C code .... (compilation ok but still doesn't display the page)

I have not tried that myself completely but I suppose you will use Asyncstreams.
I suppose that these are the correct steps:

Let's say that you have three pages:

http://{esp ip}
http://{esp ip}/setthedata
http://{esp ip}/getthedata

When the client sends the request you do not do anything in server_newconnection but you just set the asyncstream and let Astream_NewData handle the situation. Take a look at a recent simillar question by @Cableguy who was asking for the buffer in AsyncStreams. Scanning the posted request text in Async_NewData you will find for what the request is supposed to be and respond with an AsyncStream write exactly the same as I wrote it in @Cableguy 's question. In client side you just write java script code similar to the javascript above. Be sure to follow the same way I told to @Cableguy in the response text in order to work correctly. Then when you write with asyncstream.write(...) close the connection.

XorAndOr · Feb 10, 2024

thank you, @hatzisn
I'll try

candide · Feb 10, 2024

under arduino we have this library : https://github.com/tfry-git/EmbAJAX

XorAndOr · Feb 10, 2024

candide said:
under arduino we have this library : https://github.com/tfry-git/EmbAJAX

thanks @candide
I looked at the link you posted
I tried that library on an esp8266
it works as I would like, without refreshing or reloading the page
clicking to turn off/on the LED or vary the flashing the home page is static.
absolutely perfect
I'll try B4R and #If C if it works....

XorAndOr · Feb 11, 2024

update
hi @candide I tried with B4R and Inline C

B4R:

RunNative("StartServer", Null)

C:

#If C
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <EmbAJAX.h>

it works great
also by clicking on/off to control a LED the page does not reload or refresh and the LED turns on and off
by changing the flashing cursor the page does not reload and the LED flashes
next step is to insert the css code to make the page more beautiful.
I saw that the library uses "Styling"

B4R Question [Solved]ESP WebServer "without" reloading page, is it possible in B4R?

XorAndOr

Active Member

Attachments

hatzisn

Expert

XorAndOr

Active Member

hatzisn

Expert

XorAndOr

Active Member

hatzisn

Expert

XorAndOr

Active Member

hatzisn

Expert

XorAndOr

Active Member

hatzisn

Expert

XorAndOr

Active Member

candide

Active Member

XorAndOr

Active Member

XorAndOr

Active Member

Similar Threads