Control ESP32 from ANYWHERE in the World - Step-By-Step Tutorial

  Переглядів 62,678

Tomasz Tarnowski

Tomasz Tarnowski

День тому

Learn how to control ESP32 GPIO pins in real-time with AWS API Gateway WebSockets. I will show you step-by-step how to create and build:
- PlatformIO project with ESP32 WebSocket Client (C/C++)
- Serverless Framework project utilizing AWS API Gateway WebSockets, AWS Lambda, and AWS DynamoDB to handle the communication between clients (TypeScript)
- Web Application to control ESP32 from the browser (ReactJS)
👍 Subscribe for more IoT and programming tutorials like this: / @tomasztarnowski4434
Link to the code:
ESP32 Project - github.com/ttarnowski/esp32-w...
WebSocket Server Code - github.com/ttarnowski/esp32-w...
ESP32 Control Panel (React) - github.com/ttarnowski/esp32-c...
Serverless, AWS, TypeScript v2 template project - github.com/ttarnowski/serverl...
React, TypeScript, TailwindCSS, Vite template project - github.com/ttarnowski/vite-re...
How to get started with Serverless Framework:
• Getting started with A...
How to connect ESP32 to WiFi:
• Connect ESP32 to WiFi ...
How to build Web Chat with Serverless Framework and AWS API Gateway Websockets:
• How to Build a Realtim...
ESP32 Datasheet Specification: www.espressif.com/sites/defau...
NodeMCU 32S Development Board Specification:
circuits4you.com/2018/12/31/e...
Parts and components used in this video (affiliate links):
- NodeMCU-32S Development Board:
eBay UK - ebay.us/fpZEVO
eBay USA - ebay.us/7TqjQu
eBay DE - ebay.us/SUf9t1
AliExpress - s.click.aliexpress.com/e/_Dc9...
- USB Type-C to Micro USB cable (tested and working):
eBay UK - ebay.us/7z9AF6
eBay USA - ebay.us/cwrWGo
eBay DE - ebay.us/ixcU7P
AliExpress - s.click.aliexpress.com/e/_Dm6...
- LED Diode:
eBay UK - ebay.us/8y6xEz
eBay USA - ebay.us/38nwTv
eBay DE - ebay.us/UQNXy5
AliExpress - s.click.aliexpress.com/e/_DBE...
- Resistor equal to or greater than 75Ω:
eBay UK - ebay.us/a3nJTv
eBay USA - ebay.us/4fSgND
eBay DE - ebay.us/uael4z
AliExpress - s.click.aliexpress.com/e/_Ddu...
- Breadboard:
eBay UK - ebay.us/Mcsgpn
eBay USA - ebay.us/9Xr8uH
eBay DE - ebay.us/lQJ4XI
AliExpress - s.click.aliexpress.com/e/_Dlf...
- Wires:
eBay UK - ebay.us/jqCLLG
eBay USA - ebay.us/7p2Bjj
eBay DE - ebay.us/7MZ3Dc
AliExpress - s.click.aliexpress.com/e/_Dms...
Software used in the video:
Visual Studio Code IDE: code.visualstudio.com/
PlatformIO Extension: platformio.org/platformio-ide
Clang-Format Extensions (Code Formatter): marketplace.visualstudio.com/...
Social Media:
Twitter: / t_tarnowski​
Linkedin: / tomasz-ta...​
GitHub: github.com/ttarnowski​
Thank you for watching and see you soon!
00:00 Intro
00:11 What I'm going to build
00:53 Hardware presentation
01:10 ESP32 Project - Creating Project with PlatformIO
02:11 ESP32 Project - Using ESP32 WiFi Connect Template
03:49 ESP32 Project - Adding WebSocket Client to the Code
07:55 ESP32 Project - Listening to WebSocket Client Events
09:29 ESP32 Project - Handling WebSocket Events
13:49 ESP32 Project - How to Validate and Parse WebSocket Message Event
27:49 ESP32 Project - Handle Pin Mode Command
33:20 ESP32 Project - Handle Digital Read&Write Commands
36:14 ESP32 Project - Additional Error Handling
37:38 ESP32 Project - Acknowledgement Message
39:39 AWS WebSocket Server - Creating the Project
41:57 AWS WebSocket Server - Infrastructure Configuration
46:30 AWS WebSocket Server - Implementing WebSocket Handler with TypeScript
51:15 AWS WebSocket Server - Client Connect Implementation
53:36 AWS WebSocket Server - Client Disconnect Implementation
55:40 AWS WebSocket Server - Pass the Message Implementation
01:08:04 AWS WebSocket Server - Walk-through the code
01:11:13 AWS WebSocket Server - Deployment to AWS
01:11:37 ESP32 Project - Updating the Code with URL to WebSocket Server
01:12:28 ESP32 Project - Deploying the Code to ESP32
01:13:29 ReactJS Control Panel - Creating the Project
01:16:23 ReactJS Control Panel - Importing WebSocket Client Hook
01:18:09 ReactJS Control Panel - Building UI
01:23:16 ReactJS Control Panel - Behaviour Implementation
01:26:41 ReactJS Control Panel - Sending a Digital Write Message to the WebSocket Server
01:29:00 ReactJS Control Panel - Pin Mode and Digital Read Behaviour
01:41:11 Hardware - Wiring up the LED Diode
01:42:16 Testing the Project Locally
01:44:02 ReactJS Control Panel - Deployment to AWS S3
01:47:50 Testing Newly Deployed Website
01:48:35 The End

КОМЕНТАРІ: 72
@user-gb3nn9li9w
@user-gb3nn9li9w Рік тому
thank you so much I spend whole 24 hours to get it to work and it works you saved my life man good luck
@paulomarques742
@paulomarques742 Рік тому
I'm very very glad that I managed to find your video. This will be of great help to my current project. Awesome work Tomasz, keep it up!
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Thank you, Paulo!
@benjaminhobbs2923
@benjaminhobbs2923 8 місяців тому
amazing, thank you
@jocimarsilva9425
@jocimarsilva9425 7 місяців тому
Novamente parabéns, conteúdo excelente, obrigado
@hamidtb2740
@hamidtb2740 Рік тому
I just started to see this video and can say PERFECT, PERFECT, PERFECT wish best for you and good luck 🍀
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Thank you so much, Hamid TB!!
@ibzih
@ibzih Рік тому
Very nice websocket tutorial, love your video quality!
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Thank you, Hizbi!
@SarmadSohaib22
@SarmadSohaib22 Рік тому
Nice video. Just want to know if there is any limit on the max number of esp32 (at various locations) that we can connect using your explained method?
@jocimarsilva9425
@jocimarsilva9425 7 місяців тому
Parabéns excelente vídeo
@buffplums
@buffplums 25 днів тому
Thank you for this it’s great thank you
@noweare1
@noweare1 7 місяців тому
Real good video, thanks. I think you lost a lot of people on the json part. It can be confusing if people do not know json format. Maybe do a video on json format and sending back and forth between client and host
@Remo2239
@Remo2239 10 місяців тому
Love it :) more sucg tutorials please :)
@Dragons927
@Dragons927 4 місяці тому
Браво братле!
@TVmousa
@TVmousa 2 місяці тому
You are such an Angel thanks
@sametturhan5236
@sametturhan5236 4 дні тому
Thank you so much. Very educated and professional coding. Could you also provide a documentation for controlling multiple ESP32s?
@ezequielbarrera3306
@ezequielbarrera3306 4 місяці тому
Hello Tomasz! One question. When you started the project you selected "NodeMCU-32" board. The setup and the code Is the same if I use another ESP32 like ESP32 from espressif? I have a ESP32 devkit-v1 Thanks, great video!
@node_python_lover454
@node_python_lover454 Рік тому
Awesome tutorial! Thanks alot
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Thanks! I'm glad it helped!
@imjusttryingtobesafelol5909
@imjusttryingtobesafelol5909 9 місяців тому
Hey, Why didnt you use AsyncWebServer or AsyncWebServerSocket? are there separate use cases for async one?
@hassan19982008
@hassan19982008 8 місяців тому
Hi Tomasz, Thanks for your video and it very interest project .I was programing the three project and I had core problem the three program it the same project but the esp project I modify the program for esp8266 . But the api gateway websokets server not connect . The Wi-Fi connect is done already On the esp8266 on monitor the massage show : WS disconnect
@mr-strange-0w0
@mr-strange-0w0 Рік тому
Great Video And Good Explaination 😁😁
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Thanks, Rizmy Abdulla :)
@hplownik
@hplownik Рік тому
Stary, ratujesz mi życie, teraz jestem biedny, ale po wypłacie aż wynagrodzę Ci to jakimś szeklem, tylko prosze dalej rób to co robisz :D
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
hej dzieki, ciesze sie ze pomoglem
@bartekbartoszewski1993
@bartekbartoszewski1993 4 місяці тому
Dziękuje ci, pomogłeś mi ogarnąć sterowanie robota przez telefon na olimpiadę z mechatroniki.
@tictecha2981
@tictecha2981 Рік тому
Hi Tomasz, hope you're well. I am facing some issues when it comes to creating a path for the serverless AWS template. 00:41:00
@tatekolton5717
@tatekolton5717 7 місяців тому
Hello! Do you have the exact version of the .yml file for serverless on github? I am getting the error: "Cannot resolve variable at "resources.Resources.ClientsTable.Properties.TableName": Value not found at "self" source" when I use yard deploy and I think my code is the same as yours
@tareshgupta1095
@tareshgupta1095 2 місяці тому
hey ,can we establish a websockets connection using only soft AP on a esp32 without internet ?
@eransimoni2249
@eransimoni2249 Рік тому
Hi Tomasz , thanks a lot for your great video, I learned a lot from you - do you have a tutorial how to make LittelFS run on ESP32 step by step (not ESP8266) from PlatformIO, I don't see any video for it on the network
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Hey Eran, I don't have yet but I've managed to configure LittleFS with ESP32 and I will make a video about it soon.
@jgunthner
@jgunthner 7 місяців тому
Hi, I need to make this with ESP-IDF. Could you show this implementation, or just code?
@edinetgrunhed6000
@edinetgrunhed6000 19 днів тому
thanks for uploading this video, can you make update for this video using azure
@Adityasingh-sq7gd
@Adityasingh-sq7gd Рік тому
Hi Tomasz, I'm fairly new to this IOT stuff, i've one query, is all these web server using AWS, websocket free or we need to purchase some stuff? You didn't mention anything so it seems this all is free and we just need to purchase esp 32, led , resistor & breadboard. In addition to above, if I wish to create cool IOT interfaces controlling stuff online, I need to learn JavaScript, aws & Esp 32 languages with their several libraries etc, is that right, or something else is required?
@jamesgardner1647
@jamesgardner1647 2 місяці тому
You have to establish an AWS account. It has a small number of free connections per month but as volume goes up so does cost.
@AjirogheneSunny
@AjirogheneSunny 3 місяці тому
As of today 16th January 2024, this code is no longer working. I have spent all day trying to make it work but no response. I went ahead to copy your code base, but still won't work. I think something has broken with the aws serverless
@linux1221
@linux1221 7 днів тому
Do you have any other solution? Need some help
@EdwinMartin
@EdwinMartin Рік тому
Nice walkthrough and explanation. Why don’t you have more subscribers and views? Is it too complex for most viewers? Is it too involved? Don’t you match what people are searching for?
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Thank you, Edwin. I think the channel is still too young as it's only been 16 months since I've started uploading videos. I hope the algorithms pick it up soon :)
@zdzislawtycner539
@zdzislawtycner539 Рік тому
Panie Tomaszu, panski project "Control ESP32 from Anywhere in the world" zwrocil moja uwage w zwiazku z tym ze tej zimy padly moje lithium battery zasilane przez solar panels i calkowicie stracilem mozliwosc wgladu na moja polane kilkaset kilometrow od domu. Postanowilem wiec kupic generator ktory moze byc odpalany przez remote control a to daje mozliwosc zainstalowania w nim ESP32 bo start jest automatyczny i choke jest automatyczny ....calosc zasilana z bateri 12v. Nie jestem z zawodu programista, kiedys naprawialem telewizory a arduino traktuje jako hobby . Moze to bylby jakis pomysl na przyszly projekt...dziekuje
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Witam, pomysl jak najbardziej ciekawy, dziekuje za zainteresowanie kanalem :)
@artigeniusStore
@artigeniusStore 3 місяці тому
very helpful video. thanks you
@hussinaljome5858
@hussinaljome5858 Рік тому
Hi sir, I don't really have experience in Arduino, but can I apply what you explained in this video by using esp8266?
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Hi HUSSIN, yeah I think connecting to WiFi and using WebSocket client should be almost identical on ESP8266. You can also check my old videos about ESP8266 they might come useful to you.
@dienau6313
@dienau6313 10 місяців тому
Hi, I have a question about at 41:07, I do not use macbook, I use code in window 11 so where should I paste the template in vscode?, I also download git for windows, but still dont know how to paste it, since it says --template-url not command found
@jagdish9533
@jagdish9533 20 днів тому
Same problem...... I didn't understand..... Hay if you solved it can you please tell me....
@reychristianmvillarin2296
@reychristianmvillarin2296 15 днів тому
​@@jagdish9533 for windows npm install -g serverless npx serverless create --template-url github.com/ttarnowski/serverless-aws-nodejs-typescript-v2/tree/main --path websocket-server-api-gw
@yojithkr17
@yojithkr17 Рік тому
40:56 Sir how to get that VS Code terminal in windows? Pls help
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
hello, try either gitforwindows.org/ or ubuntu subsystem on windows: ubuntu.com/wsl
@hamidtb2740
@hamidtb2740 Рік тому
any alternative for aws? can use normal server?
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
yeah, you can use a simple websocket server hosted somewhere on the internet to achieve the same results. BTW I'm working on something to simplify it so AWS won't be required :)
@hamidtb2740
@hamidtb2740 Рік тому
@@tomasztarnowski4434 thanks alot I'm waiting for it...
@dixit_sir
@dixit_sir 9 днів тому
sir WS disconnected is poping again and again
@csigabigaboca1987
@csigabigaboca1987 11 місяців тому
How do I know my current home IP address? Without it I can't access my home network from anywhere...
@user-iz2bv9zb4l
@user-iz2bv9zb4l Рік тому
where's the code of serverless.yml?
@AaronAu-un3vi
@AaronAu-un3vi Рік тому
I keep getting this error and not sure how to handle it: [128400][E][WiFiClient.cpp:313] setSocketOption(): fail on -1, errno: 9, "Bad file number" WS Disconnected
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Hi Aaron, this error: [128400][E][WiFiClient.cpp:313] setSocketOption(): fail on -1, errno: 9, "Bad file number" is most likely unrelated to "WS Disconnected" is your board connected to WiFi?
@AaronAu-un3vi
@AaronAu-un3vi Рік тому
@@tomasztarnowski4434 Yes it is connected to wifi
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
Hi Aaron, try to compile the project with the debug flags: in you platformio.ini file add: build_flags = -D DEBUG_WEBSOCKETS -D DEBUG_ESP_PORT=Serial and check what serial monitor returns
@epictetus__
@epictetus__ Рік тому
bookmark: 23:00
@azizismail1594
@azizismail1594 Рік тому
Oh man, u are to late, i need this knowledge 3month ago
@tomasztarnowski4434
@tomasztarnowski4434 Рік тому
there's more coming maybe you'll find something useful :)
@carlos.galhano
@carlos.galhano Рік тому
Sorry but for beginners this is complety crazy...😢
@HiberNAT
@HiberNAT 5 місяців тому
I can tell a full beginners video for me would be a titanic masterclass on the inputs and outputs of the tcp/ip layers of like 20 hours series
@HiberNAT
@HiberNAT 5 місяців тому
Me, a lazy dude, would have made everything a function used one time 🤣 just for beginners legibility
@HiberNAT
@HiberNAT 5 місяців тому
Or a full library 😂
@carlos.galhano
@carlos.galhano 5 місяців тому
I justo do a DHT temperature and humidity being see on an internet Pages acessível to all.
@aliaskri982
@aliaskri982 Рік тому
I give up! This is such a disastrous tutorial for a beginnner. It is ridiculously hard to follow with various components that you expect the viewer to know without ever specifying them. After sinking about 5 hours in this video, trying to understand what you say and then solving all the errors you haven't mentioned including how you have to setup an AWS account, configure that information with your personal computer and so on. At @42:16 , you just paste in code without every explaining where you got it from or how I can get it. Looking over your github repo, that code doesn't match as it contains addtional functions and leads to further several errors. I still have multitudes of questions and errors. For example, when I deploy program, I keep getting erros like secret-key is not defined and etc. I would try to solve it but I don't even know where to start. Only by watching your other vidoes can I even begin to complete the puzzle. As a self-learner with no knowledge of these concepts, you complete ruined the fun of the video. I have self-taught programming through online tutorials and I have never been left this confused and exhausted. Instead of learning something new, I want to cry from frustration sinking so much time into a video while nothing to show for it. What's most disappointing is that seeing your earlier video regarding hooking your esp32 to wifi and about platformio, I got so excited, but wasted my limited time on this 2 hour confusion fest.
@noweare1
@noweare1 7 місяців тому
This was a lot to know. Besides esp32, C and json, you have to know react, javascript and AWS. Thats a lot. One thing at a time then integrate them one by one.
@mtgstudios1556
@mtgstudios1556 Місяць тому
I'm not sure that this video was geared towards beginners because of @noweare1's point at least from what I can tell by looking for a solution like this, trying to control the device from anywhere in the world is quite an advanced concept as I can't find a lot of people that have done it from absolutely anywhere. Mostly just on local networks. So if you are still into the IoT stuff I recommend starting a bit simpler than this. like trying to make it work with Low Bluetooth Energy.
Getting Started with ESP32 - Step-By-Step Tutorial
19:50
Tomasz Tarnowski
Переглядів 297 тис.
Try these 16 Brilliant ESP32 projects!!!
11:18
ToP Projects Compilation
Переглядів 512 тис.
Godzilla Attacks Brawl Stars!!!
00:39
Brawl Stars
Переглядів 8 млн
Артем Пивоваров х Klavdia Petrivna - Барабан
03:16
Artem Pivovarov
Переглядів 6 млн
BMW просто издевается над нами! Силы на исходе…
1:34:41
ИЛЬДАР АВТО-ПОДБОР
Переглядів 3,5 млн
Микросервисы - Простым Языком на Понятном Примере
19:08
КАК ПОСТРОИТЬ WEB SERVER НА ESP32
11:34
Kirill Ivanychev
Переглядів 3,6 тис.
КАКОЙ ЛИНУКС ВЫБРАТЬ В 2024
24:21
PLAFON - Канал о линуксе
Переглядів 447 тис.
WebSockets Explained: Real-Time Communication with ESP8266
6:58
ESP32 Guide 2024 | Choosing and Using an ESP32 Board
41:06
DroneBot Workshop
Переглядів 203 тис.
tRPC, gRPC, GraphQL or REST: when to use what?
10:46
Software Developer Diaries
Переглядів 63 тис.
ESP32 Access Point and Router connection explained
8:51
MoThunderz
Переглядів 41 тис.
Секретная функция ютуба 😱🐍 #shorts
0:14
Владислав Шудейко
Переглядів 2,2 млн
iPhone - телефон для нищебродов?!
0:53
ÉЖИ АКСЁНОВ
Переглядів 3,7 млн
Broken Trace Repair #electronics #mobilerepair
0:51
ideal institute aligarh
Переглядів 523 тис.