ESP32: Webserver, Websockets and JSON (WiFi Part 2) - Arduino 

This is the best video explaining ESP+WebServer+WebSockets. I've watched a "thousand" of they, but none of it was objective and "Crystal clear" like this! Thank You!!!

Great video, really timely for me finding it now! I like your style and your "simple straightforward examples", time for me to get back to work, thanks again!

Great video, that was one of the most efficient Arduino videos I've seen in a long time... Thanks!

This is one of the most informative and useful lessons on creating servers and using websockets. Keep up the good work!

Thank you. After watching alot of videos about websockets, i finally understood it here...

Thanks for this video series. Was able to modify for my own purposes. Just what I needed to expand the functionality of an already awesome microcontroller. You are extremely knowledgeable.

Excellent video and explanation, I have been searching for someone that explained all these parts!

Thank you very much! I find this was extremely well explained, better than anything I have seen so far. I am sure it will help me a lot in setting up the websocket communication to the ESP32 controlling our turtle compound (temp. control in sleeping house, green house power door, heat lamp).

Excellent example, very practical and exactly what I was looking for

You explained everything really well, and provided a great "real world" example along with it, rather than just the typical 'turning a led on and off' examples that everyone else seems to do. Thank you for this. 🙏

Brilliant! I now finally understand the basics and value of web sockets, client side javascript and JSON data exchange. No more ... http-equiv='refresh' ... to update content! I like the way you too that you progressively build up from the simple case to a usable minimum working example.

Your description is excellent. Congratulations. It helped me a lot. I had no idea how to read the ESP configuration and save a new one. 👍👍👍

非常好的教学！循序渐近的推进方式，逐句解释的讲解内容 ，逻辑清晰，言简意赅！让初学者在这一篇视频里就能全面了解所学。 全五星好评！

Another informative video, very nice job. Thank you for making these videos available.

Amazing tutorial man, all examples in the net are confusing, but this is the one that got it for me !!

This is excellent. This helped answer a lot of questions I had. Thank you!

Very good tutorial, using the start with basics and then add in more detail approach. Easy to follow. I like it.

I can't believe how simple you made this. I'm working on a 2 channel DMM to display values in OBS so I don't have to capture my benchtop power supply with a camera. Websockets make it work perfectly in the OBS browser. Even when I turn the interval down to 100, things are stable in the OBS browser. THANK YOU.

this is perfect! Exactly what I was looking for. Thank you very much

I learned a lot from this, Sir. You're a true lifesaver! Thank you so so much!

💯This is what I was looking for! Thank you friend!

Thank you very much for this straight forward explanation! 😀👍

Best tutorial. I learned a lot from this video. Thank you for making this tutorial.

well done, very neatly explained! :D

You are the Best! ❤ I got everything I need from a single video

Thanks … you saved me hours of study and coding !!!!

Excellent example, It really helps, i appreciate, Thanks, please continue....

Thx a lot, your video tutorials are really great.

Very comprehensive. Thanks!

You are a superman of code! Thanks so much I actually understood premise although your skills are superpower. Lou

Amazing series! Thanks alot

Great video, you are very clear. Thanks a loit!

Wonderful, Thank You! Mo.

Thanks a lot for your great tutorial. Very inspiring!

Very good, congratulations make more videos using websocket with ESP32, make a complete automation with sensors, load triggering, buttons, electrical locks, temperature.

Really amazing tutorial

Thanks. That helped a lot.

This is a life saver

thank you ! it is so helpfull

Thanks for this. Just to note I had a compile error with the latest websockets library. After looking up the error online I reverted to version 2.3.4 to fix the error.

what a legend thank you

Thanks you so much Pro :)

Excellent tutorial. For an exercise I am going to try to convert the esp-camera application to use sockets instead of http request-response (uses fetch() in the browser and httpd_resp_send() on the esp32 ). I don't know if you're are familiar with that application/code but there is a lot of advanced java script & html which can be used to learn javascript. The socket code seems simpler and cleaner than the http request response code. The esp-camera sends the frames using "chunks" of data, so I do not know if sockets have that capability.

Thank you very much! You deserve much more attention, good job! Do you know how i can save the created data on the server in a text file?

How is this content free? thanks, you are saving lives

obrigado ! , pelo conhecimento valioso :)

This has been an excellent video (series). I am starting to think once someone makes the move from an arduino uno/nano to an esp32 they are also committing to learn HTML, CSS, javaScript, web technologies and networks. It takes a lot of knowledge to work with these microcontrollers. Also wondering if learning node-red would help with the transition. Is it safe to say that the *.ino code runs on the esp32 (server) and the html code runs on the client browser (client)?

Useful Information given in very easy way. Please also tell how to take client configurable multiple numbers or values from html page to ESP32S3 module. As in that case we have to replace buttons by text boxes with labels.

I figured it out!!

good stuff

thanks for video

thank you，很有收获

thanx that was good

Hi teacher. Thanks for the lessons. Do you recomend or know Brooks about the contents of these lessons. Thnak you. Regards.

thaaaank uoiuuuuuuuuuuuu

Best tutorial on websockets ever! .It works great locally. Only trouble I have is trying to use with DynDns. I open a port and map it but it only shows the webpage with no websocket connection. Any help would be so appreciated : )

Thank you for this series of videos. They are excellent! One quick question: are there any practical limits on the amount of data the ESP32 can send via a web socket to the web page in one transaction? I have an ESP32 monitoring my AC power usage. At the moment, the ESP32 takes 2000 samples of the AC current and voltage waveform, calculates the RMS power in Watts, then sends this one value to the webpage once per second. But what I really want is to send all 2000 samples to the webpage. Do you think web sockets can handle this? Thank you.

Where can I find the documentation or are there example sketches available By the way great explanation 😍😍

ขอบคุณมากครับ จากประเทศไทย ดีมากครับได้ความรู้มากครับ อยากได้ ออกแบบการ EXAM testing Online ? Knowledge test ,Exams can be Random ..The form has a library of 50 selected Questions. Please help Me .

What is this bracket-parenthseses notation in server.on("/", []() {... ? ... You explained very quickly but I would like more information... what to search?

7:20 hi my friend you can use this code: String webpage = R "( // your html code )"

Thank you very much for this great Video, I have a question please, I have ESP32S3 Eye DEV KIT , when i run the code,the serial monitor does not print or show the random numbers and the info to the esp through the web browser .

Thanks for posting a great video, But I am having a probem. In the "ESP32WifiBasic" when I run this i get a blank Serial Monitor I am using the correct baud rate.

Let me start by saying that these are absolutely impeccable videos. And we all thank you for it. However I have a quesiton for you. How can I modify this code so that the websocket is secure. I need it for a project as I'm working with microphone input and inorder to get that from a client you need a secure connection. So it would be amazing if you could please tell me how to use SSL for websockets.

Friend, will there be a sequel? Sending data to esp (sliding, text input) to send variables to esp, to configure modes. (sorry for my english - this is an automatic translation)

Hi, I wanted to ask you if you know if this method could be used for communicating two ESP32s connected in two different networks, or how would you approach communication of two ESP32 connected on different networks with Wi-Fi for real-time data transmission applications.

great thing! I have a question which I don't quite understand right now. Am I correct in saying that the JSON in both cases (TX RX) only creates the "JSON file" as soon as someone connects to the ESP32 via browser? Would it be a disadvantage if you did the whole thing via JSON file and SPIFFS? i.e. there is a physical JSON file on the SPIFFS and this is used for communication. The advantage would be that the data is then stored retentively. I'm thinking of switch positions, etc., which should be where they were before after a reboot. do you have a disadvantage? Thanks for your answer and experties!

in this case we must use the same network when we are accessing the webserver otherwise it wont work , i want to access the web from any network any solutions ? thanks in advance

hy, is it normal that if you press refresh in the web browser, that the Websocket is then "disconnected" and immediately "connected" again? for me it takes about 2-3 seconds to connect again and that's not so nice... is there any way to work around this? I have the same thing if I have several pages because it would be great if the connection was maintained then there was no delay in the display. or is there a possibility that the connection is a bit faster? what is it that the connection is so slow at my project (Website on Spiffs)?

Hi, Thanks for doing this very helpful tutorial. I tried to use if on my UNO WiFi R4 board by replacing WiFi.h with WiFiS3.h. I had to comment out the WebServer.h line because I get a file not found error. I also changed the WebServer server(80) line to WiFiServer server(80). When compiling it it appeared to create the server object ok but I get the following error: Compilation error: 'class WiFiServer' has no member named 'on'. Is there a modification to your script to get it to run on a UNO WiFi R4? Thanks

Sir kindly make vedio in wifi credentials not pur hard-coded. And it connect to my router and also able to control led and other sensor

Hi, I keep getting this compilation error after adding the "webSocketEvent()" function: "Compilation error: 'WStype_t' has not been declared" I have no clue at all how to fix it! How can I resolve this?

Is there any way not to use the single string for the html but istead use actuall hlml, css and js files? Ive got a site a little bit more complex I wan t to host and using only this one String will make everything very messy, because i then have to put it all into one file and i would like to keep my structury.

*HI MO* QUICK QUESTION: Could you help/point me in the right direction regarding webpage hosted on esp32 via SPIFFS. I have written all that is needed and works 100%. ONLY ISSUE: If my esp32 is restarted the webpage in browser is not refreshed and means I have to manually refresh.... Boring. Do you know of work around? I know a few tricks to manipulate but it is not desired...

I was trying to replicate this with an ESP to put data on a webpage from the BMP280 sensor. Everything worked until i tried transfering multiple values(pressure and temperature), this made the page show no values. and I am getting the following error: "enumeration value 'WStype_FRAGMENT_TEXT_START' not handled in switch [-Wswitch]".

Can/do you have a similar example in esp idf?

hey can you help me with my project, i'm using esp32 webserver to controlling a relay on pin 15, which we can controll using checkbox html on esp webserver. But i can't make the relay listen to the html checkbox, can you help me? it's mean a lot if you can help me with my project. Thanks

With the WebSocketsServer by Marcus Sattler I have this error : In member function 'WSclient_t* WebSocketsServerCore::handleNewClient(WiFiClient*)' , warning: function may return address of local variable [-Wreturn-local-addr] return client ; note: declared here WSclient_t dummy = WSclient_t(); But the program is working the same, anybody know the fix ^, Thank You

What would need to change to run this with ESP32 in AP mode?

Is it possible to control the ESP 32 online using webpage ?? and if possible how to make ESP32 not need to check the database of web always for the change in database by user ? is there any way if user changes data and database changed then server connects to ESP32 and changes the output data ? please i am waiting for your reply and i am welling to learn anything from you is there any course you provide other then this youtube channel ? THANK YOU VERY MUCH FOR YOUR VIDEOS

I'm looking for a a method to stream the content of my led matrix wich comes down to a char[900] per frame. i tried just pushing it out on as a udp broadcast frame by frame on every display.update(). it does kinda work but i loose most of the frames resulting in 7-8fps at my poor little python udp server that outputs it on a pygame app tiled visualisation. Now im kinda lost on how to proceed. wireshark shows 7-8 udp packets per second being send from my esp (i wonder why that is cause the sendFrame() gets called on every display.update(). I came back to your video in the hope i can redesign the streaming thing as a websocket. i'll try to fiddle my way through this but (now here comes my question) ... how would you tackle that problem. Are websockets a proper "solution" ? Any thoughts appreciated. Thanks in advance.

hi, i followed till 5:40 min but i got the error of not able to read the ip. Can you help me with this. Thanks

Wich exact webserver library are we using?

Sir, I tried hard step by step to follow but in webserver does not generate random number[The random number is: - ], and other step I can't receive info to ESP32 when I click in webserver[The random number is : - send info to ESP32] I don't know how to fix it, I like to do step by step. please! help me to fix it.

Keep getting compile time errors: 'ESP32WebserverWebsocket:75:31: error: 'WStype_t' has not been declared'... Is Arduino using a wrong 'Webserver library?

Great video. Nicely explained. Thank you very much. I have a question: Can the ESP32 itself act as an AccessPoint, as well as create a server itself within the unit, so that the client computer can connect to the access point first, and then to the server (ports 80 and 81)? This way, we don't have to use a router or any other network (when our requirements is to avoid a router). I saw another video from you (ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-PGt_5xQo2_0.html) that shows how to setup ESP32 as an access point, but I wanted to know if it can create two servers (at port 80 and 81, in this example) while also acting as an access point. Thank you in advance.

I have tried many times but unsuccessfully to add The Tool Kit to my IDE. I keep getting the message /Users/joelleon/Documents/Arduino/SendSoundOverWiFi/SendSoundOverWiFi.ino:32:10: fatal error: AudioTools.h: No such file or directory #include "AudioTools.h" ^~~~~~~~~~~~~~ compilation terminated. exit status 1 Compilation error: AudioTools.h: No such file or directory HELP!!

when trying to compile ESP32WebServerWebSocket w/o any changes to the code, I get compile warnings for redefined UDP_TX_PACKET_MAX_SIZE (C:\Users\kurtt\AppData\Local\Arduino15\libraries\Ethernet\src/Ethernet.h:150: warning: "UDP_TX_PACKET_MAX_SIZE" redefined 150 | #define UDP_TX_PACKET_MAX_SIZE 24) and C:\Users\kurtt\AppData\Local\Arduino15\packages p2040\hardware p2040\2.6.3\libraries\WiFi\src/WiFiUdp.h:27: note: this is the location of the previous definition 27 | #define UDP_TX_PACKET_MAX_SIZE 8192, and c:/users/kurtt/appdata/local/arduino15/packages/rp2040/tools/pqt-gcc/1.4.0-c-0196c06/bin/../lib/gcc/arm-none-eabi/10.3.0/../../../../arm-none-eabi/bin/ld.exe: C:\Users\kurtt\AppData\Local\Temp\arduino-sketch-CAB443F8BF3C071D4BF2F0227174CF92/..\arduino-core-cache\core_5bda265bb51893301d1570cefd79e557.a(cencode.cpp.o): in function `base64_init_encodestate': C:\Users\kurtt\AppData\Local\Arduino15\packages p2040\hardware p2040\2.6.3\cores p2040\libb64/cencode.cpp:13: multiple definition of `base64_init_encodestate'; C:\Users\kurtt\AppData\Local\Temp\arduino-sketch-CAB443F8BF3C071D4BF2F0227174CF92\libraries\WebSockets\libb64\cencode.c.o:c:\Data\Arduino\libraries\WebSockets\src\libb64/cencode.c:23: first defined here, Any ideas?

great job. It has taken almost one day, but now I understand the dependencies between the different modules. Thank you very much :)