ESP32开发AP模式

这是萌新博主的ESP32开发手记，基于arduino开发

环境准备

博主采用vscode配合platformio插件基于arduino的手段进行开发

配合esp32 S3找到相应版本下载好

构思 如图

1.需要调用esp32的wifi模块去打开热点，以供设备连接，以及其他预备工作----AP模式启动
2.博主需要存一个html在esp32的闪存中，在有设备连接esp32的热点时，要返回此html给该设备
----需要文件管理与80端口准备
3.esp32要与发送过去的html进行websocket连接----websocket即81端口准备

html编写参考博主的前后端学习之路

AP模式，启动！

博主先选择好串口方便后续用于调试，以及其他功能的实现

#include "driver/uart.h"

setup()中放
这里博主踩坑了
一开始不知道这边怎么串口调用
去手搓串口底层了
后面发现一句话就可以搞定

Serial.begin(115200, SERIAL_8N1, 44, 43);
Serial1.begin(115200, SERIAL_8N1, 2, 1);

下面是踩坑代码TT

#include "driver/uart.h"

// 以下进行串口初始化
#define RNTX_PIN (GPIO_NUM_43) // UART_NUM_1
#define RNRX_PIN (GPIO_NUM_44) //
#define BDTX_PIN (GPIO_NUM_1)  // UART_NUM_2
#define BDRX_PIN (GPIO_NUM_2)  //
static const int RX_BUF_SIZE = 1024;
void uart_init() // 串口设置
{
  const uart_config_t uart_config = {
      .baud_rate = 115200,
      .data_bits = UART_DATA_8_BITS,
      .parity = UART_PARITY_DISABLE,
      .stop_bits = UART_STOP_BITS_1,
      .flow_ctrl = UART_HW_FLOWCTRL_DISABLE,
      .source_clk = UART_SCLK_APB,
  };

  uart_driver_install(UART_NUM_1, RX_BUF_SIZE * 2, 0, 0, NULL, 0);
  uart_driver_install(UART_NUM_2, RX_BUF_SIZE * 2, 0, 0, NULL, 0);
  uart_param_config(UART_NUM_1, &uart_config);
  uart_param_config(UART_NUM_2, &uart_config);
  uart_set_pin(UART_NUM_1, RNTX_PIN, RNRX_PIN, UART_PIN_NO_CHANGE, UART_PIN_NO_CHANGE);
  uart_set_pin(UART_NUM_2, BDTX_PIN, BDRX_PIN, UART_PIN_NO_CHANGE, UART_PIN_NO_CHANGE);
}
HardwareSerial SerialRN(1); // 创建SerialRN对象，对应UART1接口，RN
HardwareSerial SerialBD(2); // 创建SerialBD对象，对应UART2接口，BD

调用wifi.h

对wifi进行初始化

即可将热
点打开

#include <Arduino.h>
#include <WiFi.h>


// 以下进行wifi初始化
const char *ssid = "";    // wifi ssid
const char *password = ""; // 密码
IPAddress apIP(192, 168, 4, 1);


void setup()
{
  WiFi.mode(WIFI_AP);
  WiFi.softAP(ssid, password);
  IPAddress IP = WiFi.softAPIP();

}

文件管理与80端口准备

库选择以及端口初始化

#include <SPIFFS.h>
#include <ESPAsyncWebServer.h>

AsyncWebSocket ws("/ws");
AsyncWebServer server(80);      // 传网页端口

判断SPIFFS是否正常和把index传过去(setup()中)

if (!SPIFFS.begin(true))
  {
    Serial.println("An error occurred while mounting SPIFFS");
    return;
  }
 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request)
            {
              request->send(SPIFFS, "/index.html", "text/html"); // 传html过去
            });
  server.on("/favicon.ico", HTTP_GET, [](AsyncWebServerRequest *request)
            {
              request->send(SPIFFS, "/favicon.ico", "image/x-icon"); // 传ico过去
            });

  server.begin();

通过以上代码就成功把html传过去了

websocket即81端口准备

81端口准备

WebSocketsServer webSocket(81); // websocket端口

在setup()中开启

webSocket.begin();

下面是通过回调函数去与html进行通讯

String message；//message为要发送的消息，大家可以根据各自ap模式的需求去给message赋值
void goWeb()
{

  if (client.connect("192.168.4.1", 81))
  {
    while (client.connected())
    {
      webSocket.loop(); // 处理WebSocket事件
      if (flag == 0)
      {
        flag = 1;
        message += readCardNumber();
        message += readSignalStatus();
      }
      else
        webSocket.onEvent(onWebSocketEvent);
    }
  }
}

void onWebSocketEvent(uint8_t num, WStype_t type, uint8_t *payload, size_t length)
{
  if (type == WStype_TEXT)
  {
    Serial.printf("[%u] Received text: %s\n", num, (char *)payload);

    String receivedData = (char *)payload;
   
    webSocket.sendTXT(num, message);//message为要发送的消息，大家可以根据各自ap模式的需求去给message赋值
    message = "";
  }
}

message为要发送的消息，大家可以根据各自ap模式的需求去给message赋值

以下是实现html发送消息到esp32的部分代码

<p>MESSAGE</p> <input type="text" id="message-input" placeholder />
<div class="button">
    <button onclick="sendMessage()">SEND</button>
</div>
<script>
    const messageBox = document.getElementById('message-box');
    const messageInput = document.getElementById('message-input');
    const button = document.querySelector('button');

    const socket = new WebSocket('ws://192.168.4.1:81');

    socket.onopen = function(event) {
        console.log('WebSocket已连接');
    };
    socket.onmessage = function(event) {
        const message = event.data;
        console.log('收到消息', message);
        const formattedMessage = message.replace(/\r/g, '<br>');
        messageBox.innerHTML += '<p color="black">' + formattedMessage + '</p>';
        messageBox.innerHTML += '<p></p>';
    };
    socket.onclose = function(event) {
        if (event.wasClean) {
            console.log('WebSocket已关闭，代码=' + event.code + ', 原因=' + event.reason);
        } else {
            console.error('WebSocket连接断开');
        }
    };

    socket.onerror = function(error) {
        console.error('WebSocket出现错误:', error);
    };

    function sendMessage() {
        const message = cardnumberInput.value + ',' + messageInput.value;
        socket.send(message);
        messageInput.value = '';
    };
</script>

通过以上步骤我们就做好一个可以通过其他可连接wifi设备与esp32联系了
再也不用随身带着电脑也能测试esp32了！
博主是萌新 如果讲错了 欢迎大家指正

进入 titochan.top了解更多博主信息