手把手教你使用VScode+ESP-IDF在ESP32上搭建web server，并作为web socket server进行数据交互

在嵌入式开发中，ESP32是一款功能强大的微控制器，其内置Wi-Fi和蓝牙功能使其非常适合用于IoT（物联网）项目。使用Visual Studio Code（VSCode）配合ESP-IDF（Espressif IoT Development Framework），我们可以轻松地在ESP32上搭建一个Web Server，同时利用WebSocket实现数据交互。本文将给出具体步骤和代码示例，帮助你完成这一过程。

环境准备

1. 安装VSCode：首先确保你的计算机上安装了最新版本的VSCode。

2. 安装ESP-IDF：请参考Espressif官方网站上的安装文档，下载并安装ESP-IDF。安装完成后，配置好环境变量。

3. 安装必要插件：在VSCode中安装Espressif IDF插件和C/C++插件，以便你可以更好地编写和调试代码。

创建项目

1. 新建项目：打开VSCode，按F1，输入ESP-IDF: Create ESP-IDF project，选择一个目录并输入项目名称，例如 esp32_websocket_server。

2. 配置项目：在CMakeLists.txt中添加需要的库。在main文件夹下创建一个app_main.c文件。

编写代码

我们将编写一个简单的WebSocket Server，该服务器会接收客户端的消息并回传。

#include <stdio.h>
#include <string.h>
#include "freertos/FreeRTOS.h"
#include "freertos/task.h"
#include "esp_log.h"
#include "esp_err.h"
#include "esp_system.h"
#include "nvs_flash.h"
#include "esp_http_server.h"
#include "esp_event.h"
#include "esp_wifi.h"

#define WIFI_SSID "YOUR_SSID"       // 替换为你的Wi-Fi SSID
#define WIFI_PASSWORD "YOUR_PASSWORD" // 替换为你的Wi-Fi PASSWORD

static const char *TAG = "websocket_server";

// Wi-Fi 连接函数
void wifi_init(void) {
    esp_err_t ret = nvs_flash_init();
    if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND) {
        ESP_ERROR_CHECK(nvs_flash_erase());
        ret = nvs_flash_init();
    }
    ESP_ERROR_CHECK(ret);

    // 初始化Wi-Fi
    esp_wifi_init();
    esp_wifi_set_mode(WIFI_MODE_STA);
    esp_wifi_set_config(WIFI_STA_AP, &wifi_config);
    esp_wifi_start();
    esp_wifi_connect();
    ESP_LOGI(TAG, "Connecting to %s...", WIFI_SSID);
}

// WebSocket处理函数
esp_err_t websocket_handler(httpd_req_t *req) {
    char buffer[128];
    int received;
    received = httpd_req_recv(req, buffer, sizeof(buffer));
    if (received <= 0) {
        return HTTPD_SOCK_ERR;
    }

    // 在这里处理消息并回传
    httpd_resp_send(req, buffer, received);
    return ESP_OK;
}

// 设置HTTP服务器
void start_webserver() {
    httpd_handle_t server = NULL;

    httpd_config_t config = HTTPD_DEFAULT_CONFIG();
    config.server_port = 80;

    if (httpd_start(&server, &config) == ESP_OK) {
        httpd_uri_t uri = {
            .uri = "/ws",
            .method = HTTP_GET,
            .handler = websocket_handler,
            .user_ctx = NULL
        };
        httpd_register_uri_handler(server, &uri);
    }
}

// 主函数
void app_main() {
    wifi_init();

    // 启动WebSocket服务器
    start_webserver();

    ESP_LOGI(TAG, "WebSocket server initialized.");
}

代码讲解

1. Wi-Fi连接：函数wifi_init()用于连接到Wi-Fi。你需要将YOUR_SSID和YOUR_PASSWORD替换为你的Wi-Fi信息。

2. WebSocket处理：函数websocket_handler()用于处理WebSocket请求，接收到的消息会被直接回传。

3. 服务器配置：start_webserver()函数负责配置并启动HTTP服务器，并注册WebSocket URI。

4. 应用主函数：app_main()是程序的入口，初始化Wi-Fi并启动WebSocket服务器。

编译与上传

在终端中，使用以下命令进行编译和上传：

idf.py build
idf.py flash monitor

在上述命令中，首先会构建项目，然后将应用程序上传到ESP32开发板上，最后打开监视器查看日志输出。

测试WebSocket

你可以使用如Postman或浏览器中的JavaScript脚本测试WebSocket功能。确保你的ESP32连接到互联网并可以访问。

结论

通过以上步骤，你可以在ESP32上搭建一个简单的WebSocket服务器，并实现基本的数据交互。你可以在此基础上进行更多的扩展，例如，加入前端页面、增强安全性或添加更多的业务逻辑。希望本文对你有所帮助！