Thomas Hildebrand asked 9 months ago
Kudos to the Random Nerds for the excellent tutorial “Build Web Servers with ESP32 and ESP8266”.
I’m starting an IoT project based on the example “Web Server – Control Multiple Outputs (Toggle Switches)” in Module 3, section 2.2 of the book. The example code works perfectly when used with the default HTTP port 80. But for various reasons I need to use a different port (I chose 8001). The obvious place to change the port is by changing the following line (near the top of main.cpp)
from AsyncWebServer server(80);to AsyncWebServer server(8001);
This works for the static HTML page, it displays the correct text and slider icons when I point my browser to
http://<myIP>:8001
I can also move the slider and get the expected result.
However, the whole async web server magic which synchronizes the sliders etc. with other browser windows now doesn’t work anymore. I suspect I have to change the code to use port 8001 in other places too, but where?
Any help would be greatly appreciated.
Sara Santos Staff answered 9 months ago
Hi.
Can you provide more details about what is not working? What kind of synchronization is not working?
Regards,
Sara
Thomas Hildebrand answered 9 months ago
When I compile with the default port 80 in this statement AsyncWebServer server(80);everything works fine. In particular:
1) I can open two web browser windows, each one pointed at http://<myIP>
Both browser windows show the expected data, i.e. 4 “cards”, each showing the little light bulb
next to the GPIO number, the action slider, and the state of the LED. Initially each slider is in the
“off” position, and the state text says “State:OFF”.
2) When (in the first browser) I move one of the sliders to the right, 4 things happen:
a) The slider moves to the right and turns red
b) The LED wired up to the corresponding GPIO pin turns on
c) The state info shows “State=ON”
c) The same card in the other browser “magically” reflects the changes made in the first browser,
i.e the slider moved to the right position and turned red, and the state shows “State=ON”
3) The same is true for all 4 cards (GPIOs) in the “ON” and the “OFF” direction. Turning the LED on/off with the
slider in the first browser moves the same slider in the second browser, and vice versa. Everything
works as it should!
If, on the other hand, I compile with port 8001 in this statement AsyncWebServer server(8001);
the following happens:
1) I can still open two web browser windows, each one pointed at http://<myIP>:8001
Both browser windows show 4 “cards”, each showing the little light bulb
next to the GPIO number, the action slider, and the state of the LED. Initially each slider is in the
“off” position, but the state text is empty “State: “
2) When (in the first browser) I move one of the sliders to the right, this happens:
a) The slider moves to the right and turns red
b) The LED wired up to the corresponding GPIO pin does not turn on
c) The state info remains empty “State= “
c) The same card in the other browser did not change, i.e. it is still in the initial state
with the slider on the left and dark/grey
So, in summary, when using port 8001 instead of port 80, while the static HTML webpage displays correct on both browsers, making any state changes (moving the slider) in any browser has no effect on the LED wired up to the GPIO pin, and the change does not propagate to the other browser.
My theory is that
AsyncWebServer server(8001);starts the webserver on port 8001, but the asyncwebserver still uses port 80, and needs to somewhere be told to also use port 8001. But of course I could be wrong.
Sara Santos Staff answered 9 months ago
Hi.
I’m not sure exactly what might be wrong.
Can you take a look at the suggestions here and see if it works: https://github.com/me-no-dev/ESPAsyncWebServer/issues/74#issuecomment-1397945769
I hope this helps.
Regards,
Sara
William Lucid answered 9 months ago
May I suggest trying port forwarding for 8001?
Finding if a port is open: How to Check for Open Port
Regards,
William