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

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...

Пікірлер: 204

  • @rajaramanv
    @rajaramanv2 күн бұрын

    All the information you need to get started with web sockets - neatly shrink wrapped into a 35 minute video. Excellent!

  • @MrLRankin2
    @MrLRankin210 күн бұрын

    You are one heck of a teacher. I commend you Sir.

  • @NaveedY
    @NaveedY26 күн бұрын

    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!!)

  • @Chiavaloni
    @Chiavaloni2 ай бұрын

    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!!!

  • @MeisterQ
    @MeisterQ3 ай бұрын

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

  • @rodneysmith1750
    @rodneysmith17502 жыл бұрын

    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!

  • @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: kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.html

  • @AnthonyHortin

    @AnthonyHortin

    Жыл бұрын

    @@mothunderz I’ll make sure to check that one out as well. Thanks.

  • @jacksparrow2000
    @jacksparrow20006 ай бұрын

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

  • @mothunderz

    @mothunderz

    6 ай бұрын

    Glad it was helpful!

  • @ivyyang2171
    @ivyyang21712 жыл бұрын

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

  • @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!

  • @lundebc
    @lundebc Жыл бұрын

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

  • @mothunderz

    @mothunderz

    Жыл бұрын

    Awesome, thank you!

  • @piotrn9321
    @piotrn93218 ай бұрын

    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

    6 ай бұрын

    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

  • @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!

  • @mikedunning265
    @mikedunning2652 жыл бұрын

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

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    Glad it was helpful!

  • @oldsilenthill1
    @oldsilenthill1 Жыл бұрын

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

  • @mothunderz

    @mothunderz

    Жыл бұрын

    Great to hear that, thank you for your feedback!

  • @dlveach
    @dlveach11 ай бұрын

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

  • @mothunderz

    @mothunderz

    11 ай бұрын

    Glad it was helpful!

  • @jumbo999614
    @jumbo999614Ай бұрын

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

  • @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!

  • @ckvopa

    @ckvopa

    28 күн бұрын

    @@mothunderz Уважаемый друг! Могу я попросить тебя объяснить мне еще белее простую вещь - как работать с чистым HTML и обработкой на сервере POST и GET запросов? На примере хотя бы одной кнопки и полей 'include'. А то я не могу понять как мне введенное пользователем время отправить и считать на сервере и сравнить с реальным... ПОЖАЛУЙСТА. Спасибо!

  • @automation_jeff
    @automation_jeff4 ай бұрын

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

  • @iagmr
    @iagmr Жыл бұрын

    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

    Жыл бұрын

    Glad it helped! Cool application :-)

  • @shichi6309
    @shichi63095 ай бұрын

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

  • @mothunderz

    @mothunderz

    3 ай бұрын

    You're very welcome!

  • @tednelson5277
    @tednelson5277 Жыл бұрын

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

  • @mothunderz

    @mothunderz

    Жыл бұрын

    Glad it was helpful!

  • @Zhilinjain
    @Zhilinjain9 ай бұрын

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

  • @mothunderz

    @mothunderz

    9 ай бұрын

    Glad I could help! Thank you for your feedback

  • @cours.computerscience
    @cours.computerscience8 ай бұрын

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

  • @mothunderz

    @mothunderz

    6 ай бұрын

    Thank you very much for your feedback!

  • @theintegratorZ
    @theintegratorZ8 ай бұрын

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

  • @mothunderz

    @mothunderz

    6 ай бұрын

    Thank you very much! Great to hear the video was helpful

  • @ragohy
    @ragohy Жыл бұрын

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

  • @mothunderz

    @mothunderz

    Жыл бұрын

    You are welcome, thank you for your feedback!

  • @crazyg74
    @crazyg745 ай бұрын

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

  • @mothunderz

    @mothunderz

    3 ай бұрын

    You're welcome!

  • @loubarchey2823
    @loubarchey28238 ай бұрын

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

  • @mothunderz

    @mothunderz

    6 ай бұрын

    Thank you very much for your feedback!

  • @provorota1782
    @provorota17822 жыл бұрын

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

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    Glad I could help!

  • @Toni0704
    @Toni07042 жыл бұрын

    Thx a lot, your video tutorials are really great.

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    Glad you like them! Thank you for your feedback

  • @yahyamohammed6729
    @yahyamohammed67292 жыл бұрын

    well done, very neatly explained! :D

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    You're welcome!

  • @Tony770jr
    @Tony770jr Жыл бұрын

    Very comprehensive. Thanks!

  • @mothunderz

    @mothunderz

    Жыл бұрын

    Glad it was helpful!

  • @guillermozino9249
    @guillermozino9249 Жыл бұрын

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

  • @mothunderz

    @mothunderz

    Жыл бұрын

    Glad you liked it!

  • @marcosgiovanni9682
    @marcosgiovanni96822 жыл бұрын

    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.

  • @Rob-id3zf
    @Rob-id3zf22 күн бұрын

    Great video. Thanks!

  • @vladimirastrelin1719
    @vladimirastrelin17196 ай бұрын

    Thanks a lot for your great tutorial. Very inspiring!

  • @mothunderz

    @mothunderz

    3 ай бұрын

    I am not sure what you mean exactly, can you be more specific?

  • @vladimirastrelin1719

    @vladimirastrelin1719

    3 ай бұрын

    @@mothunderz I meant your tutorials are great. They inspired me to do my own projects. I appreciate your lessons!

  • @mothunderz

    @mothunderz

    3 ай бұрын

    Sorry, I meant to answer that to a different comment from a different user :-) Thank you for your feedback to my channel!!!

  • @AtulAlexCherian
    @AtulAlexCherian2 жыл бұрын

    Amazing series! Thanks alot

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    Glad you enjoy it!

  • @AhmedIbrahim-vj4op
    @AhmedIbrahim-vj4op2 жыл бұрын

    Wonderful, Thank You! Mo.

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    Thanks for listening

  • @SathishKumarbalu
    @SathishKumarbalu2 жыл бұрын

    Really amazing tutorial

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    Thank you very much!

  • @LucianoVeneziano
    @LucianoVeneziano4 күн бұрын

    Fantastico job!

  • @dukathneu
    @dukathneu Жыл бұрын

    Thanks. That helped a lot.

  • @mothunderz

    @mothunderz

    Жыл бұрын

    You are welcome!

  • @tanishbahir7055
    @tanishbahir705511 ай бұрын

    This is a life saver

  • @mothunderz

    @mothunderz

    10 ай бұрын

    You are welcome, thank you for your comment!

  • @dcollop3543
    @dcollop35432 жыл бұрын

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

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    Thank you very much for your feedback :-)

  • @noweare1
    @noweare1 Жыл бұрын

    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

    11 ай бұрын

    I have not worked with the ESP-camera, but let me know if it worked out for you!

  • @mzba94
    @mzba942 жыл бұрын

    what a legend thank you

  • @mothunderz

    @mothunderz

    Жыл бұрын

    Thank you very much for your feedback!

  • @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.

  • @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.

  • @openit6987
    @openit69872 жыл бұрын

    Thanks you so much Pro :)

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    Glad it helped and thank you for the feedback

  • @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.

  • @user-wq2tc7hq3j
    @user-wq2tc7hq3j2 жыл бұрын

    thank you,很有收获

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    You're welcome!

  • @DemiHD1
    @DemiHD12 жыл бұрын

    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

    2 жыл бұрын

    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

  • @drjml351
    @drjml351 Жыл бұрын

    I figured it out!!

  • @mothunderz

    @mothunderz

    Жыл бұрын

    Great to hear you got it working!

  • @micronaushnik5Micro
    @micronaushnik5Micro28 күн бұрын

    Супер все работает

  • @felipediasbragabarroso7005
    @felipediasbragabarroso70058 ай бұрын

    obrigado ! , pelo conhecimento valioso :)

  • @mothunderz

    @mothunderz

    3 ай бұрын

    You are very welcome :-)

  • @mohammadbidokh1014
    @mohammadbidokh1014 Жыл бұрын

    thanks for video

  • @mothunderz

    @mothunderz

    Жыл бұрын

    You are welcome :-)

  • @grahamheath3799
    @grahamheath3799 Жыл бұрын

    good stuff

  • @mothunderz

    @mothunderz

    11 ай бұрын

    Thank you for your feedback!

  • @veram.2460
    @veram.24602 жыл бұрын

    thanx that was good

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    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: kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.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.

  • @zakidzz
    @zakidzz2 жыл бұрын

    thaaaank uoiuuuuuuuuuuuu

  • @mothunderz

    @mothunderz

    2 жыл бұрын

    You're 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.

  • @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

  • @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

  • @jeremiahbullfrog9288
    @jeremiahbullfrog92882 ай бұрын

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

  • @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

  • @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!

  • @DevasKarpDevas5000
    @DevasKarpDevas50008 ай бұрын

    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

    6 ай бұрын

    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.

  • @provorota1782
    @provorota17822 жыл бұрын

    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.

  • @waaizk9138
    @waaizk91383 ай бұрын

    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?

  • @kenblanch4178
    @kenblanch41782 жыл бұрын

    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!

  • @junkerjoerg1252
    @junkerjoerg12529 ай бұрын

    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

    8 ай бұрын

    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

    3 ай бұрын

    Yes, this should work as well. Alternatively see: kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.html

  • @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: kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.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
    @frankmekker99699 ай бұрын

    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

    9 ай бұрын

    I dont have that particular board, so cannot test it out, but please check this code -> it uses a different library: kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.html

  • @frankmekker9969

    @frankmekker9969

    8 ай бұрын

    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.

  • @mohammadbidokh1014
    @mohammadbidokh1014 Жыл бұрын

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

  • @mothunderz

    @mothunderz

    Жыл бұрын

    Excellent suggestion, thank you very much!

  • @dzelctronics-dz8087
    @dzelctronics-dz80876 ай бұрын

    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

  • @rajlodh861

    @rajlodh861

    2 ай бұрын

    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.

  • @brightmoonworld
    @brightmoonworld10 күн бұрын

    I have some questions and solutions pls tell ms how can i ask

  • @KhonThai100
    @KhonThai10011 ай бұрын

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

  • @mothunderz

    @mothunderz

    11 ай бұрын

    Thank you for your feedback. Unfortunately I am very busy with work and have no time to assist you with an exam test.

  • @shahbaztech7064
    @shahbaztech70642 жыл бұрын

    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...

  • @wikovisser3664
    @wikovisser36649 ай бұрын

    *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

    9 ай бұрын

    I am not 100% sure what you are looking for, but would this implementation help you? kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.html

  • @wchen2340
    @wchen23402 жыл бұрын

    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

    2 жыл бұрын

    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

    2 жыл бұрын

    Wow, you managed to solve that one quickly! Great you found a good solution :-)

  • @barrymartin6481
    @barrymartin64812 жыл бұрын

    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.

  • @magiczz420
    @magiczz4202 жыл бұрын

    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: kzread.info/dash/bejne/jH6iuq19YK_XdNI.html

  • @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: kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.html for more information, see as well: kzread.info/dash/bejne/gnuowZexgdKYj5M.html Please let me know if it worked out for you. Good luck with your project!

  • @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!

  • @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: kzread.info/dash/bejne/jH6iuq19YK_XdNI.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

    Жыл бұрын

    @@informatica807 hi, this is exactly what im looking for too! did u find a solution? please share if u have

  • @dieunguyenvan7911
    @dieunguyenvan79112 жыл бұрын

    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 Жыл бұрын

    Wich exact webserver library are we using?

  • @mothunderz

    @mothunderz

    Жыл бұрын

    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

    Жыл бұрын

    @@mothunderz thank you

  • @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: kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.html Cheers, Sander

  • @ckvopa
    @ckvopa28 күн бұрын

    @mothunderz Уважаемый друг! Спасибо большое за подробные и пошаговые объяснения! Могу я попросить тебя объяснить мне еще белее простую вещь - как работать с чистым HTML (то есть без JavaScript) и обработкой на сервере POST и GET запросов? На примере хотя бы одной кнопки и полей 'include'. А то я не могу понять как мне введенное пользователем время отправить и считать на сервере и сравнить с реальным... ПОЖАЛУЙСТА. Спасибо!

  • @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
    @dirkvandenberge53522 жыл бұрын

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

  • @dirkvandenberge5352

    @dirkvandenberge5352

    2 жыл бұрын

    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

    2 жыл бұрын

    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-ki8te4iw8s5 ай бұрын

    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 (kzread.info/dash/bejne/gnuowZexgdKYj5M.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

    3 ай бұрын

    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: kzread.info/dash/bejne/iJWCuNR-Z5Cnf5s.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
    @joachimrapp99956 ай бұрын

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

  • @mothunderz

    @mothunderz

    3 ай бұрын

    Glad it was helpful!

Келесі