Using async web server with esp32 and autoconnect

[Tony-The-Developer]

I am trying to have the temperature auto-refresh. How can I use an async webserver?

[Hieromon]

This topic continues in the Discussions.

[Tony-The-Developer]

👍

[Hieromon]

ESP8266WebServer(also WebServer for ESP32) and ESPAsyncWebServer cannot coexist at the same time. If you use ESPAsyncWebServer, AutoConnect must support it too.
As a personal experiment, I implemented AsyncAutoConnect with PageBuilder corresponding to ESPAsyncWebServer. This implementation has strong restrictions and is not yet open to the public repository.

Speaking from the implementation experience, I think that you will be forced to at least the following problem to be solved.

1. We can not use delay or while loop
   In the first place, AutoConnect does not have an asynchronous structure. It uses a delay and a While Loop to wait for a WiFi connection to be established. You need to change this structure to be event-driven. This requires changing the simple HTTP request/response model used by various AutoConnect web pages to a model that can notify events such as WebSocket.
   In addition, it is necessary to change the wait processing by the delay loop to the thread processing that can notify interrupts such as Ticker.
2. ESPAsyncDNSServer should be supported for ESP32
   AutoConnect drives a DNS server for captive portal discovery. ESPAsyncDNSServer does not support ESP32 officially, so some of it needs to be modified. (This is not too difficult)

Refs. Hieromon/PageBuilder#12

If you just want to refresh the measured temperature display, I recommend using WebSocket or Ajax to asynchronize the web page. AutoConnect uses Ajax to asynchronously update the OTA progress bar. It will be helpful to you.

• Client side (Web page) JavaScript
  Create an XMLHttpRequest object and register an event handler. Updates the progress bar placed on the page with the value (which includes the update size of the upload BIN file) notified in the progress event.
  
  

  AutoConnect/src/AutoConnectUpdatePage.h

  Lines 41 to 45 in e980186

  	{ AC_Element, "c5", "<script type=\"text/javascript\">var lap,cls;function rd(){clearInterval(lap),location.href=\"" AUTOCONNECT_URI_UPDATE_RESULT "\"}function bar(){var t=new FormData;t.append(\"op\",\"#s\");var e=new XMLHttpRequest;e.timeout=" AUTOCONNECT_STRING_DEPLOY(AUTOCONNECT_UPDATE_TIMEOUT) ",e.open(\"POST\",\"" AUTOCONNECT_URI_UPDATE_PROGRESS "\",!0),e.onreadystatechange=function(){4==e.readyState&&(200==e.status?(cls=!1,lap=setInterval(upd," AUTOCONNECT_STRING_DEPLOY(AUTOCONNECT_UPDATE_INTERVAL) ")):document.getElementById(\"status\").textContent=\"Could not start (\"+e.status+\"): \"+e.responseText)},e.send(t)}function upd(){if(!cls){var t=new XMLHttpRequest;t.onload=function(){var t=this.responseText.split(\",\");\"#s\"==t[0]?(window.setTimeout(rd()," AUTOCONNECT_STRING_DEPLOY(AUTOCONNECT_UPDATE_DURATION) ")", nullptr },
  	{ AC_Element, "enable_loader", ",document.getElementById(\"ld\").className=\"loader\"", nullptr },
  	{ AC_Element, "c6", "):\"#e\"==t[0]?(cls=!0,rd()):\"#p\"==t[0]&&incr(t[1])},t.onerror=function(){console.log(\"http err:%d %s\",t.status,t.responseText)},t.open(\"GET\",\"" AUTOCONNECT_URI_UPDATE_PROGRESS "\",!0),t.send()}}function incr(t){", nullptr },
  	{ AC_Element, "inprogress_meter", "var e=t.split(\":\"),n=document.getElementById(\"progress\").getElementsByTagName(\"meter\");n[0].setAttribute(\"value\",e[0]),n[0].setAttribute(\"max\",e[1])", nullptr },
  	{ AC_Element, "c7", "}window.onload=bar;</script>", nullptr }

• Server side (viz. A part of the Sketch)
  Returns the uploaded file size in response to a progress inquiry from the client.
  
  

  AutoConnect/src/AutoConnectUpdate.cpp

  Lines 563 to 564 in e980186

  	payload = String(UPDATE_NOTIFY_PROGRESS) + ',' + String(_amount) + ':' + String(_binSize);
  	httpCode = 200;

  
  

  AutoConnect/src/AutoConnectUpdate.cpp

  Line 584 in e980186

  _webServer->send(httpCode, content_type, payload);

• Server size (viz. A part of the Sketch)
  Register the above response handler as a Web Server native handler.
  

  AutoConnect/src/AutoConnectUpdate.cpp

  Lines 183 to 184 in e980186

  	_webServer = &(portal.host());
  	_webServer->on(String(F(AUTOCONNECT_URI_UPDATE_PROGRESS)), HTTP_ANY, std::bind(&AutoConnectUpdateAct::_progress, this));