⚡ درس 87: به‌روزرسانی زنده با WebSocket

به جای پرسیدن مدام، برد خودش هر ثانیه عدد تازه را به صفحه می‌فرستد.

سطح: پیشرفته · زمان: حدود 20 دقیقه · مفاهیم: WebSocket، Async، زنده

قدم‌های این درس

1. چرا WebSocket؟
2. قدم ۱ — مدار
3. قدم ۲ — فرستادن هر ثانیه
4. اشتباه رایج — delay و فراموش کردن addHandler
5. چالش

نمونه‌ای از کد این درس

// ESP32 + WebSocket: push the knob value to the page every second.
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

const int POT = 34;
AsyncWebServer server(80);
AsyncWebSocket ws("/ws");
unsigned long lastPush = 0;

const char index_html[] PROGMEM = R"rawliteral(<!DOCTYPE html><html>
<body style="font-family:sans-serif;text-align:center">
<h2>Live knob</h2><p style="font-size:48px" id="v">...</p>
<script>
var s = new WebSocket("ws://" + location.host + "/ws");
s.onmessage = function (e) { document.getElementById("v").innerText = e.data + " %"; };
</script></body></html>
)rawliteral";

void onEvent(AsyncWebSocket *server, AsyncWebSocketClient *client, AwsEventType type,
             void *arg, uint8_t *data, size_t len) {
  if (type == WS_EVT_CONNECT) Serial.printf("page #%u connected\n", client->id());
  if (type == WS_EVT_DISCONNECT) Serial.printf("page #%u left\n", client->id());
}

void setup() {
  Serial.begin(115200);
  WiFi.begin("MyHome", "YOUR_PASSWORD");
  while (WiFi.status() != WL_CONNECTED) delay(200);
  Serial.println(WiFi.localIP());
  ws.onEvent(onEvent);
  server.addHandler(&ws);
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/html", index_html);
  });
  server.begin();
}

void loop() {
  ws.cleanupClients();
  if (millis() - lastPush >= 1000) {    // once a second, no delay()
    lastPush = millis();
    int percent = map(analogRead(POT), 0, 4095, 0, 100);
    ws.textAll(String(percent));        // to EVERY open page
  }
}

چرا این درس؟

دوره‌ی تینکرکد فارسی تعاملی است: هر قدم را خودت داخل شبیه‌ساز انجام می‌دهی — مدار واقعی می‌چینی، کد واقعی اجرا می‌کنی و نتیجه را همان لحظه می‌بینی. این درس روی درس‌های قبلی ساخته شده، پس اگر تازه شروع کرده‌ای از درس ۱ بیا!

درس‌های دیگر دوره