this is the best way to explain something related to the coding by writing and explaining the code line by line instead of showing the whole code and then explain..... wonderful sir i salute you.... thank you very much 🙏🙏🙏
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!!!
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. 🙏
Thank you very much for your feedback 😊 After posting the video though many people asked me to provide an example with turning an led on and off, so I ended up making that video as well 😂 (part 3). Anyway, I do recommend you to check out part 4 of this series where I structure the program and separate HTML from Javascript. It makes programming way easier: ua-cam.com/video/VaNVrE7-AO8/v-deo.html
Great tutorial! Loved the slow and steady explanation in the beginning! Felt like I didn't have to pause or go back to understand things, however at the end it felt kindda rushed and I needed to pause/go back over multiple occasions. (Still great tutorial!!)
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.
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.
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.
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).
@@mothunderz Уважаемый друг! Могу я попросить тебя объяснить мне еще белее простую вещь - как работать с чистым HTML и обработкой на сервере POST и GET запросов? На примере хотя бы одной кнопки и полей 'include'. А то я не могу понять как мне введенное пользователем время отправить и считать на сервере и сравнить с реальным... ПОЖАЛУЙСТА. Спасибо!
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!
Very good, congratulations make more videos using websocket with ESP32, make a complete automation with sensors, load triggering, buttons, electrical locks, temperature.
Thank you for your comment. Yes, will expand on this code. Now preparing for part 3 in which multiple ESP32 will communicate with eachother using Websockets.
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.
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.
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.
Please check out Part 3 and Part 4 of the series. After following these parts you should be able to communicate various numbers and variables between HTML and ESP.
this is the best tutorial and super clean but for hobbies it is almost impossible to program it, ohh god, C and HTML and Json, super super super complicated. i don't think ESP32 will be popular same as Arduino. Yes it runs webserver, yes it is awesome future however i dont wanna be expert of 3 languages
What is this bracket-parenthseses notation in server.on("/", []() {... ? ... You explained very quickly but I would like more information... what to search?
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 .
Hi, I am not familiar with the Eye dev kit. However, if both the Serial.print is not working and the webserver, it seems to me like there might just be a problem with programming of the ESP in general. Have you tried to run other code on the ESP32? Does for instance the simple blink.ino example program run? Do you get an error when programming this code? Step 1 should be to make sure that the Serial interface is working. Only then you can debug what is going on. Good luck with your project!
@mothunderz Уважаемый друг! Спасибо большое за подробные и пошаговые объяснения! Могу я попросить тебя объяснить мне еще белее простую вещь - как работать с чистым HTML (то есть без JavaScript) и обработкой на сервере POST и GET запросов? На примере хотя бы одной кнопки и полей 'include'. А то я не могу понять как мне введенное пользователем время отправить и считать на сервере и сравнить с реальным... ПОЖАЛУЙСТА. Спасибо!
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)?
Thank you very much for your feedback Yes indeed. The ESP32 acts as a server and sends the HTML and Javascript to the browser just like any other webserver would do.
Thank you! Yes, it is possible to save data on the server (so on the ESP32). You have two options for that. You can either save data in the EEPROM area of the ESP32 or you can connect an external SD card to it. If you have the extra hardware, I would recommend looking into the SD card option.
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.
The ESP is not very powerful when it comes to IP network routing etc. If you have two ESP32 on different networks, one needs to have some HW in the middle to bridge the two connections.
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?
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!
Hi Severin, JSON only converts variables to a string (or the other way around). You can use it for many things. In this video I used it to send data to Javascript clients, but you could use it as well to store data on SPIFFS. In fact, I always use JSON for that. The one thing you should consider when working with SPIFFS is that the number of write cycles are limited (about 100k cycles I think). That sounds like a lot, but it is not: if you write every minute to the SPIFFS you will run into trouble after 70 days. That is why it is best to store data first in the memory of the ESP and only write to the ESP every hour or so. This gets you to (11.4 years). Now that you mention it, will do a video on writing to SPIFFS next (when I get to it...) Good luck with your project! Sander
@@mothunderz Thank you for your answer. Unfortunately I now have 2 more problems with your solution in my project. The difference between your project and mine is that my website is on the SPIFFS and that I use several tasks via RTOS. However, I don't have both problems with your basic project when it runs on my ESP. Problem 1: It takes quite a long time (about 4-5 seconds) until the web browser establishes a web socket connection and "Client 0 connected" is displayed in the serial monitor. How can I find out what's causing this? how can i debug this? Problem 2: if values are sent with the "Send info to ESP32" button, it can happen that the ESP aborts with "Core 1 panic'ed...." and restarts. However, if I factor out everything from "// JSON string was received correctly, so information can be retrieved:" -> So to speak, no further processing of variables, the ESP continues to run without problems. Do you have any idea how I can find out what's causing this?
I've found the problem now... Apparently you just have to formulate the whole thing into one question so that you can think for yourself and don't lose the thread ;) Solution: webSocket.loop(); // Update function for the webSockets must run in the shortest task when using RTOS, otherwise the ESP crashes. In my case Task with 10ms
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.
If you want to send 2000 messages per second that is 500µs per message. How many bytes are the samples? I dont think that web sockets were meant to be used for such a fast messaging, but at the same time I dont think that the ESP32 will have a problem with it (as long as your sample is not too many bytes). Best is to just try it out? However, why would you want that many read-outs? wouldnt one read-out every 100ms be sufficient?
@@mothunderz thank you for your reply. I should have been more precise in my question. I don’t need to send 2000 samples per second. I just need to send the 2000 samples once in a while,for example, when the user presses a button on the webpage. And it doesn’t need to be in real time either. If it takes 10 seconds to send the 2000 samples, that’s fine. FYI each sample would be a 16 bit value. Right now I’m using Blynk IOT,but you can only send a few samples per second. It in painfully slow. I’m looking for something faster. My end goal is to use chart.js to plot the AC waveform. Thanks again for your time and help.
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)
Yes, I am working on a sequel, but got held up, so need some more time to complete. However, in part 3 I first focus on communication between ESP32s. I think you would like to have an explanation how to create sliders and a txt input with the HTML webserver so that you can process that in the ESP32. Is that correct?
Hi Dieu, what exactly do you mean with "i got the error of not able to read the ip"? Does the code compile, but you dont see an ip address in the console? I also shared the final code on Github. Have you tried running that? Does that work? Cheers, Sander
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 : )
Interesting, on my router it does work. Please try the code of part 4. In part 4 I changed to a better webserver, that might solve your problem: ua-cam.com/video/VaNVrE7-AO8/v-deo.html
@@mothunderz Hello. Yes, it works on my router locally but I can't access it from outside my network even though I do have a DynDns running. Could no CA be causing this?? Thanks again for replying to my questions.
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
I dont have that particular board, so cannot test it out, but please check this code -> it uses a different library: ua-cam.com/video/VaNVrE7-AO8/v-deo.html
Thanks@@mothunderzfor the reply. I took a look at the new video to plot using async and ESP32. I'm not sure how compatible the libraries are with Arduino. It's all fairly new to me. I will study the video a bit more. I may just go buy an ESP32 since it seems a bit more popular with webservers, sockets, etc. I'm not trying to doing anything elaborate ... just trying to make simple updates to the web browser as my code runs without the client having to request updates manually. Thanks again.
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, I think that it is the browser disconnecting and connecting upon a refresh, not the ESP. In essence that is the idea of "refresh" that you reload everything. However, perhaps a different ESP library does that re-connect faster. In part 4 of this series I switched the library to: #include Can you check if that code works better for you: ua-cam.com/video/VaNVrE7-AO8/v-deo.html If you have several pages and you want to navigate to the same page after a refresh you need "restfull navigation" in your browser. This means that the http link identifies the page like: "www.mywebsite.com/mypage". I have not done this yet with the ESP, but it should be possible the same way you program a normal web page. Good luck with your project!
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.
Hi Ken, Sorry for my late reply. I thought I replied to you, but today I saw my reply was not online. The code in ESP32WifiBasic is rather straightforward. I would recommend to make sure first that you can program to the ESP32 at all and that the Serial Monitor is working in your setup. The problem could be unrelated to the Wifi code. Good luck!
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.
Thank you very much for your feedback! To date I have not looked in to SSL yet for the ESP. The main reason is that in my projects I typically connect a gateway between the ESP and Internet. At the moment I am working on a BLE tutorial series and as such dont have time to look into this topic in the near future, however, I did find a good description online that I hope can help you: randomnerdtutorials.com/esp32-esp8266-https-ssl-tls/ Good luck with your project!
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 Yes. Here's how i did it: 1. Define three character array's each of which has the compressed HTML, CSS and Javascript. Ensure you use only single quotation mark throughout. 2. in HTML where you make reference to the css or javascript page ensure its formatted correcty 3. Add handler for /csspage, /js page similar to handle root. 4. refer to Adcvanced Webserver sketch in examples. for further details.
*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...
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
For using web site on different network you will need static IP from your ISP or you can use webserver from AWS GCP and use web socket with it also there are no other option.
ขอบคุณมากครับ จากประเทศไทย ดีมากครับได้ความรู้มากครับ อยากได้ ออกแบบการ EXAM testing Online ? Knowledge test ,Exams can be Random ..The form has a library of 50 selected Questions. Please help Me .
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
It is not fully clear to me what you want to do, but I think you would like to send data from the webpage to the ESP32 and control the ESP32 that way. That is possible and in fact I do that in part 3 of the series: ua-cam.com/video/ZJnXKD0LqDo/v-deo.html At this point in time I only have the videos available on this youtube channel. Good luck with your project!
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.
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]".
Great to hear you managed to work it out! if you want to know more about how to transport data back and forth, check out Part 3 as well: ua-cam.com/video/ZJnXKD0LqDo/v-deo.html
Hi Shahbaz, thank you for the feedback. There are many ways to insert the wifi credentials. The easiest is to use the serial interface with the computer. Alternatively it can be done with peripheral HW, like a keyboard. The PW can then be stored on an SD card. That way you dont need to re-insert the password after power cycling. However, the main topic with deploying this solution is security: Anyone who gets hold of the Arduino/SD card will be able to access your password. In essence it is also possible to read out the password when you hard-code it like I do in the video, but that is a bit more difficult than when the password is written on the SD card directly. I will look into a vid here, but at the moment dont get to record anything unfortunately...
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
The implementation of a checkbox is relatively straightforward. First of all: I strongly recommend to watch Part 3 and Part 4 of these series as especially in Part 4 the programming becomes a lot cleaner (separation of HTML and Javascript, etc). In HTML you add a checkbox: then in Javascript you add a variable to refer to the ID of the checkbox: var id_checkbox = document.getElementById('ID_AUTO_UPDATE'); and you refer to a callback function: auto_update.addEventListener('change', checkbox_callback); Then you can create the callback function below that: function checkbox_callback() { if(this.checked) { // do some fun stuff in case the checkbox is checked } else { // do some fun stuff in case the checkbox is unchecked } } the rest is 100% identical to the stuff I present in the videos. Have fun with your project!
It is quite straightforward to change the ESP32 to AP mode. In the beginning of this video I change the mode to AP: ua-cam.com/video/VaNVrE7-AO8/v-deo.html for more information, see as well: ua-cam.com/video/PGt_5xQo2_0/v-deo.html Please let me know if it worked out for you. Good luck with your project!
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
Hi Richard, First of all my apologies for my late reply. In Part 4 I have switched to a different WebServer. Please try that one out and see if it works better for you: ua-cam.com/video/VaNVrE7-AO8/v-deo.html Cheers, Sander
Keep getting compile time errors: 'ESP32WebserverWebsocket:75:31: error: 'WStype_t' has not been declared'... Is Arduino using a wrong 'Webserver library?
OK, did this the job: //#include // needed for instant communication between client and server through Websockets #include #include //#include #include #include #include // SSID and password of Wifi connection:
Hi Dirk, Thank you very much for your feedback. Interesting you got this error. It sounds like the WebSocketsServer library is not properly installed on your system. However, great to hear that using these other libraries you were able to get it to work! Best Regards, Sander
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.
It is a bit difficult to figure out where it goes wrong without a bit more information. In this video I describe different steps to get to the final result. Does the step at 9:30 in the video work where a random number is shown, but you need to refresh the screen to get a new random number? What I highly recommend is to debug in Javascript using: console.log(VARIABLE); You can see what the value of a variable is with this comment in Javascript. Then, in the webbrowser you need to right-click and select "inspect". Then select the console window. Have you tried refreshing the webbrowser? If you download the final code, does it work then for you? github.com/mo-thunderz/Esp32WifiPart2
Here the link to the library: www.arduinolibraries.info/libraries/web-sockets In the Arduino IDE, if you search for "arduino websockets" in the library manager you will see one entitled "WebSockets" by Markus Sattler. That is the correct one. I currently have version 2.4.0 installed myself.
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 (ua-cam.com/video/PGt_5xQo2_0/v-deo.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.
Thank you for your feedback. As for your question: I have not looked into that yet, so unfortunately cannot comment to that. At the moment I am quite overloaded with work, so dont get to make videos :-/
This is by FAR the best explimation of web sockets I've seen. Thankyou sir!!!
this is the best way to explain something related to the coding by writing and explaining the code line by line instead of showing the whole code and then explain..... wonderful sir i salute you.... thank you very much 🙏🙏🙏
All the information you need to get started with web sockets - neatly shrink wrapped into a 35 minute video. Excellent!
Youre welcome, glad it worked for you :-)
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!!!
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. 🙏
Thank you very much for your feedback 😊 After posting the video though many people asked me to provide an example with turning an led on and off, so I ended up making that video as well 😂 (part 3). Anyway, I do recommend you to check out part 4 of this series where I structure the program and separate HTML from Javascript. It makes programming way easier:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
@@mothunderz I’ll make sure to check that one out as well. Thanks.
Great tutorial!
Loved the slow and steady explanation in the beginning! Felt like I didn't have to pause or go back to understand things, however at the end it felt kindda rushed and I needed to pause/go back over multiple occasions. (Still great tutorial!!)
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.
Glad it helped! Thank you for your feedback
This is one of the most informative and useful lessons on creating servers and using websockets. Keep up the good work!
Glad it was helpful!
Very good tutorial, using the start with basics and then add in more detail approach. Easy to follow. I like it.
Glad it was helpful!
Great video, that was one of the most efficient Arduino videos I've seen in a long time... Thanks!
Glad it was helpful!
Excellent video and explanation, I have been searching for someone that explained all these parts!
Awesome, thank you!
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.
Glad it helped! Cool application :-)
非常好的教学！循序渐近的推进方式，逐句解释的讲解内容 ，逻辑清晰，言简意赅！让初学者在这一篇视频里就能全面了解所学。 全五星好评！
I had to use google translate to understand, but thank you very much for the constructive feedback 😀
Thank you. After watching alot of videos about websockets, i finally understood it here...
great job. It has taken almost one day, but now I understand the dependencies between the different modules. Thank you very much :)
Glad it was helpful!
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.
Glad it helped!
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).
Great to hear!
@@mothunderz Уважаемый друг! Могу я попросить тебя объяснить мне еще белее простую вещь - как работать с чистым HTML и обработкой на сервере POST и GET запросов? На примере хотя бы одной кнопки и полей 'include'. А то я не могу понять как мне введенное пользователем время отправить и считать на сервере и сравнить с реальным... ПОЖАЛУЙСТА. Спасибо!
Amazing tutorial man, all examples in the net are confusing, but this is the one that got it for me !!
Great to hear that, thank you for your feedback!
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.
👍👍👍
Thank you for your feedback!
Excellent example, It really helps, i appreciate, Thanks, please continue....
Thank you very much for your feedback!
You are one heck of a teacher.
I commend you Sir.
Thank you very much!
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!
Glad it was helpful!
Thanks … you saved me hours of study and coding !!!!
Glad I could help! Thank you for your feedback
I learned a lot from this, Sir. You're a true lifesaver!
Thank you so so much!
You're very welcome!
Best tutorial. I learned a lot from this video.
Thank you for making this tutorial.
Another informative video, very nice job. Thank you for making these videos available.
You are the Best! ❤ I got everything I need from a single video
Thank you very much! Great to hear the video was helpful
Excellent example, very practical and exactly what I was looking for
Glad it was helpful!
This is excellent. This helped answer a lot of questions I had. Thank you!
Glad it was helpful!
You are a superman of code! Thanks so much I actually understood premise although your skills are superpower. Lou
Thank you very much for your feedback!
this is perfect! Exactly what I was looking for. Thank you very much
You're welcome!
Very good, congratulations make more videos using websocket with ESP32, make a complete automation with sensors, load triggering, buttons, electrical locks, temperature.
Thank you for your comment. Yes, will expand on this code. Now preparing for part 3 in which multiple ESP32 will communicate with eachother using Websockets.
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.
I have not worked with the ESP-camera, but let me know if it worked out for you!
Is is really great and very helpful. Thank you very much!
Thank u for this video that is exactly what I need
Thank you very much for this straight forward explanation! 😀👍
You are welcome, thank you for your feedback!
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.
Thank you for the feedback. I will check the latest websockets library and look into this.
How is this content free? thanks, you are saving lives
Thank you very much for your feedback :-)
Thx a lot, your video tutorials are really great.
Glad you like them! Thank you for your feedback
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.
Please check out Part 3 and Part 4 of the series. After following these parts you should be able to communicate various numbers and variables between HTML and ESP.
Very comprehensive. Thanks!
Glad it was helpful!
well done, very neatly explained! :D
You're welcome!
this is the best tutorial and super clean but for hobbies it is almost impossible to program it, ohh god, C and HTML and Json, super super super complicated. i don't think ESP32 will be popular same as Arduino. Yes it runs webserver, yes it is awesome future however i dont wanna be expert of 3 languages
What is this bracket-parenthseses notation in server.on("/", []() {... ? ... You explained very quickly but I would like more information... what to search?
Great video, you are very clear. Thanks a loit!
Glad you liked it!
Amazing series! Thanks alot
Glad you enjoy it!
💯This is what I was looking for! Thank you friend!
Glad I could help!
Really amazing tutorial
Thank you very much!
Great video. Thanks!
Wonderful, Thank You! Mo.
Thanks for listening
Fantastic tutorials
Glad you like them!
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 .
Hi, I am not familiar with the Eye dev kit. However, if both the Serial.print is not working and the webserver, it seems to me like there might just be a problem with programming of the ESP in general. Have you tried to run other code on the ESP32? Does for instance the simple blink.ino example program run? Do you get an error when programming this code? Step 1 should be to make sure that the Serial interface is working. Only then you can debug what is going on. Good luck with your project!
@@mothunderz thank you very much
@mothunderz Уважаемый друг! Спасибо большое за подробные и пошаговые объяснения! Могу я попросить тебя объяснить мне еще белее простую вещь - как работать с чистым HTML (то есть без JavaScript) и обработкой на сервере POST и GET запросов? На примере хотя бы одной кнопки и полей 'include'. А то я не могу понять как мне введенное пользователем время отправить и считать на сервере и сравнить с реальным... ПОЖАЛУЙСТА. Спасибо!
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)?
Thank you very much for your feedback
Yes indeed. The ESP32 acts as a server and sends the HTML and Javascript to the browser just like any other webserver would do.
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?
Thank you! Yes, it is possible to save data on the server (so on the ESP32). You have two options for that. You can either save data in the EEPROM area of the ESP32 or you can connect an external SD card to it. If you have the extra hardware, I would recommend looking into the SD card option.
Please check out part 4 of my Webserver series in which I show how to realize a webserver with the ESP32 internal flash memory
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.
The ESP is not very powerful when it comes to IP network routing etc. If you have two ESP32 on different networks, one needs to have some HW in the middle to bridge the two connections.
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?
Thanks. That helped a lot.
You are welcome!
Where can I find the documentation or are there example sketches available
By the way great explanation 😍😍
Please see the comments section of the video, the code is available here:
github.com/mo-thunderz/Esp32WifiPart2
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!
Hi Severin, JSON only converts variables to a string (or the other way around). You can use it for many things. In this video I used it to send data to Javascript clients, but you could use it as well to store data on SPIFFS. In fact, I always use JSON for that. The one thing you should consider when working with SPIFFS is that the number of write cycles are limited (about 100k cycles I think). That sounds like a lot, but it is not: if you write every minute to the SPIFFS you will run into trouble after 70 days. That is why it is best to store data first in the memory of the ESP and only write to the ESP every hour or so. This gets you to (11.4 years). Now that you mention it, will do a video on writing to SPIFFS next (when I get to it...) Good luck with your project! Sander
@@mothunderz Thank you for your answer.
Unfortunately I now have 2 more problems with your solution in my project. The difference between your project and mine is that my website is on the SPIFFS and that I use several tasks via RTOS. However, I don't have both problems with your basic project when it runs on my ESP.
Problem 1: It takes quite a long time (about 4-5 seconds) until the web browser establishes a web socket connection and "Client 0 connected" is displayed in the serial monitor. How can I find out what's causing this? how can i debug this?
Problem 2: if values are sent with the "Send info to ESP32" button, it can happen that the ESP aborts with "Core 1 panic'ed...." and restarts. However, if I factor out everything from "// JSON string was received correctly, so information can be retrieved:"
-> So to speak, no further processing of variables, the ESP continues to run without problems.
Do you have any idea how I can find out what's causing this?
I've found the problem now... Apparently you just have to formulate the whole thing into one question so that you can think for yourself and don't lose the thread ;)
Solution:
webSocket.loop(); // Update function for the webSockets
must run in the shortest task when using RTOS, otherwise the ESP crashes. In my case Task with 10ms
This is a life saver
You are welcome, thank you for your comment!
thank you ! it is so helpfull
You're welcome!
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.
If you want to send 2000 messages per second that is 500µs per message. How many bytes are the samples? I dont think that web sockets were meant to be used for such a fast messaging, but at the same time I dont think that the ESP32 will have a problem with it (as long as your sample is not too many bytes). Best is to just try it out? However, why would you want that many read-outs? wouldnt one read-out every 100ms be sufficient?
@@mothunderz thank you for your reply. I should have been more precise in my question. I don’t need to send 2000 samples per second. I just need to send the 2000 samples once in a while,for example, when the user presses a button on the webpage. And it doesn’t need to be in real time either. If it takes 10 seconds to send the 2000 samples, that’s fine. FYI each sample would be a 16 bit value. Right now I’m using Blynk IOT,but you can only send a few samples per second. It in painfully slow. I’m looking for something faster. My end goal is to use chart.js to plot the AC waveform. Thanks again for your time and help.
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)
Yes, I am working on a sequel, but got held up, so need some more time to complete. However, in part 3 I first focus on communication between ESP32s. I think you would like to have an explanation how to create sliders and a txt input with the HTML webserver so that you can process that in the ESP32. Is that correct?
@@mothunderz Yes, exactly, to be able to send different data to the esp.
7:20
hi my friend you can use this code:
String webpage = R "(
// your html code
)"
Excellent suggestion, thank you very much!
obrigado ! , pelo conhecimento valioso :)
You are very welcome :-)
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
Hi Dieu, what exactly do you mean with "i got the error of not able to read the ip"? Does the code compile, but you dont see an ip address in the console? I also shared the final code on Github. Have you tried running that? Does that work? Cheers, Sander
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 : )
Interesting, on my router it does work. Please try the code of part 4. In part 4 I changed to a better webserver, that might solve your problem:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
@@mothunderz Hello. Yes, it works on my router locally but I can't access it from outside my network even though I do have a DynDns running. Could no CA be causing this?? Thanks again for replying to my questions.
I have some questions and solutions pls tell ms how can i ask
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
I dont have that particular board, so cannot test it out, but please check this code -> it uses a different library:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
Thanks@@mothunderzfor the reply. I took a look at the new video to plot using async and ESP32. I'm not sure how compatible the libraries are with Arduino. It's all fairly new to me. I will study the video a bit more. I may just go buy an ESP32 since it seems a bit more popular with webservers, sockets, etc. I'm not trying to doing anything elaborate ... just trying to make simple updates to the web browser as my code runs without the client having to request updates manually. Thanks again.
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, I think that it is the browser disconnecting and connecting upon a refresh, not the ESP. In essence that is the idea of "refresh" that you reload everything. However, perhaps a different ESP library does that re-connect faster. In part 4 of this series I switched the library to:
#include
Can you check if that code works better for you:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
If you have several pages and you want to navigate to the same page after a refresh you need "restfull navigation" in your browser. This means that the http link identifies the page like: "www.mywebsite.com/mypage". I have not done this yet with the ESP, but it should be possible the same way you program a normal web page.
Good luck with your project!
Fantastico job!
Thank you very much!
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.
Hi Ken, Sorry for my late reply. I thought I replied to you, but today I saw my reply was not online. The code in ESP32WifiBasic is rather straightforward. I would recommend to make sure first that you can program to the ESP32 at all and that the Serial Monitor is working in your setup. The problem could be unrelated to the Wifi code. Good luck!
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.
Thank you very much for your feedback! To date I have not looked in to SSL yet for the ESP. The main reason is that in my projects I typically connect a gateway between the ESP and Internet. At the moment I am working on a BLE tutorial series and as such dont have time to look into this topic in the near future, however, I did find a good description online that I hope can help you:
randomnerdtutorials.com/esp32-esp8266-https-ssl-tls/
Good luck with your project!
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 Yes. Here's how i did it:
1. Define three character array's each of which has the compressed HTML, CSS and Javascript. Ensure you use only single quotation mark throughout.
2. in HTML where you make reference to the css or javascript page ensure its formatted correcty
3. Add handler for /csspage, /js page similar to handle root.
4. refer to Adcvanced Webserver sketch in examples. for further details.
Yes, this should work as well. Alternatively see:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
what a legend
thank you
Thank you very much for your feedback!
Super gutes Video!!!
WEitermachen!
*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 am not 100% sure what you are looking for, but would this implementation help you?
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
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
For using web site on different network you will need static IP from your ISP or you can use webserver from AWS GCP and use web socket with it also there are no other option.
ขอบคุณมากครับ จากประเทศไทย ดีมากครับได้ความรู้มากครับ อยากได้ ออกแบบการ EXAM testing Online ? Knowledge test ,Exams can be Random ..The form has a library of 50 selected Questions. Please help Me .
Thank you for your feedback. Unfortunately I am very busy with work and have no time to assist you with an exam test.
What is that char* thing?
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
It is not fully clear to me what you want to do, but I think you would like to send data from the webpage to the ESP32 and control the ESP32 that way. That is possible and in fact I do that in part 3 of the series:
ua-cam.com/video/ZJnXKD0LqDo/v-deo.html
At this point in time I only have the videos available on this youtube channel.
Good luck with your project!
@@mothunderz in part three you did in local network i want that in web is this possible
@@informatica807 hi, this is exactly what im looking for too! did u find a solution? please share if u have
Thanks you so much Pro :)
Glad it helped and thank you for the feedback
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.
well nevermind. using WiFiUdp.h instead of AsyncUDP.h and memcopy instead of a clumsy for-loop did the trick. im as happy as i can be.
Wow, you managed to solve that one quickly! Great you found a good solution :-)
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]".
I managed to fix it somehow by using the provided files and modyfiyng them, great video!
Great to hear you managed to work it out! if you want to know more about how to transport data back and forth, check out Part 3 as well:
ua-cam.com/video/ZJnXKD0LqDo/v-deo.html
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 Shahbaz, thank you for the feedback. There are many ways to insert the wifi credentials. The easiest is to use the serial interface with the computer. Alternatively it can be done with peripheral HW, like a keyboard. The PW can then be stored on an SD card. That way you dont need to re-insert the password after power cycling. However, the main topic with deploying this solution is security: Anyone who gets hold of the Arduino/SD card will be able to access your password. In essence it is also possible to read out the password when you hard-code it like I do in the video, but that is a bit more difficult than when the password is written on the SD card directly. I will look into a vid here, but at the moment dont get to record anything unfortunately...
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
The implementation of a checkbox is relatively straightforward. First of all: I strongly recommend to watch Part 3 and Part 4 of these series as especially in Part 4 the programming becomes a lot cleaner (separation of HTML and Javascript, etc).
In HTML you add a checkbox:
then in Javascript you add a variable to refer to the ID of the checkbox:
var id_checkbox = document.getElementById('ID_AUTO_UPDATE');
and you refer to a callback function:
auto_update.addEventListener('change', checkbox_callback);
Then you can create the callback function below that:
function checkbox_callback() {
if(this.checked) {
// do some fun stuff in case the checkbox is checked
} else {
// do some fun stuff in case the checkbox is unchecked
}
}
the rest is 100% identical to the stuff I present in the videos.
Have fun with your project!
Can/do you have a similar example in esp idf?
I have not had the time to look into this yet, but will check it out.
What would need to change to run this with ESP32 in AP mode?
It is quite straightforward to change the ESP32 to AP mode. In the beginning of this video I change the mode to AP:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
for more information, see as well:
ua-cam.com/video/PGt_5xQo2_0/v-deo.html
Please let me know if it worked out for you. Good luck with your project!
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
Hi Richard,
First of all my apologies for my late reply. In Part 4 I have switched to a different WebServer. Please try that one out and see if it works better for you:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
Cheers, Sander
Супер все работает
Keep getting compile time errors: 'ESP32WebserverWebsocket:75:31: error: 'WStype_t' has not been declared'... Is Arduino using a wrong 'Webserver library?
OK, did this the job:
//#include // needed for instant communication between client and server through Websockets
#include
#include
//#include
#include
#include
#include
// SSID and password of Wifi connection:
Hi Dirk, Thank you very much for your feedback. Interesting you got this error. It sounds like the WebSocketsServer library is not properly installed on your system. However, great to hear that using these other libraries you were able to get it to work! Best Regards, Sander
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.
It is a bit difficult to figure out where it goes wrong without a bit more information. In this video I describe different steps to get to the final result. Does the step at 9:30 in the video work where a random number is shown, but you need to refresh the screen to get a new random number? What I highly recommend is to debug in Javascript using:
console.log(VARIABLE);
You can see what the value of a variable is with this comment in Javascript. Then, in the webbrowser you need to right-click and select "inspect". Then select the console window. Have you tried refreshing the webbrowser? If you download the final code, does it work then for you?
github.com/mo-thunderz/Esp32WifiPart2
@@mothunderz thanks a lot! Sir, for your kindness, I tried and it does well
thank you，很有收获
You're welcome!
Wich exact webserver library are we using?
Here the link to the library:
www.arduinolibraries.info/libraries/web-sockets
In the Arduino IDE, if you search for "arduino websockets" in the library manager you will see one entitled "WebSockets" by Markus Sattler. That is the correct one. I currently have version 2.4.0 installed myself.
@@mothunderz thank you
I figured it out!!
Great to hear you got it working!
thanks for video
You are welcome :-)
thanx that was good
Glad you enjoyed it!
good stuff
Thank you for your feedback!
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 (ua-cam.com/video/PGt_5xQo2_0/v-deo.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.
Thank you for your feedback. As for your question: I have not looked into that yet, so unfortunately cannot comment to that. At the moment I am quite overloaded with work, so dont get to make videos :-/