ESP8266 SSE javascript przykład kodu w arduino
/ – strona z kodem JS;/events – strumień SSE. EventSource). event: <nazwa>
data: <payload>
id: <opcjonalny_ID>
\nhttp://arduino.esp8266.com/stable/package_esp8266com_index.json. #include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
const char* ssid = "Twoja_SSID";
const char* password = "Twoje_HASLO";
AsyncWebServer server(80);
AsyncEventSource events("/events"); // endpoint SSE
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE html><html lang="pl">
<head><meta charset="utf-8"><title>ESP8266 SSE</title>
<style>
body{font-family:Arial;text-align:center;margin-top:40px;background:#f0f0f0}
.card{display:inline-block;background:#fff;padding:30px 50px;border-radius:12px;
box-shadow:0 4px 12px rgba(0,0,0,.1)}
#temp,#hum{font-size:3rem;color:#007BFF}
</style></head>
<body>
<h1>Dane z ESP8266 (SSE)</h1>
<div class="card">
<p>Temperatura: <span id="temp">--.-</span> °C</p>
<p>Wilgotność: <span id="hum">--.-</span> %</p>
<p>Status: <span id="status" style="color:#888">Łączenie…</span></p>
</div>
<script>
if (!!window.EventSource) {
const src = new EventSource('/events');
src.onopen = _=>document.getElementById('status').textContent = 'Połączono';
src.onerror = _=>document.getElementById('status').textContent = 'Rozłączono';
src.addEventListener('sensor', e=>{
const d = JSON.parse(e.data);
document.getElementById('temp').textContent = d.t.toFixed(1);
document.getElementById('hum').textContent = d.h.toFixed(1);
});
} else { alert("Przeglądarka nie wspiera SSE"); }
</script></body></html>
)rawliteral";
float temp=24.0, hum=55.0; // przykładowe dane
unsigned long lastSent=0;
void setup() {
Serial.begin(115200);
WiFi.begin(ssid,password);
while (WiFi.status()!=WL_CONNECTED) { delay(500); Serial.print('.'); }
Serial.println("\nIP: "+WiFi.localIP().toString());
// strony
server.on("/", HTTP_GET, [](AsyncWebServerRequest *r){ r->send_P(200,"text/html",index_html); });
// callback po podłączeniu nowego klienta SSE
events.onConnect([](AsyncEventSourceClient *c){
Serial.printf("Nowy klient SSE: %s\n", c->remoteIP().toString().c_str());
c->send("connected", NULL, millis(), 1000);
});
server.addHandler(&events);
server.begin();
}
void loop() {
// symulacja zmiany wartości co 2 s
if (millis()-lastSent>2000){
temp += random(-3,4)/10.0;
hum += random(-5,6)/10.0;
temp = constrain(temp,0,50); hum = constrain(hum,0,100);
// pakiet JSON ⇒ mniejszy narzut po stronie klienta
String payload = "{\"t\":"+String(temp,1)+",\"h\":"+String(hum,1)+"}";
events.send(payload.c_str(),"sensor",millis());
lastSent = millis();
}
}Kluczowe elementy:
• AsyncEventSource events("/events"); ‑ deklaruje endpoint SSE.
• events.send(payload, "sensor", id); ‑ wysyła zdarzenie o nazwie sensor.
• index_html osadzony w PROGMEM, aby oszczędzić RAM.
Jeżeli zależy Ci na absolutnym minimum lub nie możesz dodać bibliotek, użyj klasycznego WiFiServer. (Patrz sekcja „Kod minimum” w załączniku). W praktyce przy >1 kliencie lub dłuższym stanie online asynchroniczna biblioteka jest bezpieczniejsza (mniejsze ryzyko watchdog-reset).
Każde zdarzenie SSE składa się z co najmniej jednej linii data: i musi się kończyć pustą linią (\n\n). Dopuszczalne atrybuty:
• id: – identyfikator umożliwiający wznowienie po utracie połączenia;
• event: – nazwana kategoria (klient rejestruje addEventListener("nazwazdarzenia", …));
• retry: – sugestia czasu ponownego łączenia w ms.
Content-Length: unknown lub brak nagłówka; ważne, aby NIE zamykać gniazda, dopóki chcemy streamować. id: pozwala na kontynuację bez utraty elementów. /events. \n\n oraz Content-Type: text/event-stream. WiFi.setSleepMode(WIFI_NONE_SLEEP);, gdy obserwujesz zrywanie po 3 min. ESPAsyncWebServer-esphome lub joshmossman/ESPAsyncWebServer. Server-Sent Events to najlżejszy sposób „live-streamu” danych z ESP8266 do przeglądarki. Wystarczy:
/events z nagłówkiem text/event-stream, events.send() w pętli, EventSource po stronie JS.\n\n) gwarantuje natychmiastowe, automatycznie odnawiane dostarczanie danych przy minimalnym zużyciu zasobów układu.