30105-2012-อินเทอร์เน็ตของสรรพสิ่ง

เชื่อมต่อโลกเว็บ – การส่งข้อมูลด้วย HTTP Request (GET/POST)

นที ศรีนะ

สวัสดีครับนักศึกษาทุกคน ในบทที่แล้วเราอ่านค่าอุณหภูมิจาก DHT11 ได้แล้ว และต่อ WiFi ได้แล้ว คำถามคือ “เราจะส่งค่าอุณหภูมินี้ไปให้คนอื่นดูบนเว็บได้อย่างไร?”

คำตอบคือ เราต้องใช้วิธีการสื่อสารมาตรฐานที่เรียกว่า HTTP (Hypertext Transfer Protocol) ซึ่งเป็นโปรโตคอลเดียวกับที่เราใช้เปิดเว็บ Google หรือ Facebook นั่นแหละครับ ในบทนี้เราจะแปลงร่าง ESP32 ของเราให้ทำหน้าที่เหมือน Web Browser (Client) เพื่อส่งข้อมูลไปเคาะประตูบ้าน Server ครับ

1. หลักการทำงานของ HTTP: Client & Server

ในการสื่อสารบนเว็บ จะมีผู้เล่น 2 ฝั่งเสมอ:

  1. Client (ผู้ขอ): ในที่นี้คือบอร์ด ESP32 ของเรา ทำหน้าที่ส่งคำสั่ง (Request) ไปหา Server
  2. Server (ผู้ให้บริการ): คือเครื่องคอมพิวเตอร์ปลายทางที่รอรับข้อมูลและตอบกลับ (Response)

วิธีการส่งข้อมูล (Method) ที่ควรรู้จัก:

  • GET: เป็นการ “ขอข้อมูล” หรือ “ส่งข้อมูลผ่าน URL” (เหมือนเวลาเราเข้าเว็บแล้วเห็น ?id=123 ต่อท้าย) -> ง่ายและนิยมใช้ที่สุดสำหรับการเรียนรู้
  • POST: เป็นการ “ส่งข้อมูลเข้าไปฝัง” โดยแนบไปกับตัวซองจดหมาย (Body) -> ปลอดภัยและส่งข้อมูลได้เยอะกว่า

2. เครื่องมือทดสอบ: Webhook.site

ก่อนจะเขียนโค้ด เราต้องมี “Server ปลายทาง” ไว้รับข้อมูลก่อน สำหรับการเรียนรู้ ผมแนะนำเว็บ Webhook.site ครับ (ฟรีและไม่ต้องสมัครสมาชิก)

  1. เข้าไปที่ webhook.site
  2. คุณจะได้รับ Your unique URL (เช่น https://webhook.site/abcdef-1234-....)
  3. ให้ Copy URL นี้เก็บไว้ นี่คือที่อยู่บ้านของ Server เราครับ
  4. เปิดหน้านี้ค้างไว้ เมื่อ ESP32 ส่งข้อมูลมา มันจะเด้งขึ้นมาให้เห็นทันที!

3. ไลบรารี HTTPClient.h

โชคดีมากที่ ESP32 มีไลบรารี HTTPClient.h มาให้ ทำให้เราเขียนโค้ดแค่ไม่กี่บรรทัดก็ส่งข้อมูลได้แล้วครับ

โครงสร้างคำสั่ง:

  1. http.begin(url): ระบุปลายทาง
  2. http.GET(): สั่งส่งข้อมูล
  3. http.getString(): อ่านคำตอบจาก Server
  4. http.end(): วางสาย

4. ปฏิบัติการ: ส่งค่าอุณหภูมิ (จำลอง) ขึ้น Server

เราจะเขียนโปรแกรมให้ ESP32 เชื่อมต่อ WiFi แล้วส่งค่าตัวเลขสุ่ม (จำลองเป็นอุณหภูมิ) ไปที่ Webhook.site ทุกๆ 5 วินาที

โค้ดโปรแกรม:

C++
#include <WiFi.h>
#include <HTTPClient.h> // เรียกใช้ไลบรารีสำหรับยิง HTTP

const char* ssid = "YOUR_WIFI_NAME";
const char* password = "YOUR_WIFI_PASS";

// ** นำ URL ที่ได้จาก Webhook.site มาใส่ตรงนี้ **
const String serverUrl = "https://webhook.site/xxxx-xxxx-xxxx-xxxx"; 

void setup() {
  Serial.begin(115200);

  // เชื่อมต่อ WiFi
  WiFi.begin(ssid, password);
  Serial.print("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi Connected!");
}

void loop() {
  // ตรวจสอบว่าเน็ตยังต่ออยู่ไหม
  if(WiFi.status() == WL_CONNECTED) {
    
    HTTPClient http; // สร้าง Object ชื่อ http

    // สมมติค่าอุณหภูมิ (ในงานจริงให้เอาค่าจาก dht.readTemperature() มาใส่)
    float temperature = random(2000, 4000) / 100.0; // สุ่มเลข 20.00 - 40.00
    
    // สร้าง URL พร้อมแนบข้อมูล (Query String)
    // รูปแบบ: url?temp=25.50
    String url = serverUrl + "?temp=" + String(temperature);

    Serial.print("Sending Request to: ");
    Serial.println(url);

    // เริ่มการเชื่อมต่อ
    http.begin(url);
    
    // สั่งยิง GET Request
    int httpResponseCode = http.GET();

    // เช็คว่าส่งผ่านไหม (ถ้าผ่านจะได้ Code 200)
    if (httpResponseCode > 0) {
      Serial.print("HTTP Response code: ");
      Serial.println(httpResponseCode);
    }
    else {
      Serial.print("Error code: ");
      Serial.println(httpResponseCode);
    }
    
    // จบการทำงาน
    http.end();
  }
  
  delay(5000); // ส่งข้อมูลทุก 5 วินาที
}

5. ดูผลลัพธ์

  1. Upload โค้ดลงบอร์ด
  2. ดูที่ Serial Monitor จะเห็นข้อความ Sending Request to: ...
  3. สลับไปดูที่หน้าเว็บ Webhook.site
  4. ทางด้านซ้ายมือ จะมีรายการ Request เด้งขึ้นมาใหม่เรื่อยๆ
  5. คลิกดูรายละเอียด จะเห็นว่าในช่อง Query strings มีค่า temp ที่เราส่งไปปรากฏอยู่!

สรุปท้ายบท

ยินดีด้วยครับ! ตอนนี้นักศึกษาสามารถส่งข้อมูลจากบอร์ดราคาหลักร้อย ขึ้นไปอยู่บน Server จริงๆ บนอินเทอร์เน็ตได้แล้ว นี่คือก้าวแรกของการทำ IoT Dashboard ครับ

ข้อจำกัด: วิธี HTTP Request แบบนี้ (Request-Response) เหมาะกับการส่งข้อมูลเป็นระยะๆ (เช่น ทุก 1 นาที) แต่ไม่เหมาะกับงานที่ต้องการความไวสูงแบบ Real-time (เช่น กดปุ่มปุ๊บ ไฟติดปั๊บ) เพราะมันเสียเวลาเชื่อมต่อทุกครั้ง

ภารกิจต่อไป: ในบทหน้า เราจะมาอุดช่องโหว่นี้ด้วยโปรโตคอลที่เป็น “พระเอกตัวจริงของวงการ IoT” ซึ่งออกแบบมาให้เบา เร็ว และสื่อสารได้สองทาง นั่นคือ MQTT Protocol ครับ เตรียมตัวรู้จักกับ Broker, Topic, Publish และ Subscribe กันได้เลย!

หมายเหตุสำหรับคุณครู:

  • Webhook.site เป็นเครื่องมือการสอนที่ดีมากครับ เพราะเด็กๆ เห็นภาพทันทีว่า “Server เห็นอะไร” โดยที่เราไม่ต้องเสียเวลาไปเขียน Code ฝั่ง Server (PHP/Node.js) ให้ยุ่งยากในคาบแรกๆ
  • ในส่วนของ HTTPS (SSL) ESP32 รุ่นใหม่ๆ จัดการได้ดีครับ แต่บางครั้งถ้ายิงไม่ผ่าน อาจจะต้องมีการ Bypass Certificate แต่สำหรับ Webhook.site ปกติจะยิงผ่านได้เลยครับ

Related Posts