ESP8266 server AP na socket-ach z stroną html odbierającą echo przykładowy kod
Kluczowe punkty
• Biblioteki z pakietu Arduino-ESP8266 (bez zewnętrznych zależności) – wystarczy <ESP8266WiFi.h>, <ESP8266WebServer.h>, <WebSocketsServer.h>.
• Połączenie dla klienta: dołącz do SSID, otwórz w przeglądarce http://192.168.4.1 i używaj pola tekstowego.
1.1. WebSocket (RFC 6455) utrzymuje ciągłe połączenie TCP ➔ minimalny narzut i natychmiastowa odpowiedź echa, bez odświeżania strony (jak w przypadku POST/GET).
1.2. ESP8266 bez problemu obsłuży kilka równoczesnych klientów – biblioteka WebSocketsServer kolejkuje zdarzenia.
1.3. Alternatywy
• HTTP POST – proste, lecz odświeża stronę ↗ latencja.
• Surowy TCP (WiFiServer) – wymaga osobnej aplikacji klienckiej; w przeglądarce nie działa.
/* ESP8266 (NodeMCU, Wemos D1 mini, itp.)
* Tryb: Soft-AP + WebSocket Echo
* Biblioteki: wbudowane w pakiet arduino-esp8266
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
const char* ssid = "ESP8266_ECHO_AP"; // min. 8 znaków
const char* password = "12345678";
ESP8266WebServer server(80); // HTTP
WebSocketsServer wsServer(81); // WebSocket
/* ---------- Strona HTML w Flash (PROGMEM) ---------- */
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>ESP8266 WebSocket Echo</title>
<style>
body{font-family:Arial;text-align:center;margin-top:50px;}
#log{border:1px solid #ccc;height:200px;width:90%;margin:10px auto;overflow-y:auto;white-space:pre-wrap;}
input{padding:8px;width:60%;}
button{padding:8px 15px;}
</style></head><body>
<h2>ESP8266 WebSocket Echo</h2>
<div>
<input id="msg" placeholder="Wpisz tekst…">
<button onclick="send()">Wyślij</button>
</div>
<div id="log"></div>
<script>
let ws, log=document.getElementById('log');
function print(t){log.textContent+=t+"\\n";log.scrollTop=log.scrollHeight;}
function connect(){
ws=new WebSocket('ws://'+location.hostname+':81/');
ws.onopen = _=>print('[połączono]');
ws.onclose= _=>{print('[rozłączono]');setTimeout(connect,2000);}
ws.onmessage=e=>print('echo: '+e.data);
}
function send(){
let v=document.getElementById('msg').value;
if(v && ws.readyState===1){ws.send(v);print('ja: '+v);document.getElementById('msg').value='';}
}
window.onload=connect;
</script></body></html>
)rawliteral";
/* ---------- Obsługa WebSocket ---------- */
void onWsEvent(uint8_t id, WStype_t type, uint8_t * payload, size_t len){
if(type==WStype_TEXT){
// Odesłanie dokładnie tego co przyszło (echo)
wsServer.sendTXT(id, payload, len);
}
}
/* ---------- SETUP ---------- */
void setup(){
Serial.begin(115200);
WiFi.mode(WIFI_AP);
WiFi.softAP(ssid, password);
Serial.print("Soft-AP IP: "); Serial.println(WiFi.softAPIP());
// HTTP root -> strona
server.on("/", [](){ server.send_P(200,"text/html", index_html); });
server.begin();
wsServer.begin();
wsServer.onEvent(onWsEvent);
Serial.println("HTTP 80 i WS 81 uruchomione.");
}
/* ---------- LOOP ---------- */
void loop(){
server.handleClient();
wsServer.loop(); // obsługa ramek
}Po wgraniu:
PROGMEM umieszcza HTML w pamięci Flash → oszczędność 40-50 kB RAM. • Pliki statyczne (HTML/CSS/JS) w LittleFS/SPIFFS – wygodniejsze przy większych projektach.
• Zabezpieczenie hasłem WebSocket-ów (np. nagłówek cookie / token w URL).
• HTTPS w trybie AP nie ma sensu (samopodpisany certyfikat = błąd w przeglądarce).
• Wysyłanie sensorów: zamień echo na JSON z danymi pomiarowymi, a po stronie JS zaktualizuj DOM.
WiFi.setSleepMode(WIFI_NONE_SLEEP) i wydłuż watchdog feed. WiFi.softAP() – brak pamięci ➔ restart. Przedstawiony kod tworzy całkowicie samodzielną sieć Wi-Fi z interaktywną stroną WWW. Dzięki WebSocket-om uzyskujemy natychmiastowe echo przy minimalnym narzucie zasobów. Rozwiązanie jest proste do wdrożenia, a jednocześnie stanowi solidną bazę do dalszych, bardziej złożonych projektów IoT.