ทำ Web server เพื่อรับข้อมูลจาก Sensor และควบคุมอุปกรณ์ต่างๆ ตอนที่ 2 ส่งข้อมูลจากบอร์ด NodeMCU ขึ้น Web Server
บทความก่อนหน้าเราได้สร้าง Web Server และเรียนรู้การส่งข้อมูลผ่าน URL หรือลิงค์คำขอกันไปแล้ว วันนี้เราจะมาทำให้บอร์ด NodeMCU สามารถเชื่อมต่อ Wi-Fi และส่งข้อมูลไปยัง Web Server นะครับ
รูปที่ 1 บอร์ด NodeMCU เชื่อมต่อ WiFi และส่งข้อมูลไปยัง Web Server
สิ่งที่จำเป็นต้องใช้
- บอร์ด NodeMCU
- สายไมโคร USB ใช้สำหรับอัพโหลดโปรแกรม
- สัญญาน WiFi จากเร้าเตอร์คอมพิวเตอร์ หรือโทรศัพท์มือถือ
- เครื่องคอมพิวเตอร์ที่ติดตั้งโปรแกรม Xampp สำหรับให้บริการ Web Server
- ความรู้พื้นฐานการรับส่งข้อมูลผ่านหน้าเว็บจากบทความตอนที่ 1 คลิกที่นี่เพื่ออ่าน
- ความสนใจด้านโปรแกรมมิ่ง และ IoT
สิ่งที่ต้องทำความเข้าใจก่อนที่เราจะลงมือทำ
*** สำหรับใครที่มีสัญญาน Wi-Fi ที่แชร์จากเร้าเตอร์ที่บ้านหรือที่ทำงานอยู่แล้วไม่จำเป็นต้องทำตามขั้นตอนนี้ก็ได้นะครับ สามารถข้ามไปทำต่อขั้นตอนถัดไปด้านล่างได้เลย
วิธีแชร์สัญญาณ Wifi จากคอมพิวเตอร์
1. ก่อนอื่นให้เปิดหน้าต่าง Command Line ขึ้นมาก่อนนะครับ จากนั้นให้เราพิมพ์คำสั่งนี้ลงไปในหน้าต่าง Command Line
netsh wlan set hostednetwork mode=allow ssid=Name key=Password
Note: ในส่วนนี้เราสามารถที่จะเปลี่ยนชื่อและรหัส Wi-Fi ที่เราต้องการแชร์ได้ Name คือ Wi-Fi ที่เราต้องการแชร์ Password คือรหัสที่ใช้ในการเชื่อมต่อ Wi-Fi
2. พิมเสร็จก็กด Enter แล้วรอให้สร้างตัวแชร์เสร็จ จนขึ้นเคอร์เซอร์ให้ใส่คำสั่งนี้ต่อเลยนะครับ
จากนั้นก็กด Enter อีกครั้ง
3. เราต้องเข้าไปตั้งค่านิดหน่อยเพื่อให้ตัวแชร์สัญญาน Wi-Fi ที่เราสร้างขึ้นสามารถใช้งานได้
รูปที่ 2 หน้าต่างแสดงการเชื่อมต่อ
รูปที่ 3 การตั้งค่าการแชร์สัญญาน WiFi
ทำให้บอร์ด NodeMCU เชื่อมต่อสัญญาน WiFi
รูปที่ 4 บอร์ด NodeMCU เชื่อมต่อสัญญาน Wi-Fi
const char* ssid = "ชื่อ Wifi ที่ต้องการเชื่อมต่อ ";
const char* password = "รหัสผ่าน Wifi";
ให้ตรงกับชื่อและรหัส WiFi ที่เราสร้างขึ้น
หลังจากแก้ไขเสร็จเรียบร้อยให้เราอัพโหลดโปรแกรมลงบอร์ด NodeMCU จากนั้นให้เราเปิดหน้าต่าง Serial Monitor ของโปรแกรม Ariduino IDE ขึ้นมาเราจะเห็นว่าบอร์ด NodeMCU กำลังเชื่อมต่อกับสัญญาณ Wi-Fi ที่เราสร้างขึ้นมา เมื่อเชื่อมต่อได้สำเร็จก็จะแสดงหมายเลข IP Address ขึ้นมา ซึ่งหมายเลข IP Address ก็เปรียบเสมือนบ้านเลขที่ของเราใช้อ้างอิงสำหรับการรับส่งสิ่งของต่างๆ ในที่นี้ก็ใช้สำหรับอ้างอิงการรับและส่งข้อมูล
รูปที่ 4 หน้าต่าง Serial Monitor แสดงการเชื่อมต่อ Wi-Fi
ตอนนี้บอร์ด NodeMCU สามารถเชื่อมต่อสัญญาน WiFi ได้แล้ว เดี๋ยวเรามาทำให้บอร์ด NodeMCU ส่งข้อมูลคำร้องขอไปที่เซิฟเวอร์ โดยเราจะให้แนบข้อมูลที่เราต้องการส่งไปด้วย มาทำต่อกันเลยนะครับ
รูปที่ 5 บอร์ด NodeMCU ส่งข้อมูลคำร้องขอไปที่เซิฟเวอร์
ก่อนอื่นเรามาทำความเข้าใจกับคำสั่ง ที่เราต้องใช้กันก่อน... เราจะเริ่มต้นการติดต่อโดยสร้างช่องทางการเชื่อมต่อ (สร้าง socket) ไปยังพอร์ท 80 ของเซิฟเวอร์ โดยใช้คลาส WiFiServer
WiFiServer server(SERVER_PORT);
สิ่งที่เราต้องทำความรู้จักกันอีกนั่นก็คือคลาส WiFiClient ใช้สำหรับเริ่มการเชื่อมต่อไปยัง HTTP Server รวมไปถึงการร้องขอและรอตอบกลับการต่างๆ จากเซิฟเวอร์
ในการเชื่อมต่อไปยัง Web Server เราต้องกำหนดชื่อ Server หรือหมายเลข IP Address ที่เราต้องการเชื่อมต่อก่อนนะครับ สำหรับใครที่ทำตามวิธีการแชร์สัญญาน Wi-Fi จากข้างบนให้ใช้หมายเลข IP Address 192.168.137.1 ได้เลย ส่วนคนที่เชื่อมต่อกับสัญญาน Wi-Fi จากที่เร้าเตอร์บ้านหรือที่ทำงานให้เปิดหน้าต่าง Command Line แล้วตรวจสอบหมายเลข IP Address ที่เราได้รับจากการเชื่อมต่อ โดยการพิมพ์คำสั่ง ipconfig ที่หน้าต่าง Command Line เมื่อพิมพ์เสร็จก็กด Enter ที่หน้าต่าง Command Line จะแสดงหมายเลข IP Address ที่เราได้รับมาจากเร้าเตอร์ ให้เราใส่หมายเลข IP Address นั้นลงไปแทนที่ 192.168.137.1 ในคำสั่งนี้ครับ
const char* server_ip = "192.168.137.1";
ข้างล่างนี้เป็นคำร้องขอ HTTP GET โดยที่เราจะส่งข้อมูลแนบไปกับ URL ด้วยซึ่งก็คือ data1 และ data2
ฟังก์ชั่น http_request() ใช้สำหรับเชื่อมต่อและส่งคำร้องขอ HTTP request ไปยัง Web Server ถ้าพูดกันในภาษาชาวบ้านก็คือการเปิดหน้าเว็บไซต์นั่นเองครับ มาดูโค้ดโปรแกรมทั้งหมดที่เราต้องใช้กันดีกว่า ในส่วนนี้ให้ทำการก๊อปปี้และนำไปวางในโปรแกรม Arduino IDE ได้เลยนะครับ
ตอนนี้โปรแกรมพร้อมแล้ว ให้เราอัพโหลดโปรแกรมลงบอร์ด NodeMCU กันเลยครับ จากนั้นให้เราเปิดหน้าต่าง Serial Monitor ของโปรแกรม Ariduino IDE ขึ้นมาเราจะเห็นว่าตอนนี้บอร์ด NodeMCU จะรอการเชื่อมต่อ Wi-Fi พอเชื่อมต่อได้ปุ๊บ ก็จะทำการส่งข้อมูลคำร้องขอแบบด้านล่างนี้ ไปที่เครื่องเซิฟเวอร์แบบรัวๆ เลย
Note: ถ้าของใครยังไม่ขึ้นให้เช็คดูว่าเราได้เปิดบริการ Web Server ในโปรแกรม Xampp หรือยัง ที่สำคัญเราต้องปิดใช้งานไฟล์วอร์ด้วยนะครับเพราะมันจะบล็อกการเชื่อมต่อ
การแสดงผลข้อมูลบนเว็บแอพพลิเคชั่น
รูปที่ 6 นำข้อมูลที่ได้รับมาแสดงผลข้อมูลบนเว็บแอพพลิเคชั่น
เราสามารถที่จะตรวจสอบข้อมูลที่ถูกส่งมาได้ผ่านหน้าเว็บแอพพลิเคชั่น แต่ก่อนอื่นเลยเราต้องมาแก้โปรแกรมฝั่ง Web Server กันนิดหน่อยเพื่อให้สามารถรับและแสดงผลข้อมูลที่ถูกส่งมาได้ โดยให้เราเปิดไฟล์ get_data.php ที่ได้สร้างขึ้นจากบทความตอนที่ 1 จากนั้นก๊อปปี้โค้ดด้านล่างนี้ ไปวางทับโค้ดเดิมเลยนะครับ วางเสร็จแล้วให้ Save File ด้วยนะครับ
อธิบายการทำงานของโปรแกรมด้านบน เมื่อฝั่ง Web Server ได้รับข้อมูลจาก NodeMCU ก็จะบันทึกข้อมูลนั้นลงในไฟล์และทำการอ่านข้อมูลที่ถูกบันทึกมาแสดงผลบนหน้าเว็บ
ในส่วนของการตรวจสอบข้อมูลที่ถูกส่งมา ให้เราเปิดเว็บบราวเซอร์ แล้วให้เข้า URL นี้ครับ localhost/get_data.php ที่หน้าเว็บจะแสดงข้อความที่เราส่งมาซึ่งก็คือคำว่า lovecoding และหมายเลขคำร้องขอ ดังแสดงในตัวอย่างด้านล่างครับ
เมื่อเรากดรีเฟรชหน้าเว็บหมายเลขคำร้องขอก็จะเปลี่ยนไปเรื่อยๆ นะครับ ข้อความที่ถูกส่งมาเราสามารถไปแก้ไขได้ในฝั่งบอร์ด NodeMCU ในส่วนคำร้องขอ (HTTP request) ซึ่งตรงนี้เราสามารถที่จะอ่านค่าจากเซนเซอร์ต่างๆ แล้วส่งค่าขึ้นมาแสดงผลได้ครับ ยกตัวอย่างเช่นการอ่านค่าความชื้นในดิน แล้วส่งค่าความชื้นมาแสดงผลบนเว็บแอพพลิเคชั่นดังแสดงในรูปที่ 7
รูปที่ 7 การวัดและอ่านค่าความชื้นในดิน
ที่มา https://netpie.io/projects/plant_sensor
เราส่งข้อมูลไปที่ Server ได้แล้ว เดี๋ยวเราจะมาทำให้ฝั่ง Server ตอบอะไรบางอย่างกลับมาที่บอร์ด NodeMCU เมื่อได้รับข้อมูลที่ถูกส่งไปกันดีกว่า สามารถติดตามต่อได้ในบทความถัดไปนะครับบทความนี้เขียนขึ้นมาโดยใช้ความรู้ความเข้าใจของผู้เขียน ที่เคยทำการศึกษาและทดลองใช้งานมา หากมีข้อเสนอแนะหรือข้อคิดเห็นอื่นๆ เพิ่มเติม สามารถเสนอแนะมาได้เลยนะครับ
แหล่งอ้างอิง
https://www.w3schools.com/tags/att_form_method.asp
https://www.w3schools.com/html/
https://www.apachefriends.org/index.html
https://www.w3schools.com/html/
https://www.apachefriends.org/index.html
Computer Networking: A Top Down Approach 6th edition Jim Kurose, Keith Ross Addison-Wesley March 2012
https://staff.informatics.buu.ac.th/~nutthanon/887230/Chapter_2_V6.1_MIT9.pdf
https://netpie.io/projects/plant_sensor
https://drive.google.com/file/d/1OU8LLrJjVP-eIjclAkGsYPbexqHOLu5m/view
https://drive.google.com/file/d/1n349h-lz4rvY8i2igZB-0AgzYFtxS7Bl/view
https://staff.informatics.buu.ac.th/~nutthanon/887230/Chapter_2_V6.1_MIT9.pdf
https://netpie.io/projects/plant_sensor
https://drive.google.com/file/d/1OU8LLrJjVP-eIjclAkGsYPbexqHOLu5m/view
https://drive.google.com/file/d/1n349h-lz4rvY8i2igZB-0AgzYFtxS7Bl/view
บทความโดย รักการเขียนโค้ดดอทคอม lovecoding.com
สอนการเขียน code html ควบคุมสั่งเปิดปิด ให้ดูหน่อยครับ
ตอบลบรออ่านในบทความถัดไป ซึ่งจะอัพเดตในเร็วๆ นี้ครับ
ลบขอบคุณมากๆๆ ครับ
ลบWarning: fopen(log_data.txt): failed to open stream: No such file or directory in C:\xampp\htdocs\get_data.php on line 35
ตอบลบUnable to open file!
มันขึ้น error อันนี้อ่ะค่ะ ต้องทำยังไงคะ
มีสอนเขียนเว็บมาควบคุม mcu ยังครับ
ตอบลบตอนต่อไป มายังครับ
ตอบลบ