Hello Daniele,

I think you’re having a problem, because your web browser is not closing the connection with the web server and it causes the server to crash.

Can you follow this thread and add those lines of code to your web server, so it automatically closes the connection after a few seconds?

https://rntlab.com/question/solved-esp32-web-server-drops-connection-crashes/

Hello Rui,
Thank you for your suggestion that resolves only partially the questions that I posed. In fact, I tried successfully to change the sketch “Accessing the ESP32 Web Server From Anywhere” according to your suggestion but the changes do not produce any results about the other question. In fact, in the case of your sketch ” ESP32 Wi-Fi Multisensor” the problem is restricted to the iOS environment.
If I connect the server through an android  smartphone  everything works fine. The same by using Explorer or Edge browsers on Windows 10.
I want to stress that I have no problem to connect the server and display it on my iPhone (or Safari on Mac). I can easily operate on the “View Sensor Readings” label but I cannot change any selection of the “Change mode” label as well as set the “Timer” and “LDR Threshold” values.
Therefore, the problem seems related to the operating system and not to the kind of browser.
Thank you for your kind cooperation.
 

Hi again, I’ve missed that part. I’m sorry about that!

1. Is it safe using ngrok without authentication? It depends on the information that your ESP web server holds… If you’re just accessing sensor readings, I don’t think it has any problem. It’s very unlikely, but if anyone knows that URL, they can access and control your ESP32… So, if you have control options I don’t recommend using it without authentication.
2. Did you try to use the web server on iPhone with Google Chrome? Or did you only test with Safari?
3. What happens when you try to change the mode in your Mac/Iphone? Can you tell me what it prints in the Arduino IDE serial monitor?

Thanks!

Hello Daniele, No problem! I’m here to help and I want to make it work for you…

At the moment our website doesn’t support file upload, so I can’t see that file (you’ll need to upload to Google Drive/Dropbox and share the link here…).

I’m not sure why it’s not working on your iPhone. That project should work in all web browsers (the JavaScript functions used in the example should work across all platforms/web browsers).

Got the PDF file and thank you for providing the debug details!

I’ve spent the last couple of hours trying to find a solution for this problem. Can you try this new example? https://bit.ly/2QSdixc

If your web server crashes with multiple clients, please add the following lines.

https://rntlab.com/question/solved-esp32-web-server-drops-connection-crashes/

Let me know if that solution solves your problem, so I can update the course with a working example!

Dear Rui,
You have done a great work! OK: Now, everything works fine. I tried on my iPhone in addition to Safari other browsers as Chrome and Edge. All modes work as expected independently by the browser chosen.
Even if I am not able to understand the meaning of your changes, I found that they are probably the following lines from 295 to 310:
            client.println(“xhr.send(); setTimeout(function() { location.reload(true); }, 2000); } “);
            client.println(“function setTimer(value) { var xhr = new XMLHttpRequest();”);
           client.println(“xhr.open(‘GET’, \”/?timer=\” + value + \”&\”, true);”);
            client.println(“xhr.send(); setTimeout(function() { location.reload(true); }, 2000); } “);
            client.println(“function setThreshold(value) { var xhr = new XMLHttpRequest();”);
           client.println(“xhr.open(‘GET’, \”/?ldrthreshold=\” + value + \”&\”, true);”);
            client.println(“xhr.send(); setTimeout(function() { location.reload(true); }, 2000); } “);
            client.println(“function outputOn() { var xhr = new XMLHttpRequest();”);
           client.println(“xhr.open(‘GET’, \”/?state=on\”, true);”);
            client.println(“xhr.send(); setTimeout(function() { location.reload(true); }, 2000); } “);
            client.println(“function outputOff() { var xhr = new XMLHttpRequest();”);
           client.println(“xhr.open(‘GET’, \”/?state=off\”, true);”);
            client.println(“xhr.send(); setTimeout(function() { location.reload(true); }, 2000); } “);
            client.println(“function updateSensorReadings() { var xhr = new XMLHttpRequest();”);
           client.println(“xhr.open(‘GET’, \”/?sensor\”, true);”);
           client.println(“xhr.send(); setTimeout(function() { location.reload(true); }, 2000);
Thank you very much for your help.
Daniele

Hello Danielle,
You’re exactly right. I’ve just added this JavaScript code to the page and it instantly fixed the problem:

setTimeout(function() { location.reload(true); }, 2000); }

Just to give you some context on what’s happening. Basically, when you change mode, press the ON/OFF button, or change a value in a field, it calls one of those JavaScript functions:

function outputOn()
function outputOff()
updateSensorReadings()
(etc...)

Those functions are responsible for actually making the request to your ESP board and update those values in the flash memory. After the request, the web page is reloaded. Previously, the page was reloaded instantly which caused unstable behavior in some browsers (even though the page would refresh the ESP didn’t have enough time to change state/updates values). With that line the code waits two seconds before reloading the web page:

setTimeout(function() { location.reload(true); }, 2000); }

I hope that helps!