WebSocket with the ESP32: the LED that follows the slider

In the weather station from guide no. 56 the browser asked for the data every 5 seconds. To control something you need more: move the slider on your phone and the LED changes immediately; and if another phone is connected, it sees its slider move by itself. That is the job of WebSockets.

// A slider on the web page sets the LED brightness. With WebSockets the value arrives at once
// and all the connected phones see the slider move together.
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

const char* NETWORK = "your-network-name";
const char* PASSWORD = "your-network-password";
const int LED = 2;
int brightness = 0;                  // from 0 to 255

AsyncWebServer server(80);
AsyncWebSocket ws("/ws");

const char PAGE[] PROGMEM = R"rawliteral(
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>LED</title><style>body{font-family:sans-serif;text-align:center;margin:24px}input{width:90%}b{font-size:40px;color:#1f7a3a}</style>
</head><body><h1>LED brightness</h1><b id="v">0</b><br><br>
<input type="range" id="c" min="0" max="255" value="0">
<script>
const ws = new WebSocket('ws://' + location.host + '/ws');
const c = document.getElementById('c'), v = document.getElementById('v');
c.oninput = () => ws.send(c.value);
ws.onmessage = e => { c.value = e.data; v.textContent = e.data; };
</script></body></html>
)rawliteral";

void wsEvent(AsyncWebSocket* s, AsyncWebSocketClient* client, AwsEventType type, void* arg, uint8_t* data, size_t length) {
  if (type == WS_EVT_CONNECT) {
    client->text(String(brightness));              // whoever arrives sees the current value right away
  } else if (type == WS_EVT_DATA) {
    AwsFrameInfo* info = (AwsFrameInfo*)arg;
    if (info->final && info->index == 0 && info->len == length && info->opcode == WS_TEXT) {   // a complete text message
      String text;
      for (size_t i = 0; i < length; i++) text += (char)data[i];
      brightness = constrain(text.toInt(), 0, 255);
      analogWrite(LED, brightness);
      ws.textAll(String(brightness));              // tells everyone connected
    }
  }
}

void setup() {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(NETWORK, PASSWORD);
  while (WiFi.status() != WL_CONNECTED) delay(500);
  Serial.print("Open http://");
  Serial.println(WiFi.localIP());
  ws.onEvent(wsEvent);
  server.addHandler(&ws);
  server.on("/", HTTP_GET, [](AsyncWebServerRequest* r) { r->send(200, "text/html", PAGE); });
  server.begin();
}

void loop() {
  ws.cleanupClients();     // closes the connections the browser left half-open
  delay(10);
}