Index
ESP32 WebSocket Server: Control Outputs
This tutorial teaches you how to create a web server with the ESP32 using the WebSocket communication protocol. You’ll learn how to build a web page that allows you to control outputs on the ESP32 remotely. The web page will display the current state of the outputs and will update automatically for all connected clients.
The ESP32 will be programmed using the Arduino IDE along with the ESPAsyncWebServer library. If you’ve ever had multiple tabs open (on the same device or different devices) while controlling the ESP32, you might have noticed that the state doesn’t update in all tabs automatically unless you manually refresh the web page. To fix this, we can utilize the WebSocket protocol. With WebSocket, all connected clients can be instantly notified when a change occurs, allowing them to update the web page in real-time without needing manual refreshes.
Introduction to webSocket
WebSocket is like a virtual bridge that stays open between a client (like your browser) and a server. It enables ongoing communication in both directions, meaning you can send information from the client to the server and vice versa whenever you need, without having to establish new connections each time.
When the client wants to connect to the server using WebSocket, it goes through a special process called the WebSocket handshake. This starts with a regular HTTP request and response. Interestingly, servers can handle both regular HTTP connections and WebSocket connections on the same port.
Once the connection is set up, both the client and server can send data to each other at the same time. With WebSocket, the server (in our case, the ESP32 board) can send updates or information to the client or even to all connected clients without waiting for a request. This lets us update the web browser whenever something changes.
The change could be triggered by actions on the web page (like clicking a button) or by events on the ESP32 side, such as pressing a physical button on a circuit.
To get ready to use Arduino IDE for programming your ESP32 board,
To set up your Arduino IDE for programming the ESP32 board, make sure you have the Arduino IDE installed on your computer.
Next, you’ll need to install the ESP32 board in the Arduino IDE. Follow the instructions provided by the ESP32 board manufacturer for your specific operating system (Windows, Mac OS X, or Linux).
Now, let’s install the libraries required for building the web server:
- ESPAsyncWebServer Library: This library is essential for creating the web server. You can download it from here.
- AsyncTCP Library: This library is needed for the ESPAsyncWebServer to function properly. You can download it from here.
Since these libraries aren’t available in the Arduino Library Manager, you’ll need to manually install them:
- Download the library files from the links provided.
- Copy the downloaded library folders to the Arduino IDE’s libraries folder in your installation directory.
- Alternatively, within the Arduino IDE, navigate to Sketch > Include Library > Add .zip Library, then select the downloaded library files to install them.
Once you’ve installed these libraries, you’re ready to start programming your ESP32 board in the Arduino IDE.
