Hi,
I am new in this type of projects and I need some advice about asynchronous web servers using the ESP32 because I have a problem connecting to the wifi.
I tried to do an asynchronous web server with an Sparkfun ESP32 Thing Plus and the Arduino IDE and I used this projet as reference: [u]https://techtutorialsx.com/2017/12/01/esp32-arduino-asynchronous-http-webserver/[/u] .
This is my code:
//Reference : https://techtutorialsx.com/2017/12/01/esp32-arduino-asynchronous-http-webserver/
#include "WiFi.h"
#include "ESPAsyncWebServer.h"
const char* ssid = "ssid";
const char* password = "password";
AsyncWebServer server(80);
void setup(){
Serial.begin(115200);
WiFi.begin(ssid, password);
Serial.println("Start");
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Success connecting");
Serial.println("IP Adress: ");
Serial.print(WiFi.localIP());
server.on("/hello", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/plain", "Hello World");
});
server.begin();
}
Everytime I compile the code there is no errors but when I open the serial monitor I am stuck in "Connecting to Wifi..." I think my WiFi.status is never connected.
I made sure I had installed all the libraries I needed and all the settings in the Tools are good.
Thank you in advance for your help !
"when I open the serial monitor I am stuck in "Connecting to Wifi..."
did you add the appropriate ssid and password to connect to your network/router?
Thanks for your reply zoomkat,
I put the same ssid and password that I used in a code for a Soft Access Point with the ESP32 and the WiFi.h library, but is it the right thing to do ? Or should I change it because I am using the ESPAsyncWebServer.h ?
I read that it might be a problem with the http port so I also tried the code with a different port, instead of using "server (80)" I tried with "server(8080)" but it didn't work.
I still have this in the serial monitor :
mariafalher:
Is that Access Point running in the same physical location? Maybe they are conflicting.
aarg:
Thanks for the reply,
I used the Access Point code for a different project before doing this one so they are not running at the same time but I tried the two codes with the same ESP32.
Could it be that the SAP doesn't allow the connection even if the code is not running ?
The project I made with the SAP is this one :
//Reference: https://microcontrollerslab.com/esp32-soft-access-point-web-server-in-arduino-ide/
/*
#include "WiFi.h"
//Variables
#define LED1 13 //First light
#define LED2 33 //Second light
#define potPin 34 //Signal from the potentiometer
const char* ssid = "ESP32-SAP";
const char* password = "12345678";
//Server port
WiFiServer server(80);
String html = "<!DOCTYPE html> \
<html> \
<body> \
<center><h1>ESP32 Soft access point</h1></center> \
<center><h2>Web Server</h2></center> \
<form> \
<button name=\"LED1\" button style=\"color:green\" value=\"ON\" type=\"submit\">LED1 ON</button> \
<button name=\"LED1\" button style=\"color:red\" value=\"OFF\" type=\"submit\">LED1 OFF</button>
\
<button name=\"LED2\" button style=\"color:green\" value=\"ON\" type=\"submit\">LED2 ON</button> \
<button name=\"LED2\" button style=\"color:red\" value=\"OFF\" type=\"submit\">LED2 OFF</button>
\
</form> \
</body> \
</html>";
int potValue = 0; //Initializa potentiometer value
void Connect_WiFi()
{
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED)
{
delay(100);
}
}
void setup()
{
Serial.begin(115200);
pinMode(LED1, OUTPUT);
pinMode(LED2, OUTPUT);
digitalWrite(LED1, LOW);
digitalWrite(LED2, LOW);
Serial.print("Setting soft access point mode");
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
server.begin();
}
void loop()
{
potValue = analogRead(potPin);
//Serial.println(potValue);
WiFiClient client = server.available();
if (client)
{
String request = client.readStringUntil('\r');
if (request.indexOf("LED1=ON") != -1)digitalWrite(LED1, HIGH);
if (request.indexOf("LED1=OFF") != -1)digitalWrite(LED1, LOW);
if (request.indexOf("LED2=ON") != -1)digitalWrite(LED2, HIGH);
if (request.indexOf("LED2=OFF") != -1)digitalWrite(LED2, LOW);
client.print(html);
if(potValue <= 4095){
client.print("Analog Data: ");
client.print(potValue);
client.print("
");
client.print("
");
}
request = "";
}
}
*/
"I used the Access Point code for a different project before doing this one so they are not running at the same time but I tried the two codes with the same ESP32."
Have you been able to log into any network/router with various example codes?
I have been able to connect to the same network with different codes using the WiFi.h library only.
I think that when I use the AsyncWebServer instead of the WiFiServer I am not able to reach the server, but I am not sure why...
"I think that when I use the AsyncWebServer instead of the WiFiServer I am not able to reach the server, but I am not sure why... "
Is the AsyncWebServer made to be used with the ESP32? It seems in some instances the esp32 and esp8266 require different libraries.
Here is a working Access Point asynchronous webpage (AJAX) example for the ESP32:
#include <WiFi.h>
#include <WiFiClient.h>
#include <WiFiAP.h>
const char MAIN_page[] PROGMEM = "<!DOCTYPE html>\n<html>\n<style>\nbody, html {\n height: 100%;\n margin: 0;\n font-family: Arial;\n}\n\n/* Style tab links */\n.tablink {\n background-color: #555;\n color: white;\n float: left;\n border: none;\n outline: none;\n cursor: pointer;\n padding: 14px 16px;\n font-size: 17px;\n width: 33.33%;\n}\n\n.tablink:hover {\n background-color: #777;\n}\n\n.tabcontent {\n color: white;\n display: none;\n padding: 100px 20px;\n height: 100%;\n}\n\n#Home {background-color: white;}\n#PIDs {background-color: white;}\n#Console {background-color: white;}\n#About {background-color: white;}\n\n.card\n{\n max-width: 400px;\n min-height: 250px;\n background: #02b875;\n padding: 30px;\n box-sizing: border-box;\n color: #FFF;\n margin:20px;\n box-shadow: 0px 2px 18px -4px rgba(0,0,0,0.75);\n}\n\n#myProgress\n{\n width: 100%;\n background-color: #ddd;\n}\n\n#myBar\n{\n width: 1%;\n height: 30px;\n background-color: #4CAF50;\n}\n\n/* Style the form - display items horizontally */\n.form-inline {\n display: flex;\n flex-flow: row wrap;\n align-items: center;\n}\n\n/* Add some margins for each label */\n.form-inline label {\n margin: 5px 10px 5px 0;\n}\n\n/* Style the input fields */\n.form-inline input {\n vertical-align: middle;\n margin: 5px 10px 5px 0;\n padding: 10px;\n background-color: #fff;\n border: 1px solid #ddd;\n}\n\n/* Style the submit button */\n.form-inline button {\n padding: 10px 20px;\n background-color: dodgerblue;\n border: 1px solid #ddd;\n color: white;\n}\n\n.form-inline button:hover {\n background-color: royalblue;\n}\n\n/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 800px wide */\n@media (max-width: 800px) {\n .form-inline input {\n margin: 10px 0;\n }\n\n .form-inline {\n flex-direction: column;\n align-items: stretch;\n }\n}\n</style>\n\n<body>\n<button class=\"tablink\" onclick=\"openPage('Home', this, 'red')\" id=\"defaultOpen\">Home</button>\n<button class=\"tablink\" onclick=\"openPage('PIDs', this, 'green')\">PIDs</button>\n<button class=\"tablink\" onclick=\"openPage('Console', this, 'blue')\">Console</button>\n\n<div id=\"Home\" class=\"tabcontent\">\n <h3>Home</h3>\n <div class=\"card\">\n <h4>ArduHUD</h4>
\n <h1>Speed: <span id=\"speed\">0</span></h1>\n <div id=\"myProgress\">\n <div id=\"myBar\"></div>\n </div>
\n </div>\n</div>\n\n<div id=\"PIDs\" class=\"tabcontent\">\n <h3>PIDs</h3>\n <p>Some PIDs this fine day!</p>\n</div>\n\n<div id=\"Console\" class=\"tabcontent\">\n <h3>Console</h3>\n <form class=\"form-inline\" action=\"/action_page.php\">\n <label for=\"email\">Email:</label>\n <input type=\"email\" id=\"email\" placeholder=\"Enter email\" name=\"email\">\n <button type=\"submit\">Submit</button>\n</form>\n</div>\n</body>\n\n<script>\nfunction openPage(pageName, elmnt, color)\n{\n // Hide all elements with class=\"tabcontent\" by default */\n var i, tabcontent, tablinks;\n tabcontent = document.getElementsByClassName(\"tabcontent\");\n for (i = 0; i < tabcontent.length; i++)\n {\n tabcontent[i].style.display = \"none\";\n }\n\n // Remove the background color of all tablinks/buttons\n tablinks = document.getElementsByClassName(\"tablink\");\n for (i = 0; i < tablinks.length; i++)\n {\n tablinks[i].style.backgroundColor = \"\";\n }\n\n // Show the specific tab content\n document.getElementById(pageName).style.display = \"block\";\n\n // Add the specific color to the button used to open the tab content\n elmnt.style.backgroundColor = color;\n}\n\ndocument.getElementById(\"defaultOpen\").click();\n\nsetInterval(function()\n{\n getSpeedData();\n getRpmData();\n}, 1000);\n\n\nfunction getSpeedData()\n{\n var xhttp = new XMLHttpRequest();\n \n xhttp.onreadystatechange = function()\n {\n if (this.readyState == 4 && this.status == 200)\n {\n document.getElementById(\"speed\").innerHTML = this.responseText;\n }\n };\n \n xhttp.open(\"GET\", \"speed\", true);\n xhttp.send();\n}\n\n\nfunction move(width)\n{\n var elem = document.getElementById(\"myBar\");\n var id = setInterval(frame, 10);\n \n function frame()\n {\n if (width > 100)\n {\n width = 100;\n }\n else if (width < 0)\n {\n width = 0;\n }\n \n console.log(width);\n elem.style.width = width + \"%\";\n }\n}\n\nfunction getRpmData()\n{\n var xhttp = new XMLHttpRequest();\n \n xhttp.onreadystatechange = function()\n {\n if (this.readyState == 4 && this.status == 200)\n {\n move(parseInt(this.responseText), 10);\n }\n };\n \n xhttp.open(\"GET\", \"rpm\", true);\n xhttp.send();\n}\n</script>\n</html>";
WiFiServer server(80);
const char *ssid = "HUDuino";
void setup()
{
pinMode(LED_BUILTIN, OUTPUT);
digitalWrite(LED_BUILTIN, HIGH);
Serial.begin(115200);
WiFi.softAP(ssid);
IPAddress myIP = WiFi.softAPIP();
Serial.println(myIP);
server.begin();
}
void loop()
{
serverProcessing();
}
void serverProcessing()
{
bool main = false;
bool speed_request = false;
bool rpm_request = false;
WiFiClient client = server.available();
if (client)
{
String currentLine = "";
while (client.connected())
{
if (client.available())
{
char c = client.read();
//Serial.write(c);
if (currentLine.endsWith("GET / HTTP"))
main = true;
else if (currentLine.endsWith("GET /speed HTTP"))
speed_request = true;
else if (currentLine.endsWith("GET /rpm HTTP"))
rpm_request = true;
if (c == '\n')
{
if (!currentLine.length())
{
if (main)
{
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.print(MAIN_page);
client.println();
main = false;
break;
}
else if (speed_request)
{
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.println(random(0, 100));
client.println();
speed_request = false;
break;
}
else if (rpm_request)
{
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.println(random(0, 100));
client.println();
rpm_request = false;
break;
}
else
{
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.print(MAIN_page);
client.println();
break;
}
}
else
currentLine = "";
}
else if (c != '\r')
currentLine += c;
}
}
client.stop();
}
}
1 Like
zoomkat:
I think the library is compatible with both of the ESP because the tutorial I used as reference and other websites I consulted used the ESP32-WROOM-32, the same ESP32 I am using.
Here are some of those websites:
While the standard ESPAsyncWebServer does work on the ESP32, the author does not support the Arduino IDE for it's use, preferring PlatformIO. I want to stay with the ugly beast because it makes the code accessible to a wider range of people (Ok,...
Power_Broker:
Thank you very much Power_Broker,
I am able to connect to the server and have a web page.
Do you know if it is possible to send text files (.txt) with AJAX ?
My ultimate goal for this project is to be able to send a file to a web page via WiFi, that's why I choose to use the ESPAsyncWebServer.h but it seems to be more complicated than expected.
After a couple of tests I found a solution for the AsyncWebServer. In the code of the ESP32 AP, I replace the WiFi.begin for a WiFi.softAP and I put a WiFi.mode(WIFI_AP), until now it seems to work well
Thank you all for your help.
The final code of the test is this:
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "ESP32wifi";
const char* password = "12345679";
AsyncWebServer server(80);
void setup() {
Serial.begin(115200);
delay(1000);
Serial.println("Start");
Serial.print("Connecting to : ");
Serial.println(ssid);
WiFi.mode(WIFI_AP);
WiFi.softAP(ssid, password);
//WiFi.begin(ssid, password); //Erase this part
Serial.println("Success");
server.on("/hello", HTTP_GET, [](AsyncWebServerRequest * request) {
request->send(200, "text/html", "<p>Hello world!</p>");
});
server.begin();
}
void loop() {
}
1 Like
