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

  Переглядів 72,991

MoThunderz

MoThunderz

2 роки тому

Part 2 focuses on how to use the ESP32 to setup a webserver, configure websockets and use JSON for data exchange between the client and ESP32 server. Programming is done through the Arduino IDE.
For the code refer to:
github.com/mo-thunderz/Esp32W...
For part 1 of this series, refer to:
• ESP32: WIFI Basics and...
Might you have problems programming the ESP32, pls refer to:
• Programming ESP32: how...
In part 3 I will extend on the webserver and show how to control LEDs through a webserver:
• ESP32: Control LEDs th...

КОМЕНТАРІ: 190
@rodneysmith1750
@rodneysmith1750 2 роки тому
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!
@mothunderz
@mothunderz 2 роки тому
Glad it was helpful!
@UpdateLogic
@UpdateLogic Рік тому
Great video, that was one of the most efficient Arduino videos I've seen in a long time... Thanks!
@mothunderz
@mothunderz Рік тому
Glad it was helpful!
@jacksparrow2000
@jacksparrow2000 4 місяці тому
This is one of the most informative and useful lessons on creating servers and using websockets. Keep up the good work!
@mothunderz
@mothunderz 3 місяці тому
Glad it was helpful!
@lundebc
@lundebc Рік тому
Excellent video and explanation, I have been searching for someone that explained all these parts!
@mothunderz
@mothunderz Рік тому
Awesome, thank you!
@MeisterQ
@MeisterQ 29 днів тому
Thank you. After watching alot of videos about websockets, i finally understood it here...
@thomasengelhardt7940
@thomasengelhardt7940 Рік тому
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
@mothunderz Рік тому
Great to hear!
@ivyyang2171
@ivyyang2171 2 роки тому
非常好的教学!循序渐近的推进方式,逐句解释的讲解内容 ,逻辑清晰,言简意赅!让初学者在这一篇视频里就能全面了解所学。 全五星好评!
@mothunderz
@mothunderz 2 роки тому
I had to use google translate to understand, but thank you very much for the constructive feedback 😀
@lindave03
@lindave03 Рік тому
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.
@mothunderz
@mothunderz Рік тому
Glad it helped!
@mikedunning265
@mikedunning265 2 роки тому
Excellent example, very practical and exactly what I was looking for
@mothunderz
@mothunderz 2 роки тому
Glad it was helpful!
@AnthonyHortin
@AnthonyHortin Рік тому
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. 🙏
@mothunderz
@mothunderz Рік тому
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: ukposts.info/have/v-deo/jpF_iqh8bmNysGw.html
@AnthonyHortin
@AnthonyHortin Рік тому
@@mothunderz I’ll make sure to check that one out as well. Thanks.
@piotrn9321
@piotrn9321 5 місяців тому
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. 👍👍👍
@mothunderz
@mothunderz 3 місяці тому
Thank you for your feedback!
@oldsilenthill1
@oldsilenthill1 10 місяців тому
Amazing tutorial man, all examples in the net are confusing, but this is the one that got it for me !!
@mothunderz
@mothunderz 10 місяців тому
Great to hear that, thank you for your feedback!
@MSBWilson
@MSBWilson Рік тому
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.
@mothunderz
@mothunderz Рік тому
Glad it helped! Thank you for your feedback
@automation_jeff
@automation_jeff 2 місяці тому
Another informative video, very nice job. Thank you for making these videos available.
@tednelson5277
@tednelson5277 Рік тому
This is excellent. This helped answer a lot of questions I had. Thank you!
@mothunderz
@mothunderz Рік тому
Glad it was helpful!
@dlveach
@dlveach 8 місяців тому
Very good tutorial, using the start with basics and then add in more detail approach. Easy to follow. I like it.
@mothunderz
@mothunderz 8 місяців тому
Glad it was helpful!
@shichi6309
@shichi6309 2 місяці тому
I learned a lot from this, Sir. You're a true lifesaver! Thank you so so much!
@mothunderz
@mothunderz Місяць тому
You're very welcome!
@crazyg74
@crazyg74 2 місяці тому
this is perfect! Exactly what I was looking for. Thank you very much
@mothunderz
@mothunderz Місяць тому
You're welcome!
@devomor8731
@devomor8731 5 місяців тому
You are the Best! ❤ I got everything I need from a single video
@mothunderz
@mothunderz 3 місяці тому
Thank you very much! Great to hear the video was helpful
@iagmr
@iagmr 10 місяців тому
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.
@mothunderz
@mothunderz 10 місяців тому
Glad it helped! Cool application :-)
@Zhilinjain
@Zhilinjain 6 місяців тому
Thanks … you saved me hours of study and coding !!!!
@mothunderz
@mothunderz 6 місяців тому
Glad I could help! Thank you for your feedback
@tanishbahir7055
@tanishbahir7055 8 місяців тому
This is a life saver
@mothunderz
@mothunderz 8 місяців тому
You are welcome, thank you for your comment!
@ragohy
@ragohy Рік тому
Thank you very much for this straight forward explanation! 😀👍
@mothunderz
@mothunderz Рік тому
You are welcome, thank you for your feedback!
@loubarchey2823
@loubarchey2823 5 місяців тому
You are a superman of code! Thanks so much I actually understood premise although your skills are superpower. Lou
@mothunderz
@mothunderz 3 місяці тому
Thank you very much for your feedback!
@provorota1782
@provorota1782 2 роки тому
💯This is what I was looking for! Thank you friend!
@mothunderz
@mothunderz 2 роки тому
Glad I could help!
@yahyamohammed6729
@yahyamohammed6729 2 роки тому
well done, very neatly explained! :D
@mothunderz
@mothunderz 2 роки тому
You're welcome!
@cours.computerscience
@cours.computerscience 5 місяців тому
Excellent example, It really helps, i appreciate, Thanks, please continue....
@mothunderz
@mothunderz 3 місяці тому
Thank you very much for your feedback!
@Toni0704
@Toni0704 Рік тому
Thx a lot, your video tutorials are really great.
@mothunderz
@mothunderz Рік тому
Glad you like them! Thank you for your feedback
@Tony770jr
@Tony770jr Рік тому
Very comprehensive. Thanks!
@mothunderz
@mothunderz Рік тому
Glad it was helpful!
@vladimirastrelin1719
@vladimirastrelin1719 3 місяці тому
Thanks a lot for your great tutorial. Very inspiring!
@mothunderz
@mothunderz Місяць тому
I am not sure what you mean exactly, can you be more specific?
@vladimirastrelin1719
@vladimirastrelin1719 Місяць тому
@@mothunderz I meant your tutorials are great. They inspired me to do my own projects. I appreciate your lessons!
@mothunderz
@mothunderz Місяць тому
Sorry, I meant to answer that to a different comment from a different user :-) Thank you for your feedback to my channel!!!
@AhmedIbrahim-vj4op
@AhmedIbrahim-vj4op 2 роки тому
Wonderful, Thank You! Mo.
@mothunderz
@mothunderz 2 роки тому
Thanks for listening
@atulalex915
@atulalex915 Рік тому
Amazing series! Thanks alot
@mothunderz
@mothunderz Рік тому
Glad you enjoy it!
@guillermozino9249
@guillermozino9249 9 місяців тому
Great video, you are very clear. Thanks a loit!
@mothunderz
@mothunderz 9 місяців тому
Glad you liked it!
@SathishKumarbalu
@SathishKumarbalu Рік тому
Really amazing tutorial
@mothunderz
@mothunderz Рік тому
Thank you very much!
@marcosgiovanni9682
@marcosgiovanni9682 2 роки тому
Very good, congratulations make more videos using websocket with ESP32, make a complete automation with sensors, load triggering, buttons, electrical locks, temperature.
@mothunderz
@mothunderz 2 роки тому
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.
@dukathneu
@dukathneu 11 місяців тому
Thanks. That helped a lot.
@mothunderz
@mothunderz 11 місяців тому
You are welcome!
@mzba94
@mzba94 Рік тому
what a legend thank you
@mothunderz
@mothunderz Рік тому
Thank you very much for your feedback!
@noweare1
@noweare1 10 місяців тому
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.
@mothunderz
@mothunderz 8 місяців тому
I have not worked with the ESP-camera, but let me know if it worked out for you!
@epiendless1128
@epiendless1128 Рік тому
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.
@mothunderz
@mothunderz Рік тому
Thank you for the feedback. I will check the latest websockets library and look into this.
@hainguyen-eq5kc
@hainguyen-eq5kc Рік тому
thank you ! it is so helpfull
@mothunderz
@mothunderz Рік тому
You're welcome!
@noweare1
@noweare1 Рік тому
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)?
@mothunderz
@mothunderz Рік тому
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.
@openit6987
@openit6987 2 роки тому
Thanks you so much Pro :)
@mothunderz
@mothunderz 2 роки тому
Glad it helped and thank you for the feedback
@DemiHD1
@DemiHD1 Рік тому
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?
@mothunderz
@mothunderz Рік тому
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.
@mothunderz
@mothunderz Рік тому
Please check out part 4 of my Webserver series in which I show how to realize a webserver with the ESP32 internal flash memory
@ritadeshpande2761
@ritadeshpande2761 Рік тому
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.
@mothunderz
@mothunderz Рік тому
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.
@drjml351
@drjml351 Рік тому
I figured it out!!
@mothunderz
@mothunderz Рік тому
Great to hear you got it working!
@user-wq2tc7hq3j
@user-wq2tc7hq3j 2 роки тому
thank you,很有收获
@mothunderz
@mothunderz 2 роки тому
You're welcome!
@dcollop3543
@dcollop3543 2 роки тому
How is this content free? thanks, you are saving lives
@mothunderz
@mothunderz 2 роки тому
Thank you very much for your feedback :-)
@felipediasbragabarroso7005
@felipediasbragabarroso7005 5 місяців тому
obrigado ! , pelo conhecimento valioso :)
@mothunderz
@mothunderz Місяць тому
You are very welcome :-)
@grahamheath3799
@grahamheath3799 10 місяців тому
good stuff
@mothunderz
@mothunderz 8 місяців тому
Thank you for your feedback!
@mohammadbidokh1014
@mohammadbidokh1014 11 місяців тому
thanks for video
@mothunderz
@mothunderz 11 місяців тому
You are welcome :-)
@tzampini
@tzampini Рік тому
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.
@mothunderz
@mothunderz Рік тому
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?
@tzampini
@tzampini Рік тому
@@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.
@veram.2460
@veram.2460 Рік тому
thanx that was good
@mothunderz
@mothunderz Рік тому
Glad you enjoyed it!
@drakkorvladimir4012
@drakkorvladimir4012 Рік тому
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 : )
@mothunderz
@mothunderz Рік тому
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: ukposts.info/have/v-deo/jpF_iqh8bmNysGw.html
@drakkorvladimir4012
@drakkorvladimir4012 Рік тому
@@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.
@dzelctronics-dz8087
@dzelctronics-dz8087 3 місяці тому
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
@nabeljoseph9616
@nabeljoseph9616 Рік тому
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 .
@mothunderz
@mothunderz Рік тому
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!
@nabeljoseph9616
@nabeljoseph9616 Рік тому
@@mothunderz thank you very much
@severinelmecker
@severinelmecker Рік тому
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!
@mothunderz
@mothunderz Рік тому
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
@severinelmecker
@severinelmecker Рік тому
@@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?
@severinelmecker
@severinelmecker Рік тому
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
@DevasKarpDevas5000
@DevasKarpDevas5000 5 місяців тому
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.
@mothunderz
@mothunderz 3 місяці тому
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.
@zakidzz
@zakidzz 2 роки тому
thaaaank uoiuuuuuuuuuuuu
@mothunderz
@mothunderz 2 роки тому
You're welcome!
@athuldas44
@athuldas44 Рік тому
Where can I find the documentation or are there example sketches available By the way great explanation 😍😍
@mothunderz
@mothunderz Рік тому
Please see the comments section of the video, the code is available here: github.com/mo-thunderz/Esp32WifiPart2
@severinelmecker
@severinelmecker Рік тому
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)?
@mothunderz
@mothunderz Рік тому
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: ukposts.info/have/v-deo/jpF_iqh8bmNysGw.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!
@frankmekker9969
@frankmekker9969 6 місяців тому
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
@mothunderz
@mothunderz 6 місяців тому
I dont have that particular board, so cannot test it out, but please check this code -> it uses a different library: ukposts.info/have/v-deo/jpF_iqh8bmNysGw.html
@frankmekker9969
@frankmekker9969 5 місяців тому
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.
@provorota1782
@provorota1782 2 роки тому
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)
@mothunderz
@mothunderz 2 роки тому
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?
@provorota1782
@provorota1782 2 роки тому
@@mothunderz Yes, exactly, to be able to send different data to the esp.
@kenblanch4178
@kenblanch4178 2 роки тому
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.
@mothunderz
@mothunderz 2 роки тому
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!
@wikovisser3664
@wikovisser3664 7 місяців тому
*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...
@mothunderz
@mothunderz 6 місяців тому
I am not 100% sure what you are looking for, but would this implementation help you? ukposts.info/have/v-deo/jpF_iqh8bmNysGw.html
@waaizk9138
@waaizk9138 29 днів тому
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?
@junkerjoerg1252
@junkerjoerg1252 6 місяців тому
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.
@Zhilinjain
@Zhilinjain 6 місяців тому
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.
@mothunderz
@mothunderz Місяць тому
Yes, this should work as well. Alternatively see: ukposts.info/have/v-deo/jpF_iqh8bmNysGw.html
@kritagyapaudel51
@kritagyapaudel51 Рік тому
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.
@mothunderz
@mothunderz Рік тому
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!
@mohammadbidokh1014
@mohammadbidokh1014 11 місяців тому
7:20 hi my friend you can use this code: String webpage = R "( // your html code )"
@mothunderz
@mothunderz 11 місяців тому
Excellent suggestion, thank you very much!
@magiczz420
@magiczz420 2 роки тому
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]".
@magiczz420
@magiczz420 2 роки тому
I managed to fix it somehow by using the provided files and modyfiyng them, great video!
@mothunderz
@mothunderz 2 роки тому
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: ukposts.info/have/v-deo/knqfjIF7Z4KipaM.html
@KhonThai100
@KhonThai100 8 місяців тому
ขอบคุณมากครับ จากประเทศไทย ดีมากครับได้ความรู้มากครับ อยากได้ ออกแบบการ EXAM testing Online ? Knowledge test ,Exams can be Random ..The form has a library of 50 selected Questions. Please help Me .
@mothunderz
@mothunderz 8 місяців тому
Thank you for your feedback. Unfortunately I am very busy with work and have no time to assist you with an exam test.
@wchen2340
@wchen2340 Рік тому
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.
@wchen2340
@wchen2340 Рік тому
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.
@mothunderz
@mothunderz Рік тому
Wow, you managed to solve that one quickly! Great you found a good solution :-)
@shahbaztech7064
@shahbaztech7064 2 роки тому
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
@mothunderz
@mothunderz 2 роки тому
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...
@informatica807
@informatica807 Рік тому
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
@mothunderz
@mothunderz Рік тому
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: ukposts.info/have/v-deo/knqfjIF7Z4KipaM.html At this point in time I only have the videos available on this youtube channel. Good luck with your project!
@informatica807
@informatica807 Рік тому
@@mothunderz in part three you did in local network i want that in web is this possible
@kartikp4396
@kartikp4396 11 місяців тому
@@informatica807 hi, this is exactly what im looking for too! did u find a solution? please share if u have
@barrymartin6481
@barrymartin6481 2 роки тому
Can/do you have a similar example in esp idf?
@mothunderz
@mothunderz 2 роки тому
I have not had the time to look into this yet, but will check it out.
@harold3642
@harold3642 Рік тому
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
@mothunderz
@mothunderz Рік тому
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!
@dieunguyenvan7911
@dieunguyenvan7911 2 роки тому
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
@mothunderz
@mothunderz 2 роки тому
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
@lphs455
@lphs455 11 місяців тому
Wich exact webserver library are we using?
@mothunderz
@mothunderz 11 місяців тому
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.
@lphs455
@lphs455 11 місяців тому
@@mothunderz thank you
@colinclews6473
@colinclews6473 Рік тому
What would need to change to run this with ESP32 in AP mode?
@mothunderz
@mothunderz Рік тому
It is quite straightforward to change the ESP32 to AP mode. In the beginning of this video I change the mode to AP: ukposts.info/have/v-deo/jpF_iqh8bmNysGw.html for more information, see as well: ukposts.info/have/v-deo/iHelk2uviKVjwGQ.html Please let me know if it worked out for you. Good luck with your project!
@richardcharron8641
@richardcharron8641 Рік тому
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
@mothunderz
@mothunderz Рік тому
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: ukposts.info/have/v-deo/jpF_iqh8bmNysGw.html Cheers, Sander
@TOGAMANYAMA-jt7kr
@TOGAMANYAMA-jt7kr Рік тому
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.
@mothunderz
@mothunderz Рік тому
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
@TOGAMANYAMA-jt7kr
@TOGAMANYAMA-jt7kr Рік тому
@@mothunderz thanks a lot! Sir, for your kindness, I tried and it does well
@dirkvandenberge5352
@dirkvandenberge5352 Рік тому
Keep getting compile time errors: 'ESP32WebserverWebsocket:75:31: error: 'WStype_t' has not been declared'... Is Arduino using a wrong 'Webserver library?
@dirkvandenberge5352
@dirkvandenberge5352 Рік тому
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:
@mothunderz
@mothunderz Рік тому
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
@user-ki8te4iw8s
@user-ki8te4iw8s 2 місяці тому
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 (ukposts.info/have/v-deo/iHelk2uviKVjwGQ.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.
@mothunderz
@mothunderz Місяць тому
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 :-/
@drjml351
@drjml351 Рік тому
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!!
@mothunderz
@mothunderz Рік тому
Are you sure that this error happens when you try the code of this video? I dont use the "AudioTools.h" library in any of my projects. If this is not related to any of the code I posted it is rather tricky to help. In general: libraries must be copied into the /Arduino/libraries folder, so please make sure that the library is present there. Good luck with your project!
@UpdateLogic
@UpdateLogic Рік тому
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?
@mothunderz
@mothunderz Рік тому
To verify the code I have downloaded it once more from Github and it runs on my ESP without a problem. Here some pointers for you to see why you are experiencing these problems: 1) Can you make sure you have downloaded and installed the Websockets library from Markus Sattler? There are quite a few libraries with similar names. The one from Markus is easiest to find with the key words "Arduino Websockets". Please make sure there is not another library installed with the same name. 2) Please make sure you are compiling for the correct board -> ESP32 and select "ESP32 Dev Module" If all of this does not work -> in part 4 I switch to another webserver engine. Please try if this one runs on your system: ukposts.info/have/v-deo/jpF_iqh8bmNysGw.html Hope you manage to find a solution to the problem!
@UpdateLogic
@UpdateLogic Рік тому
@@mothunderz Thank you, you are very helpful. I was trying to build this on a Pico, and quickly found out that is not possible, ESP32 only. Since, I have purchased a ESP32 and it works great! Do you know if there is a similar sockets library for Pico? Thanks again for your response, much appreciated. Also, thanks for the great content, love it!
@joachimrapp9995
@joachimrapp9995 3 місяці тому
great job. It has taken almost one day, but now I understand the dependencies between the different modules. Thank you very much :)
@mothunderz
@mothunderz Місяць тому
Glad it was helpful!
ESP32: WIFI Basics and sync to NTP clock (WiFi Part 1) - Arduino
9:06
Піхотинці - про потребу у людях
00:57
Суспільне Новини
Переглядів 807 тис.
Піхотинець - про рутину на фронті
00:46
Суспільне Новини
Переглядів 474 тис.
ЧТО ДЕЛАТЬ, ЕСЛИ НЕ ХВАТАЕТ ДЕНЕГ НА ВОССТАНОВЛЕНИЕ ТАЧКИ?
47:52
Has Generative AI Already Peaked? - Computerphile
12:48
Computerphile
Переглядів 113 тис.
WebSockets Explained: Real-Time Communication with ESP8266
6:58
Sora has a New Trick! Plus a Dive into the Latest Features & Music Video
9:35
Theoretically Media
Переглядів 26 тис.
ESP32 Access Point and Router connection explained
8:51
MoThunderz
Переглядів 41 тис.
#203 SPIFFS vs LITTLEFS for ESP32✅ & ESP8266✅ (not Arduino UNO❌)
25:29
ESP32 Guide 2024 | Choosing and Using an ESP32 Board
41:06
DroneBot Workshop
Переглядів 204 тис.
i cant stop thinking about this exploit
8:40
Low Level Learning
Переглядів 140 тис.
Піхотинці - про потребу у людях
00:57
Суспільне Новини
Переглядів 807 тис.