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>