Add SSE event example

This commit is contained in:
Mathieu Carbou
2024-09-04 11:31:52 +02:00
parent c0ba0555ee
commit 5f26351296
2 changed files with 57 additions and 3 deletions

View File

@@ -25,8 +25,39 @@
#include <LittleFS.h> #include <LittleFS.h>
AsyncWebServer server(80); AsyncWebServer server(80);
AsyncEventSource events("/events");
const char* PARAM_MESSAGE = "message"; const char* PARAM_MESSAGE PROGMEM = "message";
const char* SSE_HTLM PROGMEM = R"(
<!DOCTYPE html>
<html>
<head>
<title>Server-Sent Events</title>
<script>
if (!!window.EventSource) {
var source = new EventSource('/events');
source.addEventListener('open', function(e) {
console.log("Events Connected");
}, false);
source.addEventListener('error', function(e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Events Disconnected");
}
}, false);
source.addEventListener('message', function(e) {
console.log("message", e.data);
}, false);
source.addEventListener('heartbeat', function(e) {
console.log("heartbeat", e.data);
}, false);
}
</script>
</head>
<body>
<h1>Open your browser console!</h1>
</body>
</html>
)";
void notFound(AsyncWebServerRequest* request) { void notFound(AsyncWebServerRequest* request) {
request->send(404, "text/plain", "Not found"); request->send(404, "text/plain", "Not found");
@@ -153,6 +184,18 @@ void setup() {
request->send(response); request->send(response);
}); });
events.onConnect([](AsyncEventSourceClient* client) {
if (client->lastId()) {
Serial.printf("SSE Client reconnected! Last message ID that it gat is: %" PRIu32 "\n", client->lastId());
}
client->send("hello!", NULL, millis(), 1000);
});
server.on("/sse", HTTP_GET, [](AsyncWebServerRequest* request) {
request->send(200, "text/html", SSE_HTLM);
});
server.addHandler(&events);
server.addHandler(jsonHandler); server.addHandler(jsonHandler);
server.addHandler(msgPackHandler); server.addHandler(msgPackHandler);
@@ -161,5 +204,12 @@ void setup() {
server.begin(); server.begin();
} }
uint32_t lastSSE = 0;
void loop() { void loop() {
uint32_t now = millis();
if (now - lastSSE > 2000) {
events.send(String("ping-") + now, "heartbeat", now);
lastSSE = millis();
}
} }

View File

@@ -91,6 +91,8 @@ class AsyncEventSourceClient {
AsyncClient* client() { return _client; } AsyncClient* client() { return _client; }
void close(); void close();
void write(const char* message, size_t len); void write(const char* message, size_t len);
void send(const String& message, const String& event, uint32_t id = 0, uint32_t reconnect = 0) { send(message.c_str(), event.c_str(), id, reconnect); }
void send(const String& message, const char* event, uint32_t id = 0, uint32_t reconnect = 0) { send(message.c_str(), event, id, reconnect); }
void send(const char* message, const char* event = NULL, uint32_t id = 0, uint32_t reconnect = 0); void send(const char* message, const char* event = NULL, uint32_t id = 0, uint32_t reconnect = 0);
bool connected() const { return (_client != NULL) && _client->connected(); } bool connected() const { return (_client != NULL) && _client->connected(); }
uint32_t lastId() const { return _lastId; } uint32_t lastId() const { return _lastId; }
@@ -123,6 +125,8 @@ class AsyncEventSource : public AsyncWebHandler {
void close(); void close();
void onConnect(ArEventHandlerFunction cb); void onConnect(ArEventHandlerFunction cb);
void authorizeConnect(ArAuthorizeConnectHandler cb); void authorizeConnect(ArAuthorizeConnectHandler cb);
void send(const String& message, const String& event, uint32_t id = 0, uint32_t reconnect = 0) { send(message.c_str(), event.c_str(), id, reconnect); }
void send(const String& message, const char* event, uint32_t id = 0, uint32_t reconnect = 0) { send(message.c_str(), event, id, reconnect); }
void send(const char* message, const char* event = NULL, uint32_t id = 0, uint32_t reconnect = 0); void send(const char* message, const char* event = NULL, uint32_t id = 0, uint32_t reconnect = 0);
// number of clients connected // number of clients connected
size_t count() const; size_t count() const;