Introduction

WebSockets offer a powerful way to establish real-time communication between a server and clients over the internet. In this tutorial, we’ll learn how to turn an ESP32 microcontroller into a WebSocket server. This project is perfect for anyone interested in IoT applications, home automation, or just learning more about wireless communication.

What You’ll Need

• An ESP32 development board
• Micro USB cable
• Arduino IDE installed on your computer
• Basic understanding of Arduino programming

Step 1: Setting Up Your ESP32 with Arduino IDE

1. Install the ESP32 Board in Arduino IDE:
   • Open Arduino IDE, go to File > Preferences.
   • In the “Additional Board Manager URLs” field, enter: https://dl.espressif.com/dl/package_esp32_index.json
   • Go to Tools > Board > Boards Manager, search for “ESP32”, and install the latest version.
2. Select Your ESP32 Board:
   • Go to Tools > Board and select your specific ESP32 model.

Step 2: Install WebSocket Library

1. Download the ArduinoWebsockets Library:
   • Go to Sketch > Include Library > Manage Libraries.
   • Search for “ArduinoWebsockets” by Gil Maimon and install it.

Step 3: Creating a WebSocket Server

1. Start a New Sketch:
   • Open a new sketch in the Arduino IDE.
2. Include Libraries:
   • At the top of your sketch, include the necessary libraries:

#include <WiFi.h>
#include <WebSocketsServer.h>

1. Define WiFi Credentials:
   • Define your WiFi SSID and password:cpp

const char* ssid = "yourSSID";
const char* password = "yourPASSWORD";

1. Initialize the WebSocket Server:
   • Create a WebSocket server on port 81 (you can choose another port if desired):cpp

WebSocketsServer webSocket = WebSocketsServer(81);

1. Setup Function:
   • Initialize serial communication and connect to WiFi. Then, start the WebSocket server:

void setup() {
  Serial.begin(115200);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("Connected to WiFi");
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);
}

1. Handling WebSocket Events:
   • Define a function to handle WebSocket events:

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch(type) {
    case WStype_TEXT:
      Serial.printf("[%u] Text: %s\n", num, payload);
      // Echo the text received back to the client
      webSocket.sendTXT(num, payload);
      break;
  }
}

1. Loop Function:
   • In the loop function, continuously handle WebSocket communication:

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

Step 4: Uploading the Code

1. Connect Your ESP32:
   • Plug your ESP32 into your computer using a micro USB cable.
2. Select the Correct Port:
   • In Arduino IDE, go to Tools > Port and select the port that your ESP32 is connected to.
3. Upload the Sketch:
   • Click the upload button in Arduino IDE.

Step 5: Testing the Server

1. Open a WebSocket Client:
   • Use a WebSocket client (like a browser extension or an online WebSocket test tool) to connect to ws://[ESP32_IP]:81.
2. Send and Receive Messages:
   • Send messages from the client and observe the responses from the ESP32.

Conclusion

Congratulations! You’ve successfully turned your ESP32 into a WebSocket server. This setup can be the foundation for various real-time IoT applications.

Next Steps

• Experiment with sending different types of data.
• Integrate sensors and control devices based on WebSocket messages.
• Implement security features for a more robust server.

Remember, the best way to learn is by doing. So, keep experimenting and exploring the possibilities!