arduino ESPAsyncWebServer 使用gzip

最新推荐文章于 2025-04-01 10:52:13 发布

容沁风

最新推荐文章于 2025-04-01 10:52:13 发布

阅读量1.3k

点赞数 3

分类专栏：电脑网络文章标签： html css http

本文链接：https://blog.youkuaiyun.com/fengyu09/article/details/120477952

版权

电脑网络专栏收录该内容

137 篇文章

订阅专栏

websocket更新页面数据
在这里插入图片描述

mini.css,zepto.js压缩成Gzip，注意使用7zip软件。
在这里插入图片描述

arduino代码

#include <AsyncWebSocket.h>
#include <ESPAsyncWebServer.h>

#include <SPIFFS.h>
#include <WiFi.h>

#define ESP_getChipId()   ((uint32_t)ESP.getEfuseMac())
#define MAX_CLIENTS 4

// http
AsyncWebServer server(80);
AsyncWebSocket ws("/chat");
// custom
char crc(String s);
void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,
               void *arg, uint8_t *data, size_t len);

int data = 0;
float value = 0;
String buffer = "";
String buffer2 = "";
String result = "";

void setup() {
  Serial.begin(9600);
  Serial2.begin(9600);
  // spiffs
  if (!SPIFFS.begin()) {
    Serial.println("An Error has occurred while mounting SPIFFS");
  }
  // wifi
  IPAddress ip(192, 168, 3, 1);
  IPAddress gw(192, 168, 3, 1);
  IPAddress mask(255, 255, 255, 0);
  WiFi.softAPConfig(ip, gw, mask);
  String chip_id = "ESP_" + String(ESP_getChipId());
  const char *ssid = chip_id.c_str();

  //wifi_power_t wifi_power;
  WiFi.softAP(ssid);
  WiFi.setTxPower(WIFI_POWER_19_5dBm);
  Serial.println("Tx power-----");
  Serial.println(WiFi.getTxPower());
  Serial.println("------Tx power");

  // http
  server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/index.html", "text/html");
  });

  server.on("/zepto.js.gz", HTTP_GET, [](AsyncWebServerRequest * request) {
    AsyncWebServerResponse *response = request->beginResponse(SPIFFS, "/zepto.js.gz", "text/javascript");
    response->addHeader("Content-Encoding", "gzip");
    request->send(response);
  });

  server.on("/mini-nord.css.gz", HTTP_GET, [](AsyncWebServerRequest * request) {
    AsyncWebServerResponse *response = request->beginResponse(SPIFFS, "/mini-nord.css.gz", "text/css");
    response->addHeader("Content-Encoding", "gzip");
    request->send(response);
  });

  ws.onEvent(onWsEvent);
  server.addHandler(&ws);
  server.begin();
}

void loop() {
  // 读甲醛传感器
  while (Serial2.available() > 0) {
    data = Serial2.read();
    // Serial.println(data);

    buffer += (char)data;
    buffer2 += String(data, HEX) + " ";

  }  // while 0

  if (buffer.charAt(0) == 0xff && buffer.length() == 9) {
    // 验证crc
    char crcValue = crc(buffer);
    if (crcValue == buffer.charAt(8))
      value = (float)(buffer.charAt(4) * 256 + buffer.charAt(5)) / 1000.0;
    else
      Serial.println("crc not equal");
    buffer = "";
    result = "结果：<mark>" + String(value) + "</mark>，数据：" + buffer2;
    buffer2 = "";
  }  // if 1

  if (buffer.length() >= 9)
    buffer = "";

  //Serial2.flush();

  // web
  // 发送数据
  //ws.cleanupClients();
  //Serial.println(result);
  ws.textAll(result);


  // delay
  delay(100);

  // loop
}

// CRC计算
char crc(String s) {
  int sum = 0;
  for (int i = 1; i < s.length() - 1; i++)
    sum += s[i];
  int value = ~sum + 1;
  return value & 0xff;

}

void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,
               void *arg, uint8_t *data, size_t len) {
  switch (type) {
    case WS_EVT_CONNECT:
      Serial.printf("WebSocket client #%u connected from %s\n", client->id(), client->remoteIP().toString().c_str());
      break;
    case WS_EVT_DISCONNECT:
      Serial.printf("WebSocket client #%u disconnected\n", client->id());
      break;
    case WS_EVT_DATA:
      break;
    case WS_EVT_PONG:
    case WS_EVT_ERROR:
      break;
  }
}

index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>甲醛测量</title>
    <link rel="stylesheet" href="mini-nord.css.gz">

</head>
<body>
<div class="container">
    <h3>甲醛读值</h3>
    <div class="row">
        <div class="col-sm-12" id="id_value"></div>
    </div>
</div>
</body>
</html>
<script src="zepto.js.gz"></script>
<script>
    let ws;
    let uri = "ws://" + location.host + "/chat";
    let out = $("#id_value");
    $(document).ready(function () {
        function ws_connect() {
            ws = new WebSocket(uri);
            ws.onopen = function (e) {
                console.log(e);
            };
            ws.onclose = function (e) {
                console.log(e);
                setTimeout(ws_connect, 1000);
            };
            ws.onmessage = function (e) {
                //console.log(e.data);
                out.html("<p>" + e.data + "</p>");

            };
            ws.onerror = function (e) {
                console.log(e);
                ws.close();
            };
        }
        ws_connect();

    });
</script>