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: https://www.youtube.com/channel/UCeWDDxqfxpKucuPt5elzmiQ?sub_confirmation=1
Link to the code:
ESP32 Project - https://github.com/ttarnowski/esp32-websockets
WebSocket Server Code - https://github.com/ttarnowski/esp32-websockets-serverless-handler
ESP32 Control Panel (React) - https://github.com/ttarnowski/esp32-control-panel
Serverless, AWS, TypeScript v2 template project - https://github.com/ttarnowski/serverless-aws-nodejs-typescript-v2
React, TypeScript, TailwindCSS, Vite template project - https://github.com/ttarnowski/vite-react-ts-tailwindcss-template
How to get started with Serverless Framework:
https://youtu.be/JL_7Odb7GLM
How to connect ESP32 to WiFi:
https://youtu.be/aAG0bp0Q-y4
How to build Web Chat with Serverless Framework and AWS API Gateway Websockets:
https://youtu.be/82Geq2Jq0pg
ESP32 Datasheet Specification: https://www.espressif.com/sites/default/files/documentation/esp32-wroom-32_datasheet_en.pdf
NodeMCU 32S Development Board Specification:
https://circuits4you.com/2018/12/31/esp32-devkit-esp32-wroom-gpio-pinout/
Software used in the video:
Visual Studio Code IDE: https://code.visualstudio.com/
PlatformIO Extension: https://platformio.org/platformio-ide
Clang-Format Extensions (Code Formatter): https://marketplace.visualstudio.com/items?itemName=xaver.clang-format
Social Media:
Twitter: https://twitter.com/t_tarnowski
Linkedin: https://www.linkedin.com/in/tomasz-ta...
GitHub: https://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