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

XorAndOr

Active Member
Licensed User
Longtime User
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
 

Attachments

  • sketch_feb7a.zip
    1.7 KB · Views: 100

hatzisn

Expert
Licensed User
Longtime User
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...
 
Upvote 0

XorAndOr

Active Member
Licensed User
Longtime User
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
 
Upvote 0

hatzisn

Expert
Licensed User
Longtime User
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).
 
Upvote 0

XorAndOr

Active Member
Licensed User
Longtime User
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?
 
Upvote 0

hatzisn

Expert
Licensed User
Longtime User
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.
 
Upvote 0

XorAndOr

Active Member
Licensed User
Longtime User
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.
 
Upvote 0

hatzisn

Expert
Licensed User
Longtime User
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.
 
Upvote 0

XorAndOr

Active Member
Licensed User
Longtime User
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)
 
Upvote 0

hatzisn

Expert
Licensed User
Longtime User
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.
 
Upvote 0

XorAndOr

Active Member
Licensed User
Longtime User
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....
 
Upvote 0

XorAndOr

Active Member
Licensed User
Longtime User
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"
 
Upvote 0
Top