บทความ: สร้างระบบสื่อสารแบบเรียลไทม์กับ Arduino Uno R4 WiFi ด้วย WebSocket

/*
 * Arduino Uno R4 WiFi - Basic WebSocket Example
 * ตัวอย่างพื้นฐานการใช้งาน WebSocket Server
 */

#include <WiFi.h>
#include <WebSocketsServer.h>

// ตั้งค่า WiFi
const char* ssid = "YOUR_WIFI_SSID";        // แทนที่ด้วยชื่อ WiFi ของคุณ
const char* password = "YOUR_WIFI_PASSWORD"; // แทนที่ด้วยรหัส WiFi ของคุณ

// สร้าง WebSocket Server ที่พอร์ต 81
WebSocketsServer webSocket = WebSocketsServer(81);

// ฟังก์ชันจัดการเหตุการณ์ WebSocket
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch(type) {
    case WStype_DISCONNECTED:             // เมื่อ Client ตัดการเชื่อมต่อ
      Serial.printf("[%u] Disconnected!\n", num);
      break;

    case WStype_CONNECTED:                // เมื่อ Client เชื่อมต่อสำเร็จ
      {
        IPAddress ip = webSocket.remoteIP(num);
        Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);

        // ส่งข้อความต้อนรับไปยัง Client
        webSocket.sendTXT(num, "Hello from Arduino Uno R4 WiFi! 🤖");
      }
      break;

    case WStype_TEXT:                     // เมื่อได้รับข้อความจาก Client
      Serial.printf("[%u] Received text: %s\n", num, payload);

      // ส่งข้อความกลับไปยัง Client (Echo)
      webSocket.sendTXT(num, "Echo: " + String((char*)payload));
      break;

    case WStype_BIN:                      // เมื่อได้รับข้อมูล Binary
      Serial.printf("[%u] Received binary length: %u\n", num, length);
      break;
  }
}

void setup() {
  // เริ่มต้น Serial Monitor
  Serial.begin(115200);
  Serial.println("\n\n🚀 Arduino Uno R4 WiFi - WebSocket Server");

  // เชื่อมต่อ WiFi
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");

  while(WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\n✅ WiFi connected!");
  Serial.print("📡 IP Address: ");
  Serial.println(WiFi.localIP());

  // เริ่มต้น WebSocket Server
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);      // ลงทะเบียนฟังก์ชันจัดการ Event

  Serial.println("🌐 WebSocket Server started on port 81");
  Serial.println("Ready to connect! 🎯");
}

void loop() {
  // ต้องเรียก webSocket.loop() อยู่ใน loop() เสมอ
  webSocket.loop();
}

// แทนที่ด้วย IP Address ของ Arduino ของคุณ
const arduinoIP = "192.168.1.100";  // เปลี่ยนตาม IP ที่แสดงใน Serial Monitor

// เชื่อมต่อ WebSocket
const ws = new WebSocket(`ws://${arduinoIP}:81/`);

// เมื่อเชื่อมต่อสำเร็จ
ws.onopen = function() {
  console.log('✅ Connected to Arduino Uno R4 WiFi!');

  // ส่งข้อความไปยัง Arduino
  ws.send('Hello from Browser! 🌐');
};

// เมื่อได้รับข้อความจาก Arduino
ws.onmessage = function(event) {
  console.log('📩 Received:', event.data);
};

// เมื่อตัดการเชื่อมต่อ
ws.onclose = function() {
  console.log('❌ Disconnected from Arduino');
};

// เมื่อเกิดข้อผิดพลาด
ws.onerror = function(error) {
  console.log('❌ WebSocket Error:', error);
};

/*
 * Arduino Uno R4 WiFi - Real-Time IoT Dashboard
 * ส่งข้อมูลเซ็นเซอร์แบบ Real-Time ผ่าน WebSocket
 */

#include <WiFi.h>
#include <WebSocketsServer.h>

const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

WebSocketsServer webSocket = WebSocketsServer(81);

// จำลองข้อมูลเซ็นเซอร์
float temperature = 25.0;
float humidity = 60.0;
int light = 500;
bool ledState = false;

unsigned long lastTime = 0;
const long interval = 1000;  // ส่งข้อมูลทุกๆ 1 วินาที

void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length) {
  switch(type) {
    case WStype_CONNECTED:
      Serial.printf("[%u] Dashboard connected\n", num);
      // ส่งข้อมูลเซ็นเซอร์ครั้งแรก
      sendSensorData(num);
      break;

    case WStype_TEXT:
      // รับคำสั่งจาก Dashboard
      String command = String((char*)payload);
      Serial.printf("Received command: %s\n", command.c_str());

      if(command == "LED_ON") {
        ledState = true;
        digitalWrite(LED_BUILTIN, HIGH);
        webSocket.sendTXT(num, "LED turned ON 💡");
      }
      else if(command == "LED_OFF") {
        ledState = false;
        digitalWrite(LED_BUILTIN, LOW);
        webSocket.sendTXT(num, "LED turned OFF 🌑");
      }
      else if(command == "GET_DATA") {
        sendSensorData(num);
      }
      break;
  }
}

// ฟังก์ชันส่งข้อมูลเซ็นเซอร์
void sendSensorData(uint8_t num) {
  // สร้าง JSON String
  String json = "{";
  json += "\"temperature\":" + String(temperature, 1) + ",";
  json += "\"humidity\":" + String(humidity, 1) + ",";
  json += "\"light\":" + String(light) + ",";
  json += "\"ledState\":" + String(ledState ? "true" : "false");
  json += "}";

  webSocket.sendTXT(num, json);
}

// ฟังก์ชันอัปเดตค่าเซ็นเซอร์ (จำลอง)
void updateSensors() {
  // จำลองการเปลี่ยนแปลงของเซ็นเซอร์
  temperature += random(-5, 6) / 10.0;  // เพิ่ม/ลด 0.5 องศา
  humidity += random(-10, 11) / 10.0;   // เพิ่ม/ลด 1%
  light += random(-50, 51);              // เพิ่ม/ลด 50

  // จำกัดค่าไม่ให้เกินขอบเขต
  temperature = constrain(temperature, 10, 40);
  humidity = constrain(humidity, 20, 90);
  light = constrain(light, 0, 1023);
}

void setup() {
  Serial.begin(115200);
  pinMode(LED_BUILTIN, OUTPUT);

  // เชื่อมต่อ WiFi
  WiFi.begin(ssid, password);
  while(WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\n✅ WiFi connected");
  Serial.print("IP: ");
  Serial.println(WiFi.localIP());

  // เริ่มต้น WebSocket Server
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);

  Serial.println("🌐 WebSocket Server ready");
}

void loop() {
  webSocket.loop();

  // ส่งข้อมูลเซ็นเซอร์ทุกๆ 1 วินาที
  unsigned long currentTime = millis();
  if(currentTime - lastTime >= interval) {
    lastTime = currentTime;
    updateSensors();

    // ส่งข้อมูลไปยังทุก Client ที่เชื่อมต่อ
    webSocket.broadcastTXT("{\"temperature\":" + String(temperature, 1) +
                              ",\"humidity\":" + String(humidity, 1) +
                              ",\"light\":" + String(light) +
                              ",\"ledState\":" + String(ledState ? "true" : "false") + "}");
  }
}

<!DOCTYPE html>
<html>
<head>
  <title>Arduino Uno R4 WiFi - Real-Time Dashboard</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    .sensor-card { background: #f0f0f0; padding: 20px; margin: 10px 0; border-radius: 8px; }
    .value { font-size: 2em; font-weight: bold; color: #2196F3; }
    .button { background: #4CAF50; color: white; padding: 15px 30px; border: none;
              border-radius: 8px; cursor: pointer; font-size: 1.1em; }
    .button.off { background: #f44336; }
  </style>
</head>
<body>
  <h1>🤖 Arduino Uno R4 WiFi Dashboard</h1>

  <div class="sensor-card">
    <h3>🌡️ อุณหภูมิ</h3>
    <div class="value" id="temp">--</div>
  </div>

  <div class="sensor-card">
    <h3>💧 ความชื้น</h3>
    <div class="value" id="humid">--</div>
  </div>

  <div class="sensor-card">
    <h3>💡 แสง</h3>
    <div class="value" id="light">--</div>
  </div>

  <div class="sensor-card">
    <h3>🔆 ควบคุม LED</h3>
    <button class="button" id="ledBtn" onclick="toggleLED()">เปิด LED</button>
  </div>

  <script>
    // แทนที่ด้วย IP ของ Arduino คุณ
    const arduinoIP = "192.168.1.100";
    const ws = new WebSocket(`ws://${arduinoIP}:81/`);
    let ledOn = false;

    ws.onmessage = function(event) {
      const data = JSON.parse(event.data);
      document.getElementById('temp').innerText = data.temperature + '°C';
      document.getElementById('humid').innerText = data.humidity + '%';
      document.getElementById('light').innerText = data.light;
      ledOn = data.ledState;
      updateLedButton();
    };

    function toggleLED() {
      const cmd = ledOn ? 'LED_OFF' : 'LED_ON';
      ws.send(cmd);
    }

    function updateLedButton() {
      const btn = document.getElementById('ledBtn');
      if(ledOn) {
        btn.innerText = 'ปิด LED';
        btn.classList.add('off');
      } else {
        btn.innerText = 'เปิด LED';
        btn.classList.remove('off');
      }
    }
  </script>
</body>
</html>