如何在网页中接收esp32串口中的数据

要在网页中接收ESP32串口中的数据，需要使用WebSocket技术。WebSocket是一种在单个TCP连接上进行全双工通信的网络协议，它可以在浏览器和服务器之间建立实时的双向通信，从而使得服务器可以主动向浏览器发送数据。

具体实现步骤如下：

1. 在ESP32上使用WebSockets库创建WebSocket服务器，可以参考这个库的官方文档：https://github.com/Links2004/arduinoWebSockets

2. 在网页中使用JavaScript代码创建WebSocket对象，并连接到ESP32创建的WebSocket服务器。

3. 在WebSocket对象上注册接收数据的回调函数，当ESP32发送数据到WebSocket服务器时，回调函数会被触发，将数据传递给网页。

示例代码如下：

ESP32端代码：

#include <WebSocketsServer.h>

WebSocketsServer webSocket = WebSocketsServer(81);

void setup() {
  Serial.begin(115200);
  WiFi.begin("SSID", "password");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to WiFi");

  webSocket.begin();
  Serial.println("WebSocket server started");
}

void loop() {
  webSocket.loop();
  
  if (Serial.available()) {
    String data = Serial.readStringUntil('\n');
    webSocket.broadcastTXT(data);
    Serial.println("Sent data to WebSocket clients: " + data);
  }
}

网页端代码：

var webSocket = new WebSocket("ws://esp32.local:81/");

webSocket.onopen = function(event) {
  console.log("WebSocket connection opened");
};

webSocket.onmessage = function(event) {
  var data = event.data;
  console.log("Received data from WebSocket server: " + data);
};

webSocket.onclose = function(event) {
  console.log("WebSocket connection closed");
};

在上面的代码中，ESP32的WebSocket服务器监听端口81，网页连接到esp32.local域名（需要在路由器中设置）的WebSocket服务器。当ESP32从串口接收到数据时，它会将数据发送到WebSocket服务器，WebSocket服务器会将数据广播到所有连接的客户端，网页通过onmessage回调函数接收到数据并输出到控制台。