⚡ عدد زنده با WebSocket

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

سطح: چالشی ⭐⭐⭐ · مود: آردوینو (سه‌بعدی + کد)

قطعات لازم

کد کامل پروژه

// 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
  }
}

چطور اجرایش کنم؟

شبیه‌ساز تینکرکد فارسی را باز کن و «مود آردوینو» را انتخاب کن.
از پنل «نمونه‌ها»، «عدد زنده با WebSocket» را بارگذاری کن — مدار و کد با هم می‌آیند.
دکمه‌ی اجرا ▶ را بزن و خروجی Serial و رفتار قطعات را تماشا کن.
حالا کد را تغییر بده — عددها، پین‌ها، ترتیب — و دوباره اجرا کن!

این پروژه را رایگان در شبیه‌ساز اجرا کن 🤖