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

[@rajaramanv]

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

[@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]

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

[@AnthonyHortin]

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

[@Chiavaloni]

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

[@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]

Glad it helped! Thank you for your feedback

[@MrLRankin2]

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

[@UpdateLogic]

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

[@mothunderz]

Glad it was helpful!

[@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]

Glad it helped! Cool application :-)

[@NaveedY]

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

[@MeisterQ]

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

[@lundebc]

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

[@mothunderz]

Awesome, thank you!

[@dlveach]

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

[@mothunderz]

Glad it was helpful!

[@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]

Glad it helped!

[@jacksparrow2000]

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

[@mothunderz]

Glad it was helpful!

[@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]

Great to hear!

[@ckvopa]

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

[@piotrn9321]

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]

Thank you for your feedback!

[@jumbo999614]

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

[@cours.computerscience]

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

[@mothunderz]

Thank you very much for your feedback!

[@rodneysmith1750]

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]

Glad it was helpful!

[@ivyyang2171]

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

[@mothunderz]

I had to use google translate to understand, but thank you very much for the constructive feedback 😀

[@oldsilenthill1]

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

[@mothunderz]

Great to hear that, thank you for your feedback!

[@shichi6309]

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

[@mothunderz]

You're very welcome!

[@automation_jeff]

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

[@mikedunning265]

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

[@mothunderz]

Glad it was helpful!

[@crazyg74]

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

[@mothunderz]

You're welcome!

[@theintegratorZ]

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

[@mothunderz]

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

[@Zhilinjain]

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

[@mothunderz]

Glad I could help! Thank you for your feedback

[@loubarchey2823]

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

[@mothunderz]

Thank you very much for your feedback!

[@tednelson5277]

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

[@mothunderz]

Glad it was helpful!

[@marcosgiovanni9682]

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

[@mothunderz]

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.

[@ragohy]

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

[@mothunderz]

You are welcome, thank you for your feedback!

[@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]

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

[@vladimirastrelin1719]

Thanks a lot for your great tutorial. Very inspiring!

[@mothunderz]

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

[@vladimirastrelin1719]

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

[@mothunderz]

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

[@dcollop3543]

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

[@mothunderz]

Thank you very much for your feedback :-)

[@guillermozino9249]

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

[@mothunderz]

Glad you liked it!

[@Rob-id3zf]

Great video. Thanks!

[@Tony770jr]

Very comprehensive. Thanks!

[@mothunderz]

Glad it was helpful!

[@provorota1782]

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

[@mothunderz]

Glad I could help!

[@LucianoVeneziano]

Fantastico job!

[@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]

Thank you for the feedback. I will check the latest websockets library and look into this.

[@Toni0704]

Thx a lot, your video tutorials are really great.

[@mothunderz]

Glad you like them! Thank you for your feedback

[@tanishbahir7055]

This is a life saver

[@mothunderz]

You are welcome, thank you for your comment!

[@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]

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.

[@yahyamohammed6729]

well done, very neatly explained! :D

[@mothunderz]

You're welcome!

[@dukathneu]

Thanks. That helped a lot.

[@mothunderz]

You are welcome!

[@AhmedIbrahim-vj4op]

Wonderful, Thank You! Mo.

[@mothunderz]

Thanks for listening

[@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]

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.

[@AtulAlexCherian]

Amazing series! Thanks alot

[@mothunderz]

Glad you enjoy it!

[@athuldas44]

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

[@mothunderz]

Please see the comments section of the video, the code is available here:
github.com/mo-thunderz/Esp32WifiPart2

[@jeremiahbullfrog9288]

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

[@SathishKumarbalu]

Really amazing tutorial

[@mothunderz]

Thank you very much!

[@micronaushnik5Micro]

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

[@waaizk9138]

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?

[@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]

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]

Please check out part 4 of my Webserver series in which I show how to realize a webserver with the ESP32 internal flash memory

[@mohammadbidokh1014]

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

[@mothunderz]

Excellent suggestion, thank you very much!

[@mzba94]

what a legend
thank you

[@mothunderz]

Thank you very much for your feedback!

[@brightmoonworld]

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

[@ckvopa]

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

[@drjml351]

I figured it out!!

[@mothunderz]

Great to hear you got it working!

[@provorota1782]

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]

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]

@@mothunderz Yes, exactly, to be able to send different data to the esp.

[@DevasKarpDevas5000]

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]

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.

[@hainguyen-eq5kc]

thank you ! it is so helpfull

[@mothunderz]

You're welcome!

[@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]

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

[@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]

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]

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.

[@felipediasbragabarroso7005]

obrigado ! , pelo conhecimento valioso :)

[@mothunderz]

You are very welcome :-)

[@grahamheath3799]

good stuff

[@mothunderz]

Thank you for your feedback!

[@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]

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]

@@mothunderz thank you very much

[@mohammadbidokh1014]

thanks for video

[@mothunderz]

You are welcome :-)

[@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]

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!

[@openit6987]

Thanks you so much Pro :)

[@mothunderz]

Glad it helped and thank you for the feedback

[@KhonThai100]

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

[@mothunderz]

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

[@junkerjoerg1252]

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]

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]

Yes, this should work as well. Alternatively see:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html

[@wikovisser3664]

*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]

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

[@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]

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]

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

[@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]

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!

[@user-wq2tc7hq3j]

thank you，很有收获

[@mothunderz]

You're welcome!

[@frankmekker9969]

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]

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

[@frankmekker9969]

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.

[@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]

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]

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

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

[@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]

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

[@kenblanch4178]

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]

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!

[@veram.2460]

thanx that was good

[@mothunderz]

Glad you enjoyed it!

[@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]

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!

[@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]

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]

@@mothunderz thanks a lot! Sir, for your kindness, I tried and it does well

[@magiczz420]

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]

I managed to fix it somehow by using the provided files and modyfiyng them, great video!

[@mothunderz]

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

[@shahbaztech7064]

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]

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

[@colinclews6473]

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

[@mothunderz]

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!

[@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]

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!

[@informatica807]

@@mothunderz in part three you did in local network i want that in web is this possible

[@kartikp4396]

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

[@zakidzz]

thaaaank uoiuuuuuuuuuuuu

[@mothunderz]

You're welcome!

[@dieunguyenvan7911]

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]

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

[@barrymartin6481]

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

[@mothunderz]

I have not had the time to look into this yet, but will check it out.

[@lphs455]

Wich exact webserver library are we using?

[@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]

@@mothunderz thank you

[@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]

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]

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

[@dirkvandenberge5352]

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

[@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]

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]

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.

[@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]

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]

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]

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]

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:
ua-cam.com/video/VaNVrE7-AO8/v-deo.html
Hope you manage to find a solution to the problem!

[@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]

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

[@mothunderz]

Glad it was helpful!