Question

我试图用ESP32创建一个Web服务器，并在HTML页面上显示来自ESP的数据。主要问题是我达到了不会丢失任何数据包的目的，但是它仅逐秒显示而不是更快。

我尝试了几件事：使用WebSocketServer（将速度提高了半秒，但没有提高）尝试使用WiFiServer并使用client.print来打印网页（也不太快）

#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <WebSocketsServer.h>
#include <WebSocketsClient.h>
#include <Ticker.h>


//Enter your SSID and PASSWORD
const char* ssid = "HUAWEI P20 lite";
const char* password = "########";

WebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81);
Ticker timer;

char webpage[] PROGMEM = R"=====(
<html>
<head>
  <script src='https://cdn.jsdelivr.net/npm/chart.js@2.8.0'></script>
</head>
<body onload="javascript:init()">
<div>
<canvas id="line-chart" width="800" height="450"></canvas>
</div>
<script>

var webSocket, dataPlot;
var maxDataPoints = 50;

function removeData(){
  dataPlot.data.labels.splice(0,1);
  dataPlot.data.datasets[0].data.splice(0,1);

}
function addData(label, data) {
  if (dataPlot.data.labels.length > maxDataPoints) {
    removeData();
  }
  dataPlot.data.labels.push(label);
  dataPlot.data.datasets[0].data.push(data);
  dataPlot.update();
}
function init(){
  webSocket = new WebSocket('ws://' + window.location.hostname + ':81/');
  dataPlot = new Chart(document.getElementById("line-chart"), {
    type: 'line',
    data:{
      labels: [],
      datasets: [{
        data: [],
        label: "RandomInt",
        borderColor: "3e95cd",
        fill: false
      }]
    }
  });
  webSocket.onmessage = function(event){
    var data = JSON.parse(event.data);
    var today = new Date();
    var t = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    addData(t,data.value);
  }
}
</script>
</body>
</html>
)=====";

//------------------------------------------------------------------
//                           SETUP
//------------------------------------------------------------------

void setup() {
  Serial.begin(115200);

  //------------------------------------------------------------------
  //ESP32 connects to your wifi
  WiFi.mode(WIFI_STA); //Connect to your wifi
  WiFi.begin(ssid, password);

  Serial.println("Connecting to ");
  Serial.print(ssid);

  //Wait for WiFi to connect
  while(WiFi.waitForConnectResult() != WL_CONNECTED){      
      Serial.print(".");
    }

  //If connection successful show IP address in serial monitor
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());  //IP address assigned to your ESP
  //------------------------------------------------------------------

  server.on("/",[](){
    server.send_P(200,"text/html", webpage);
  });
  Serial.println("Server Ready");
  server.begin();

  webSocket.begin();
  webSocket.onEvent(webSocketEvent);

  timer.attach(0.1,getData);

}

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

//------------------------------------------------------------------
//                          SETUP FUNCTION
//------------------------------------------------------------------
void getData(){
  int a = random(255);
  Serial.println(String(a));
  String json = "{\"value\":";
  json+= a;
  json+= "}";
  webSocket.broadcastTXT(json.c_str(), json.length());
}

void webSocketEvent ( uint8_t num, WStype_t type, uint8_t* payload, size_t length){
      #Do something, we'll see later
}

如何使用ESP32 Web服务器增加wifi数据传输

0 个答案: