May 19, 2024

Implementing WebSocket Communication on ESP32

In today’s blog post, we’ll be diving into the world of WebSocket communication and exploring how it can be implemented on the ESP32 microcontroller. WebSocket is a protocol that provides full-duplex communication channels over a single TCP connection, enabling real-time, bidirectional communication between a web browser and a web server. The ESP32, with its powerful capabilities, can easily handle this protocol and offer exciting possibilities for IoT applications. So, let’s get started!

Prerequisites

To follow along with this tutorial, you’ll need the following:

• An ESP32 development board
• Arduino IDE (or a similar platform)
• A stable internet connection

Setting up the ESP32

Before we dive into implementing WebSocket communication, we first need to set up the ESP32 for Arduino development. Here are the steps:

1. Download and install the Arduino IDE from the official Arduino website.
2. Open the Arduino IDE and go to “Preferences.”
3. In the “Additional Boards Manager URLs” field, add the following URL: https://dl.espressif.com/dl/package_esp32_index.json
4. Click “OK” to save the preferences.
5. Navigate to “Tools” > “Board” > “Boards Manager.”
6. Search for “esp32” and install the ESP32 boards package.
7. Once installed, select “ESP32 Dev Module” as the board from the “Tools” menu.

With the ESP32 properly set up, we can now move on to implementing WebSocket communication.

Libraries Installation

To make the process easier, we’ll be using the “WebSockets” library by Markus Sattler. Here’s how you can install it:

1. Open the Arduino IDE.
2. Go to “Sketch” > “Include Library” > “Manage Libraries.”
3. In the “Library Manager” window, search for “WebSockets” and click on the result by Markus Sattler.
4. Click the “Install” button to install the library.

Implementing WebSocket Communication

To implement WebSocket communication on the ESP32, we’ll use a simple WebSocket server example. This example will set up a WebSocket server on the ESP32 and echo back any received messages to the client.

Here’s the code for the WebSocket server:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

#include <WebSocketsServer.h>

WebSocketsServer webSocket(81);

void webSocketEvent(uint8_t num, WStype_t type, uint8_t *payload, size_t length) {
  switch(type) {
    case WStype_DISCONNECTED:
      Serial.printf("[%u] Disconnected!\n", num);
      break;
    case WStype_CONNECTED:
      {
        IPAddress ip = webSocket.remoteIP(num);
        Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);
  
        // Send message to client
        webSocket.sendTXT(num, "Hello from ESP32!");
      }
      break;
    case WStype_TEXT:
      Serial.printf("[%u] Received message: %s\n", num, payload);
  
      // Echo back the received message
      webSocket.sendTXT(num, payload);
      break;
  }
}

void setup() {
  Serial.begin(115200);
  WiFi.begin("your_network_name", "your_network_password"); // Replace with your Wi-Fi credentials
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to Wi-Fi...");
  }
  
  Serial.println("Connected to Wi-Fi!");
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
}

void loop() {
  webSocket.loop();
}

To use this code, make sure to replace "your_network_name" and "your_network_password" with your Wi-Fi credentials.

Testing the WebSocket Server

Now that we have everything set up, it’s time to test our WebSocket server.

1. Compile and upload the code to the ESP32.
2. Open the Serial Monitor to view the ESP32’s IP address.
3. From a web browser, navigate to ws://YOUR_ESP32_IP_ADDRESS:81 (replace YOUR_ESP32_IP_ADDRESS with the actual IP address you found in the Serial Monitor).
4. You should see a message in the Serial Monitor indicating a successful connection.
5. Type a message in the browser and hit enter. You should receive the message echoed back in the browser and see it in the Serial Monitor as well.

Congratulations! You have successfully implemented WebSocket communication on the ESP32.

Conclusion

WebSocket communication opens up a world of possibilities for real-time, bidirectional communication between web browsers and microcontrollers like the ESP32. In this blog post, we explored the process of setting up the ESP32 for Arduino development and implementing a simple WebSocket server. We also tested the server by establishing a connection from a web browser and sending messages back and forth.

With this knowledge, you can now start building your own exciting projects that leverage the power of WebSocket communication on the ESP32. Have fun exploring the endless possibilities!

Remember, the full code and examples are available on GitHub, so feel free to check them out and experiment further.

➡️ Linux 'mv' command

⬅️ Linux 'cp' command

Go back to Posts.