ESP32 WebSocket Server

The ESP32 controller is programmed as a webSocket server to establish real-time communication with a client browser.

Link to code:

Link to Ulas Dikme YouTube channel:

Link to libraries:

Contents:
0:00 Introduction
0:35 HTTP & AJAX Client-Server Models
1:38 WebSockets Specs
2:09 ESP32 WebSocket Client/Server Model
3:00 Block Diagram of Implemented System
3:24 Demonstration
3:45 C++ Sketch
7:22 HTML, CSS & JavaScript Codes
8:37 C++ Sketch (continued)
9:33 JavaScript Code (continued)
10:08 Conclusion

[SerialWombat]

Thanks so much for this sequence of videos. I started out looking for Ajax, but then came on your series and started watching them and ended up doing a websockets implementation on ESP8266 instead. You do a great job of stripping the lesson down to fundamentals for the technology under discussion. Your quick demo of debugging html and javascript together in VSCode was worth the watching all by itself.

[larsniklassonhede]

aha websocket is a protocol! The most explanatory thing I've seen in a long time.

[SamuelYount-nl]

I've got to say this might be the single most helpful video I've seen on this. Thank you for your help, sir!

[wmoeller]

Thank you for sharing your technical videos! I have just started with the ESP32 device and need a far amount of guidance on using a web interface. The style of cleanly documenting your code and the well presented videos are superb! I look forward to the learning!

[reginaputz]

Very well explained! Thank you very much!

[JJNaranjo]

Muchas gracias por este video. Hice el ejercicio completo, con los archivos existentes en los enlaces y todo me funcionó a la perfección. Thanks a lot.

[aliens]

It was a really nice video! Hope to see more from you! Thanks! :)

[bassjunias]

Thank you for this tutorial.
I have a question what's your opinion is the best way to take information from server, it to use Ajax or WebSocket librairy?

[thomasengelhardt]

Very helpful video, thank you very much. Also very well presented.
When I tried to compile, I got an error message that within WebSocketsClient.cpp:234:30, the class WiFiClientSecure has no member named 'setInsecure'. It turned out that the WebSockets 2.3.5 library required a newer esp32 core than I was using. It was compiling fine with esp32 core 1.0.6 (I used 1.0.4 before).

[TheTomcys]

Hello, Can you provide an example of how to make that when one client clicks a button to turn on the LED status is sent to all connected clients

[tutorialoke]

tools used only, esp32 and led?
do you have a picture schematic diagram? this project

[tutorialoke]

Do you have a schematic drawing of the device installation diagram?, Thank you in advance

[pauloisrael]

Many thanks, it is very useful for me.

[joeyeargain]

This works great, can you show us how to edit this to use a static wi-fi IP?

[mohammedtaiyab]

Great explination. can we use this same for Acess point function

[mihkuno]

I've been looking for a way to work with both websocket and the webserver... turns out I juz need to switch the ports :'

[nomanashfaq]

sr i have to read readings from mpu9250 what alternations i have to made ?

[josecrisostomofuentes]

Hello, really great video.
I implemented your code and got a working a real time graph on my webpage. When I tried to expose my local network using Ngrok I found that I could only expose the webpage (on port 80), but the data to be plotted was not being received due to the fact that the whole websocket server is set on port 81. Is there a way get my webpage and the websocket protocol joined into a single port (80)? Or a way to expose both ports 80 & 81 to be able to receive the incoming data?
Thanks a lot, your videos have taught me a lot.

[jaffarsadiqali]

Awesome explanation line by line make any beginner enthusiastic to subscribe to learn more

[vitalyvistovsky]

How to connect from command line using websocat?