How to Create a Web Server (with WebSockets) Using an ESP32 in Arduino
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2019
- This is a continuation of the ESP32 WebSocket Server video: • How to Make an Arduino... . Let's take it to the next level! We begin by hosting a web server and WebSocket server on an ESP32 using Arduino. Next, we use SPIFFS to upload a simple index.html page that we write separately. This page will open a WebSocket connection back to the ESP32, where we can use the page's button to toggle an LED (relatively quickly).
Note that we use the ESP32 as an access point (AP) here to simplify the process. You can do away with the access point, if you wish to have the web server on your local network.
WebSockets provide a persistent connection between a client and server so that either party can send data at any time. They are very useful in things like networked video games, but they can also be applied to IoT devices, if we need fast control of hardware over a network.
Arduino and HTML code from the video can be found here: shawnhymel.com/1882/how-to-cre... - วิทยาศาสตร์และเทคโนโลยี
I just got an ESP32-C3-mini-1 and I had already set up the boards and device to ESP32-C3. Following your presentation, the code worked fine on it. On to the second part! :) Thank you - whoops, this is the second part. I"ll post this back on the first.
Shawn - Great video! It really helps me out with a project. Hope you are doing well and staying safe.
Wow nice timing! Exactly what I need for my next project. ❤️
So I searched google and TH-cam for weeks looking for a detailed yet to the point tutorial about this very topic, and the ones I found are either too complicated or expecting me to be a web developer. Then only today, TH-cam simply suggest this video to me like I never searched for such a thing!!
It's exactly what I'm looking for as if it was made specifically for me!! why TH-cam!! why!! 😩
This video should be the top result whenever someone search for "ESP32 webserver"
Thank you so much for this video as I find it perfect!
Good work Shawn! Done as you had explained and it works perfectly!
Thanks! Glad to hear it worked for you :)
This channel is so underrated.
well explained as usual
mr Shawn
Best explanation I have ever seen. Thank you.
Great video on WebSockets. Loved it !
Thanks! Glad you liked it :)
Incredible, I had no idea this was possible
Well done, and thanks for not dragging it out.
wow it looks like easy i will try it thanks for your time ! :)
Clear (if a bit fast) description of how to do everything. Do you have an updated version for Arduino 2.0 IDE? The installation of tools doesn't seem to work the same.
Very nice guide and at the speed it must be :D
have anyone use the Ionic framework with an IoT project, I am trying to connect an application with the ESP8266 WiFi module and Arduino to be able to manipulate a solenoid to open/close a door with the smarthphone. I am trying to see if this can be feasible, do you have some advices for this beginner ? What modules can I use for this kind of project? It would be so helful
Thanks, great video and you code is amazing clear, reusable.
You have great content!!! May I ask Why you take so long time to upload?? Keep this channel live. This is a really good channel!!
Thanks :) I've been busy with other work, so I haven't had time to make videos. I'll try to post more.
„A few months ago“ - man, feels more like ages. But as always, great work, clean code. Minor improvement could be made trough the use of a captive portal, which opens directly after connecting to the access point. thumbs up
LOL, ok, so like, 10 months is perhaps a bit longer than a "few" :P Agreed on captive portal, but I was keeping it simple for the sake of the video. It would make it much nicer to use. And then you could add an initial page in there that lets you attach the ESP32 to your local network :)
holy mother of god this video is gold
Thanks for this. I got it working in 2021 with no issues btw. My next question what is the data transfer rate? I've read 10-20 mbps and 4 client max but then saw where it may now be 10 client max.... I guess I need to stress test it next to know for sure.
Very useful. Thank you!
Hi, I'm still a beginner and I would like to ask..
To control ESP32 from anywhere, I need to use Firebase or anything like this?
Another question is: Is it possible to ask the ssid and password of the user before the connection? Like making it a product and without having to upload the code again.. Is it possible?
Thank you in advance! And thank you for doing this great tutorial !
Awesome!!! Thanks Shawn!
very nice video, how do you handle multiple led's or buttons? the data returned can't tell what device element is send info?
Thanks! Although I tried to use the program without the esp32 connected to a laptop (5v battery source) but then I can't find the Wifi AP listing on any devices now. The program only works when the esp32 is connected to the laptop. Is there any way to fix this?
What kind of 5V battery? If it's one of those "phone charger" batteries, many of those have built-in circuitry to automatically turn off of not enough current is being drawn (and often, the ESP32 does not pull enough current compared to a smartphone). Try with other batteries or a regular LiPo if you have one.
Well done.
Thanks for such a great video. It really helps me understand how this works. I followed your video and used your sketches but I get to the point where my phone renders the web page but the Button for Led is not highlighted so I can not press. Am I missing something? I am using a esp32 cam ai thinker
Excellent video
Nice, very powerful. Thank you/
Great tutorial! I'm getting a "Error mounting SPIFFS" in the Serial Monitor window. Any advice on what I may be doing wrong? (sketch compiles and uploads to the ESP32 just fine--all libraries installed)
I haven't seen that one, so I'm not sure. Here are a few threads that are worth checking out that talk about that issue: github.com/espressif/arduino-esp32/issues/638 and github.com/me-no-dev/arduino-esp32fs-plugin/issues/8
from OP's reply, what it worked for me was changing this line (located in line 122) "if !SPIFFS.begin()){"
to this:
"if( !SPIFFS.begin(true)){"
So, just add true between the parenthesis, and upload it again, and run it (reset button) at least twice (mine was giving me an error on the first try)
Great video, thanks! Apart from not requiring a message broker, what are the advantages of using websockets instead of mqtt messages?
WebSockets is useful if you want an open connection between two devices, and MQTT offers a publish/subscribe mechanism. For things like sensor data, you would probably want REST or MQTT. If you're looking for fast control (like driving an internet connected robot), something like WebSockets would be better. This is a useful discussion on the differences: iot.stackexchange.com/questions/1492/what-is-the-difference-between-mqtt-and-web-sockets-and-when-should-i-use-them
I have a very important question could you run php on there? It doenst seem so...
Hi, I would like to ask the way around. How about create a node websocket server and client, and esp32 as an endpoint just to send data to server. Is that possible?
Yes, it is possible. You would want to use the HTTP client library with the a websocket client. Something like this would be a good start: www.google.com/amp/s/techtutorialsx.com/2017/11/01/esp32-arduino-websocket-client/amp/
Thank you very much for your video and I would like to ask you if is it possible to implement this kind of access point with Arduino UNO and its Wifi Shield?
Maybe...I think the UNO would run out of memory, though.
Thank you. good understanding.
You're welcome!
great tutorial.. but this tutorial can run with esp 8266?
great video but why such brakeneck speed?
Jesus, so much work for a led
I'm guessing you haven't seen my "speech recognition" LED demo yet :P
As someone just starting out and wanting it all, this looks enticing and step by step tutorial how can things go wrong. Well I have a SPIFFS mounting error despite it appearing to work as shown. So as a noob I have no idea how to fix this.
After a looooooong time :)
LOL...I know.... I'm really hoping to do more :P
Great tutorial thank you! I was wondering what to do if I would want to have this be accessible from an external IP? So that it can be accessible for anyone? (its for an artwork) I've got some cameras working and would like to control some servos through a separate esp32 to change the camera perspective
It is possible. You will need to do "port forwarding" in your router.
@@ShawnHymel Hi Shawn thanks for the quick reply! Well what I have now is using websockets to direct the camera images to go to a remote IP - but I'm struggling with how to add something like buttons to control other elements. Somehow I need to differentiate from the wroom and the camera.. Any suggestions?
@@OneDirectiontoSA what do you mean differentiate between the wroom and camera? Are they on separate IP addresses?
As for adding more buttons and controls, it should be possible. You'll just need to replicate the code and add specific variables and WebSocket messages for the different buttons, LEDs, etc.
Hi. I havent modify your code, but when I open the web page, nothing shows up. I already uploaded the SPIFFS page to the ESP32. What can be the problem?
Are you getting any info from the serial monitor? Did you make sure that your phone/computer is attached to the ESP32's WiFi network (and not connected to other networks)?
I want to ask, I think this is a stupid question.
can this be accessed from anywhere? or only the local server
It's not a stupid question :) Right now, it's configured to be accessed locally: only things within range of the ESP32's WiFI can access it. However, if you add a router and configure the ESP32 to access the router as a client instead, you could easily broadcast the page to the wider Internet.
@@ShawnHymel thanks brother
Nice tuto! Tks!
Hi Shawn, Super video, a big help thanks.
I have a question about using static IP on the ESP32, I tried to implement it, but the ESP32 keeps giving me an exception, can you help?
Regards
Lars
I've not tried it with the ESP32 as the access point / host, but you may want to start here: randomnerdtutorials.com/esp32-static-fixed-ip-address-arduino-ide/
Thanks!
Thanks bro for exciting video, i am studying to control many lights by Webserver. But i want to control each light by one esp8266. can you help me, get to me some advice to resolve this problem? Big thanks Bro
I want to run a nodemcu with a servo. Is it possible to to have it connected to my wifi, and connect to it using my cell network?
Hello
A beautiful video, it took me a lot to understand the use of the webSocket, I modified your code, to use a local network without using SoftAP ().
I wanted to know why, from the local network it works very well, but although I opened the doors in the router, it does not work remotely.
I also tried to change the server port, but still it is not open from outside.
It would seem a problem of the library, have you done some tests also from outside?
I thank you in advance for your kindness.
Have you forwarded the server port in your router to the ESP8266?
And then, of course, you have to know your public IP (which changes very often), this you can find using www.whatismyip.com
So you either need a static IP (which you won't get for little money), or you use a service like www.noip.com/remote-access
@@thomas5477 the problem is Fastweb router. Thare are problem with forwardet port. I have reset router and now its ok.
@@andreaceccarelli6897 Hi Andrea, I'm trying to do the same, but I still can't get it to work locally (on the same network), can you tell me what changes you made?
Awesome video, can you please suggest logic to read multiple led status when button pressed. I'm making project to operate 10 device so when any switch pressed or when I refresh browser I wan to read status of all leds. Please suggest any logic you have that would be very helpful.
You'll need to make the strings that you send back and forth between the browser and ESP32 more complex to include an identifier for the LED or button.
@@ShawnHymel thanks for the reply, I'm converting state of every led in decimal value and in java script side decoding that value and checking every bit if it is 0 or 1 and changing colour accordingly. If you find any efficient way please reply.
@@jenishthumar1904 Not that I can think of right now. If you're encoding them as individual bits, that's about as efficient as you can get :)
Can you make video on how to set internal RTC of esp using Arduino ide. And accuracy of that RTC in normal condition.
@@jenishthumar1904 I don't have plans to work with the RTC at this time, but good to know there's interest!
How do I adjust the LED ignition times?
how can i publish esp webserver, public?
How can i access the server through internet , without port forward ??
Good video, error in "const char", why?
Could I use this to send pwm signals to a dimmable led driver and make a slider on the page? Sorry I'm new to esp 32 and not sure how much it's capable of.
Good question! You should be able to do that. You can send a number (say, 0 to 100) as the percentage of brightness to the ESP32 from the webpage and then update the PWM signal accordingly. I don't know a simple slider in HTML/JS, but this might be a good start: www.w3schools.com/howto/howto_js_rangeslider.asp.
Thank you very much, it works perfectly for me, as it appears in the video, however I am trying to modify it so that it works for me on the same network and does not create a new one, I have tried different ways but the communication between me is cut off the page and arduino, why is this happening?
Not sure what's causing the connection to drop. Can you get this example to work (it doesn't use a soft AP)? th-cam.com/video/ZbX-l1Dl4N4/w-d-xo.html
How to make esp32 accessable from anywhere ,can you make a tutorial on that please.
hey, my esp32 is connected to weight scale(weight scale like we see at market) okay and i want to said this weight data to a server . how to do this plzzzz help
I have done everything correct with the ESP32FS and tool folders but I do not see the uploader in my Arduino IDE???
Try restarting the IDE and making sure you have some ESP32 version selected as your board. What version of the IDE are you using?
@@ShawnHymel Did that several times. 1.8.5. Now the libraries have newer names so I am getting compile errors like: WebSocketsServer.h: No such file or directory I think the one I got from your link is named AsynWebSocket.h I used the arduino code from your website so I guess I'll have to change the include names. That is one thing I hate about Arduino and librarie updates
"call back function called init, in it we ... " lol
Hey! nice to meet you! Liked and susbribed!!
I want to learn more JS applied on esp32. Is there any documentation regarding this?
Thanks to this very informative video.
Please note that JS is not running on the ESP32. The ESP32 is just serving up a web page that contains JS elements, so in practice (almost) anything you can do in JS for websites, you can do here.
@@ShawnHymel can I also apply SASS on the web server?
@@erico7222 I'm not familiar with SASS....so, maybe?
sir do have documentation regarding esp32 on how to code on it?
@@erico7222 Here is getting started with the ESP32 using Arduino: randomnerdtutorials.com/installing-the-esp32-board-in-arduino-ide-windows-instructions/ and here is the official ESP32 documentation: docs.espressif.com/projects/esp-idf/en/latest/esp32/
Thank You
You're welcome...glad it helped!
why not using a standart web server and ajax?
Can we run videos on Arduino by using ESP32 module without or with Wifi?
The ESP32 is still probably too slow to run decent video. If you did a very small resolution (640x480?) and a low framerate (less than 10 fps?), you might be able to get something.
@@ShawnHymel Thanks.. Can you please guide me how i can run video on Arduino with resolution of (640x480)..
@@MuhammadBilal-eb6fh I won't be able to show you, but I can point you to another tutorial that might. What kind of screen do you have? For most of these microcontrollers, you're limited to SPI based LCD displays, so you'll want to start with a library like this: github.com/adafruit/TFTLCD-Library
Hi, could you help me please? I have ESP32 with web server but it always disconnects from wifi in cca 2-3 days. I do not know what to check. All work fine but after 2-3 days disconnected. Thx!
That may be your router requiring a reconnect after a while for all devices. Your best bet would be to put some code inside the loop of the ESP32 to check for a connection, and if it doesn't see one, try to reconnect.
@@ShawnHymel hi thanks a lot for reply! I am desperate... I had implemented pings from the server which pings or access http of esp32 periodically but did not help.... you think I need communucTion other way around? From esp out?
@@martinmacko7297 Yes, I would test to see if the ESP is still connected to WiFi from within the ESP. If it's not connected, re-run the WiFi connection sequence.
@@ShawnHymel can I ask you for som example or hint how to do it? I am not that good in coding. Many thanks!
@@martinmacko7297 I forgot this was using softAP, so there's no router involved. I haven't done anything with handling disconnects with softAP, so I don't have any examples for you. Some tutorials like this one might be useful: techtutorialsx.com/2019/09/22/esp32-soft-ap-station-disconnected-event/
It would be great if the server and the client could connect to a local Wi-Fi network with internet access, and the Arduino will continue to act as a server in that local network.
You can do this, but instead of running WiFi.softAPIP() (WiFi access point), you would want to have the WiFi library connect to a local access point as a client (as shown in this example: github.com/espressif/arduino-esp32/blob/master/libraries/WiFi/examples/WiFiClient/WiFiClient.ino). From there, you could still run the WebServer and WebSocketServer code to respond to requests on your local network.
@@ShawnHymel That's cool, thx!
If I have a 4G module paired with ESP32, how can I share the 4G internet using ESP32 hotspot? So it's not only a web server without internet connection.
If it's 4G router, you'll likely need to use the ESP32 in client mode (instead of AP mode, which I believe I show in the video). Then, connect the ESP32 to the 4G router, and it should be connected to the Internet.
control lights or led from anywhere in the world ???
Pretty much :)
@@ShawnHymel Um no, Well it needs a static ip to do that. It only works when connected to the local network.
@@user-rg1jp2us4o if you port forward on your router, you should be able to control it from outside your local network
OK, Newer zip has a .java file which does not work. Older zip has the .jar file and it works.
Dear , Can you remake the project with micropython ?
Beginner,
when I tried arduino uno : that is simple, let's go next.
When I tried ESP32: what the fuck I am doing ....
Respected *Shawn Hymel* sir,
I am a student, and literally the way you have teached electricity and electromagnetism is infinite wonderful!❤️ You have given us knowledge in the best way which nobody has ever given to us!
In india , teachers don't teach us correctly, they just make. Us gulp the text written in the book.
I request you teacher Shawn hymel that please try to teach us more physics like that you did in past(electricity, electromagnetism)
I know making more such videos will take a lot of effort! But please try to help,
Hope you will reply sir🙏🙏🙏👍❤️😁
can i put esp to sleep and still use the websocket ?? my project need to be asleep when not receiving data !!!
I'm not an expert on the ESP32, but I don't think you can put the processor to sleep, as it will shut off the WiFi. If you want to sleep in between received packets, you might want to loop at using basic TCP instead of WebSockets. Otherwise, you'll have to re-establish a WebSocket connection each time you wake up.
@@ShawnHymel my problem is the node is controlling a relay and the web server is the one that need to send the signal to open or close the relay ....i dont know the exact time i need to wake up .....the other solution is :since im already controlling a mains voltage device i can just tap into the mains and just keep the ESP always plugged in using a phone charger or something..... being on battery is cool but it cant be helped
@@fouzaialaa7962 you could have the ESP32 wake up at various intervals to check if the server has a variable set that tells it to flip the relay. I don't think you can wake up from a WiFi packet. Here is a good article on sleeping with the ESP32: www.google.com/amp/s/lastminuteengineers.com/esp32-deep-sleep-wakeup-sources/amp/
please can you do a tutorial that can teach us this from beginingn to end
This should be a beginning to end tutorial (although I do move a little quickly through the code). I recommend checking out my previous video to get familiar with using WebSockets on the ESP32: th-cam.com/video/ZbX-l1Dl4N4/w-d-xo.html
Great Video. Strange! in my phone, neither the ssid nor the password are shown. The phone only show "ESP_FDFAA5". It can connect without password and works well
Hmm...that is odd. I haven't encountered that before.
That happened to me. the password needs to be at least 9 characters long, mybe that hellps
@@diegomestrecam7674 thank you
August!
EVerything working now except that ip address that populates all by itself..192.68.4.1 Not even my network? Why does this address keep coming up? Any help?
192.168.4.1 is the default IP set by the ESP32 when running in SoftAP mode. To change it, you'll need to use the softAPConfig method. See this example on how to do that: github.com/espressif/arduino-esp32/issues/985#issuecomment-360293942
why my project is "error mounting SPIFFS"???
I'm not sure. It could be a different ESP32 version. Check the versions of Arduino IDE, ESP32 libraries, and SPIFFS libraries. Certain versions of those may cause problems. You also may want to try erasing the flash: github.com/probonopd/WirelessPrinting/issues/106
I was getting this error but running the SPIFFS_Test example sketch fixed things (I think by formatting the spiffs) and is essentially what the final comment in Shawn's link recommends.
I had the same issue... it started working after a few reuploads
Why not just use binary communication?
I guess that nobody can help me assign a STATIC ip address to this?
is this the guy at sparkfun?
I was the guy at SparkFun ;)
Thank You sir
You can probably set a scale value of 1 in a meta viewport tag to fix the zoom issue on phones. Blame Apple for this.
Response is slow... 😮
Great video, but too fast
Tbh the way you explain things makes it too complicated.. would prefer simplified explanations as the drawn out explanation can be very confusing when trying to learn new things..
All of that coding just to loose wifi and have one button and a little dot. wow.
arduino sucks