ESP8266 NodeMCU WebSocket сервер: отображение показаний датчиков
В этом руководстве вы узнаете, как создать WebSocket-сервер на плате ESP8266 NodeMCU для отображения показаний датчиков на веб-странице. Всякий раз, когда у ESP8266 появляются новые показания, веб-страница автоматически обновляется без необходимости вручную обновлять её.
Чтобы узнать больше о создании веб-серверов на ESP32 и ESP8266 с нуля, ознакомьтесь с нашей электронной книгой: Build Web Servers with the ESP32 and ESP8266.
Содержание
В этом руководстве мы рассмотрим следующие основные темы:
У нас есть аналогичное руководство для платы ESP32: ESP32 WebSocket Server: Display Sensor Readings.
Введение в протокол WebSocket
WebSocket – это постоянное соединение между клиентом и сервером, которое обеспечивает двунаправленную связь между обеими сторонами с использованием TCP-соединения. Это означает, что вы можете отправлять данные от клиента к серверу и от сервера к клиенту в любой момент времени.
Клиент устанавливает WebSocket-соединение с сервером через процесс, известный как рукопожатие WebSocket (WebSocket handshake). Рукопожатие начинается с HTTP-запроса/ответа, что позволяет серверам обрабатывать HTTP-соединения и WebSocket-соединения на одном и том же порту. Как только соединение установлено, клиент и сервер могут обмениваться данными WebSocket в режиме полного дуплекса.
С помощью протокола WebSocket сервер (плата ESP8266) может отправлять информацию клиенту или всем клиентам без запроса. Это также позволяет нам отправлять информацию в веб-браузер при возникновении изменения.
Это изменение может быть чем-то, что произошло на веб-странице (вы нажали кнопку), или чем-то, что произошло на стороне ESP8266, например, нажатие физической кнопки в цепи или появление новых показаний датчиков.
Узнайте, как управлять выходами ESP8266 через протокол WebSocket: ESP8266 WebSocket Server: Control Outputs (Arduino IDE).
Обзор проекта
Вот веб-страница, которую мы создадим для этого проекта.
Мы создадим веб-страницу, которая отображает температуру, влажность и давление.
Веб-страница показывает последние показания датчиков, когда вы открываете или обновляете её.
Показания датчиков обновляются автоматически всякий раз, когда на ESP8266 появляется новое показание, без необходимости обновлять веб-страницу.
Веб-сервер отлично работает с несколькими клиентами (несколько вкладок браузера на одном устройстве или на разных устройствах).
Как это работает?
ESP размещает веб-сервер, который отображает веб-страницу с тремя карточками для показаний датчиков.
Когда вы открываете веб-страницу, она отправляет сообщение (
getReadings) в ESP по протоколу WebSocket. Сервер (ESP) получает это сообщение. Когда это происходит, он получает новые показания от датчиков и отправляет их обратно клиенту (веб-браузеру), также по протоколу WebSocket. Таким образом, при открытии новой вкладки она всегда показывает текущие и обновлённые значения.
Каждые 30 секунд ESP получает новые показания и отправляет их всем подключённым клиентам (все открытые вкладки веб-браузера) по протоколу WebSocket. Клиент получает это сообщение и отображает показания на веб-странице.
Необходимые условия
Прежде чем приступить к этому руководству, убедитесь, что вы выполнили все следующие предварительные условия.
1) Необходимые компоненты
Для выполнения этого проекта вам понадобятся:
Плата ESP8266 – ознакомьтесь с обзором и сравнением плат ESP8266
Модуль датчика BME280 – ознакомьтесь с руководством по началу работы с BME280 на ESP32
Для данного примера мы будем использовать датчик BME280, но вы можете использовать любой другой датчик, с которым вы знакомы.
Вы можете использовать ссылки выше или перейти непосредственно на MakerAdvisor.com/tools, чтобы найти все компоненты для ваших проектов по лучшей цене!
2) Arduino IDE и дополнение для плат ESP8266
Мы будем программировать ESP8266 с использованием Arduino IDE. Поэтому у вас должно быть установлено дополнение для ESP8266. Следуйте следующему руководству, если вы ещё этого не сделали:
Если вы хотите использовать VS Code с расширением PlatformIO, следуйте следующему руководству, чтобы узнать, как программировать ESP8266:
3) Плагин загрузки файловой системы
Для загрузки HTML, CSS и JavaScript файлов, необходимых для создания этого проекта, во флеш-память ESP8266 (LittleFS), мы будем использовать плагин для Arduino IDE: LittleFS Filesystem uploader. Следуйте следующему руководству для установки плагина загрузки файловой системы, если вы ещё этого не сделали:
Если вы используете VS Code с расширением PlatformIO, прочитайте следующее руководство, чтобы узнать, как загружать файлы в файловую систему:
4) Библиотеки
Для создания этого проекта вам необходимо установить следующие библиотеки:
Вы можете установить эти библиотеки с помощью менеджера библиотек Arduino. Перейдите в Sketch > Include Library > Manage Libraries и найдите названия библиотек.
Сборка схемы
Чтобы продемонстрировать, как отображать показания датчиков на веб-сервере с ESP8266, мы будем отправлять показания с датчика BME280 в браузер. Для этого вам нужно подключить датчик BME280 к вашему ESP8266. Вы также можете использовать любой другой датчик, с которым вы знакомы.
Схема подключения
Мы будем использовать связь I2C с модулем датчика BME280. Для этого подключите датчик к стандартным выводам ESP8266 SCL (GPIO 5) и SDA (GPIO 4), как показано на следующей схеме подключения.
Рекомендуемое чтение: ESP8266 Pinout Reference: Which GPIO pins should you use?
Организация файлов
Для того чтобы проект был организован и его было легче понять, мы создадим четыре файла для сборки веб-сервера:
Скетч Arduino: для получения показаний датчиков и обработки веб-сервера;
index.html: для определения содержимого веб-страницы для отображения показаний датчиков;
style.css: для стилизации веб-страницы;
script.js: для программирования поведения веб-страницы – обработка того, что происходит при открытии веб-страницы и отображения показаний, полученных по протоколу WebSocket.
Вы должны сохранить HTML, CSS и JavaScript файлы внутри папки с именем data внутри папки скетча Arduino, как показано на предыдущей диаграмме. Мы загрузим эти файлы в файловую систему ESP8266 (LittleFS).
Вы можете скачать все файлы проекта:
HTML-файл
Скопируйте следующий код в файл index.html.
<!DOCTYPE html>
<html>
<head>
<title>ESP IOT DASHBOARD</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="topnav">
<h1>SENSOR READINGS (WEBSOCKET)</h1>
</div>
<div class="content">
<div class="card-grid">
<div class="card">
<p class="card-title"> Temperature</p>
<p class="reading"><span id="temperature"></span> °C</p>
</div>
<div class="card">
<p class="card-title"> Humidity</p>
<p class="reading"><span id="humidity"></span> %</p>
</div>
<div class="card">
<p class="card-title"> Pressure</p>
<p class="reading"><span id="pressure"></span> hpa</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Мы не будем подробно рассматривать содержание HTML-файла. Рассмотрим только основные части.
Следующие строки отображают карточку для температуры.
<div class="card">
<p class="card-title"><i class="fas fa-thermometer-threequarters" style="color:#059e8a;"></i> Temperature</p>
<p class="reading"><span id="temperature"></span> °C</p>
</div>
Температура будет отображаться в следующем параграфе между тегами <span>. Обратите внимание, что вам нужен уникальный id для этого HTML-тега, чтобы позже мы знали, как обращаться к этому HTML-элементу. В данном случае уникальный id – temperature.
<span id="temperature"></span>
Мы делаем аналогичную процедуру для влажности и давления. Уникальные id для HTML-элементов, в которых мы будем отображать влажность и давление, – humidity и pressure.
<div class="card">
<p class="card-title"> Humidity</p>
<p class="reading"><span id="humidity"></span> %</p>
</div>
<div class="card">
<p class="card-title"> Pressure</p>
<p class="reading"><span id="pressure"></span> hpa</p>
</div>
CSS-файл
Скопируйте следующий код в файл style.css. Вы можете изменить его, чтобы веб-страница выглядела так, как вы хотите. Мы не будем объяснять, как работает CSS для этой веб-страницы, поскольку это не относится к данному руководству.
html {
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
.topnav {
overflow: hidden;
background-color: #0A1128;
}
body {
margin: 0;
}
.content {
padding: 50px;
}
.card-grid {
max-width: 800px;
margin: 0 auto;
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.card {
background-color: white;
box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
color: #034078;
}
.reading {
font-size: 1.2rem;
color: #1282A2;
}
JavaScript-файл
Скопируйте следующий код в файл script.js.
var gateway = `ws://${window.location.hostname}/ws`;
var websocket;
// Init web socket when the page loads
window.addEventListener('load', onload);
function onload(event) {
initWebSocket();
}
function getReadings(){
websocket.send("getReadings");
}
function initWebSocket() {
console.log('Trying to open a WebSocket connection...');
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
}
// When websocket is established, call the getReadings() function
function onOpen(event) {
console.log('Connection opened');
getReadings();
}
function onClose(event) {
console.log('Connection closed');
setTimeout(initWebSocket, 2000);
}
// Function that receives the message from the ESP8266 with the readings
function onMessage(event) {
console.log(event.data);
var myObj = JSON.parse(event.data);
var keys = Object.keys(myObj);
for (var i = 0; i < keys.length; i++){
var key = keys[i];
document.getElementById(key).innerHTML = myObj[key];
}
}
Вот список того, что делает этот код:
инициализирует WebSocket-соединение с сервером;
отправляет сообщение серверу для получения текущих показаний датчиков;
использует полученный ответ для обновления показаний датчиков на веб-странице;
обрабатывает обмен данными по протоколу WebSocket.
Давайте рассмотрим этот JavaScript-код, чтобы понять, как он работает.
Шлюз (gateway) – это точка входа в интерфейс WebSocket. window.location.hostname получает текущий адрес страницы (IP-адрес веб-сервера).
var gateway = `ws://${window.location.hostname}/ws`;
Создаём новую глобальную переменную с именем websocket.
var websocket;
Добавляем обработчик событий, который будет вызывать функцию onload при загрузке веб-страницы.
window.addEventListener('load', onload);
Функция onload() вызывает функцию initWebSocket() для инициализации WebSocket-соединения с сервером.
function onload(event) {
initWebSocket();
}
Функция initWebSocket() инициализирует WebSocket-соединение на ранее определённом шлюзе. Мы также назначаем несколько функций обратного вызова для случаев, когда WebSocket-соединение открывается, закрывается или когда получено сообщение.
function initWebSocket() {
console.log('Trying to open a WebSocket connection...');
websocket = new WebSocket(gateway);
websocket.onopen = onOpen;
websocket.onclose = onClose;
websocket.onmessage = onMessage;
}
Обратите внимание, что когда WebSocket-соединение открыто, мы вызываем функцию getReadings.
function onOpen(event) {
console.log('Connection opened');
getReadings();
}
Функция getReadings() отправляет серверу сообщение getReadings для получения текущих показаний датчиков. Затем мы должны обработать то, что происходит, когда мы получаем это сообщение на стороне сервера (ESP8266).
function getReadings(){
websocket.send("getReadings");
}
Мы обрабатываем сообщения, полученные по протоколу WebSocket, в функции onMessage().
// Function that receives the message from the ESP8266 with the readings
function onMessage(event) {
console.log(event.data);
var myObj = JSON.parse(event.data);
var keys = Object.keys(myObj);
for (var i = 0; i < keys.length; i++){
var key = keys[i];
document.getElementById(key).innerHTML = myObj[key];
}
}
Сервер отправляет показания в формате JSON, например:
{
temperature: 20;
humidity: 50;
pressure: 1023;
}
Функция onMessage() просто перебирает все значения ключей (temperature, humidity и pressure) и размещает их в соответствующих местах на HTML-странице. В данном случае ключи имеют те же имена, что и id, которые мы определили на HTML-странице. Поэтому мы можем просто сделать что-то вроде этого:
for (var i = 0; i < keys.length; i++){
var key = keys[i];
document.getElementById(key).innerHTML = myObj[key];
}
Код для ESP8266 WebSocket сервера (показания датчиков)
Скопируйте следующий код в вашу Arduino IDE.
/*********
Rui Santos
Complete instructions at https://RandomNerdTutorials.com/esp8266-nodemcu-websocket-server-sensor/
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "LittleFS.h"
#include <Arduino_JSON.h>
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Create a WebSocket object
AsyncWebSocket ws("/ws");
// Json Variable to Hold Sensor Readings
JSONVar readings;
// Timer variables
unsigned long lastTime = 0;
unsigned long timerDelay = 30000;
// Create a sensor object
Adafruit_BME280 bme; // BME280 connect to ESP32 I2C (GPIO 21 = SDA, GPIO 22 = SCL)
// Init BME280
void initBME(){
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
}
// Get Sensor Readings and return JSON object
String getSensorReadings(){
readings["temperature"] = String(bme.readTemperature());
readings["humidity"] = String(bme.readHumidity());
readings["pressure"] = String(bme.readPressure()/100.0F);
String jsonString = JSON.stringify(readings);
return jsonString;
}
// Initialize LittleFS
void initFS() {
if (!LittleFS.begin()) {
Serial.println("An error has occurred while mounting LittleFS");
}
else{
Serial.println("LittleFS mounted successfully");
}
}
// Initialize WiFi
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
void notifyClients(String sensorReadings) {
ws.textAll(sensorReadings);
}
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
//data[len] = 0;
//String message = (char*)data;
// Check if the message is "getReadings"
//if (strcmp((char*)data, "getReadings") == 0) {
//if it is, send current sensor readings
String sensorReadings = getSensorReadings();
Serial.print(sensorReadings);
notifyClients(sensorReadings);
//}
}
}
void onEvent(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:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
void initWebSocket() {
ws.onEvent(onEvent);
server.addHandler(&ws);
}
void setup() {
Serial.begin(115200);
initBME();
initWiFi();
initFS();
initWebSocket();
// Web Server Root URL
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/index.html", "text/html");
});
server.serveStatic("/", LittleFS, "/");
// Start server
server.begin();
}
void loop() {
if ((millis() - lastTime) > timerDelay) {
String sensorReadings = getSensorReadings();
Serial.print(sensorReadings);
notifyClients(sensorReadings);
lastTime = millis();
}
ws.cleanupClients();
}
Как работает код
Продолжайте чтение, чтобы узнать, как работает код, или перейдите к разделу Демонстрация.
Подключение библиотек
Библиотеки Adafruit_Sensor и Adafruit_BME280 необходимы для работы с датчиком BME280.
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>
Библиотеки ESP8266WiFi, ESPAsyncWebServer и ESPAsyncTCP используются для создания веб-сервера.
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
Мы будем сохранять HTML, CSS и JavaScript файлы в файловой системе ESP8266, поэтому нам также нужно подключить библиотеку LittleFS.h.
#include "LittleFS.h"
Для создания JSON-объектов мы будем использовать библиотеку Arduino_JSON.
#include <Arduino_JSON.h>
Сетевые учётные данные
Введите свои сетевые учётные данные в следующие переменные, чтобы ESP8266 мог подключиться к вашей локальной сети по Wi-Fi.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
AsyncWebServer и AsyncWebSocket
Создаём объект AsyncWebServer на порту 80.
AsyncWebServer server(80);
Следующая строка создаёт новый объект WebSocket на /ws.
// Create a WebSocket object
AsyncWebSocket ws("/ws");
Переменные таймера
Следующие переменные используются для создания таймеров в нашем коде. В нашем случае мы будем отправлять показания датчиков клиенту по протоколу WebSocket каждые 30000 миллисекунд (30 секунд). Вы можете изменить переменную timerDelay на любое другое значение, которое подходит для вашего проекта.
// Timer variables
unsigned long lastTime = 0;
unsigned long timerDelay = 30000;
Инициализация датчика BME280
Следующая строка создаёт объект Adafruit_BME280 для обращения к датчику с именем bme.
// Create a sensor object
Adafruit_BME280 bme;
Функция initBME() инициализирует датчик. Она будет вызвана позже в setup().
// Init BME280
void initBME(){
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
}
Получение показаний датчиков (строка JSON)
Функция getSensorReadings() создаёт строку JSON с текущими показаниями датчиков.
// Get Sensor Readings and return JSON object
String getSensorReadings(){
readings["temperature"] = String(bme.readTemperature());
readings["humidity"] = String(bme.readHumidity());
readings["pressure"] = String(bme.readPressure()/100.0F);
String jsonString = JSON.stringify(readings);
return jsonString;
}
Инициализация файловой системы
Функция initFS() инициализирует LittleFS – файловую систему ESP8266, которую мы используем в этом проекте для сохранения HTML, CSS и JavaScript файлов.
// Initialize LittleFS
void initFS() {
if (!LittleFS.begin()) {
Serial.println("An error has occurred while mounting LittleFS");
}
else{
Serial.println("LittleFS mounted successfully");
}
}
Инициализация Wi-Fi
Следующая функция инициализирует Wi-Fi и подключается к вашей сети, используя учётные данные, указанные ранее. Эта функция будет вызвана позже в setup().
// Initialize WiFi
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
Уведомление всех клиентов через WebSocket
Функция notifyClients() уведомляет всех клиентов о текущих показаниях датчиков. Вызов этой функции позволяет нам уведомлять об изменениях всех клиентов всякий раз, когда мы получаем новые показания датчиков (каждые 30 секунд).
void notifyClients(String sensorReadings) {
ws.textAll(sensorReadings);
}
Обработка сообщений WebSocket
Функция handleWebSocketMessage(), как следует из названия, обрабатывает то, что происходит, когда сервер получает сообщение от клиента по протоколу WebSocket. Мы видели в JavaScript-файле, что сервер может получить сообщение getReadings.
Когда ESP8266 получает сообщение getReadings, он отправляет текущие показания датчиков.
void handleWebSocketMessage(void *arg, uint8_t *data, size_t len) {
AwsFrameInfo *info = (AwsFrameInfo*)arg;
if (info->final && info->index == 0 && info->len == len && info->opcode == WS_TEXT) {
data[len] = 0;
String message = (char*)data;
// Check if the message is "getReadings"
if (strcmp((char*)data, "getReadings") == 0) {
// if it is, send current sensor readings
String sensorReadings = getSensorReadings();
Serial.print(sensorReadings);
notifyClients(sensorReadings);
}
}
}
Обработка событий WebSocket
Функция onEvent() обрабатывает другие события WebSocket.
void onEvent(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:
handleWebSocketMessage(arg, data, len);
break;
case WS_EVT_PONG:
case WS_EVT_ERROR:
break;
}
}
Инициализация протокола WebSocket
Функция initWebSocket() инициализирует протокол WebSocket.
void initWebSocket() {
ws.onEvent(onEvent);
server.addHandler(&ws);
}
setup()
В setup() мы инициализируем монитор последовательного порта, датчик BME280, Wi-Fi, файловую систему и протокол WebSocket, вызывая функции, которые мы создали ранее.
Serial.begin(115200);
initBME();
initWiFi();
initFS();
initWebSocket();
Следующие строки будут обслуживать index.html и другие связанные статические файлы, сохранённые в LittleFS (style.css и script.js), когда вы обращаетесь к веб-серверу.
// Web Server Root URL
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
request->send(LittleFS, "/index.html", "text/html");
});
server.serveStatic("/", LittleFS, "/");
Наконец, запускаем сервер.
// Start server
server.begin();
loop()
В loop() мы получаем и отправляем новые показания датчиков каждые 30000 миллисекунд (30 секунд).
void loop() {
if ((millis() - lastTime) > timerDelay) {
String sensorReadings = getSensorReadings();
Serial.print(sensorReadings);
notifyClients(sensorReadings);
lastTime = millis();
}
ws.cleanupClients();
}
Загрузка кода и файлов
После ввода ваших сетевых учётных данных сохраните код. Перейдите в Sketch > Show Sketch Folder и создайте папку с именем data.
Внутри этой папки вы должны разместить HTML, CSS и JavaScript файлы.
Затем загрузите код в вашу плату ESP8266. Убедитесь, что выбрана правильная плата и COM-порт. Также убедитесь, что вы добавили свои сетевые учётные данные.
После загрузки кода вам нужно загрузить файлы в файловую систему.
Нажмите [Ctrl] + [Shift] + [P] в Windows или [Cmd] + [Shift] + [P] в MacOS, чтобы открыть палитру команд. Найдите команду Upload LittleFS to Pico/ESP8266/ESP32 и нажмите на неё.
Если у вас нет этой опции, значит вы не установили плагин загрузки файловой системы. Ознакомьтесь с этим руководством.
Когда всё успешно загружено, откройте монитор последовательного порта на скорости 115200 бод. Нажмите кнопку EN/RST на ESP8266, и он должен вывести IP-адрес ESP8266.
Демонстрация
Откройте браузер в вашей локальной сети и вставьте IP-адрес ESP8266. Вы должны получить доступ к странице веб-сервера, которая отображает показания датчиков.
Показания обновляются автоматически на веб-странице каждые 30 секунд.
Вы можете иметь несколько клиентов в разных вкладках браузера или на разных устройствах, и они будут обновляться автоматически на всех клиентах.
Заключение
В этом руководстве вы узнали, как создать WebSocket-сервер на ESP8266, который обслуживает веб-страницу для отображения показаний датчиков. Показания датчиков обновляются автоматически на веб-странице без необходимости вручную обновлять её.
Мы надеемся, что вы многому научились из этого руководства. Сообщите нам в комментариях ниже, если вы успешно прошли это руководство и запустили проект.
Чтобы узнать больше о создании веб-серверов на ESP8266, мы настоятельно рекомендуем ознакомиться с нашей электронной книгой:
Узнайте больше об ESP8266 с нашими ресурсами:
Спасибо за чтение.