การใช้งาน ESP8266 ควบคุม LED ผ่าน MQTT โดยใช้ Arduino IDE

ในบทความนี้เราจะมาใช้ MQTT ในเป็นโปรโตคอลตัวกลางในการสื่อสารระหว่างคอมพิวเตอร์ หรืออุปกรณ์ต่างๆ ผ่านอินเตอร์เน็ต ไปที่ ESP8266 กันครับ หลังจากอ่านบทความนี้จบแล้ว ท่านสามารถจะนำ MQTT ไปใช้งานอื่นๆได้อีกมากมาย เช่น การสื่อสารกันเองระหว่าง ESP8266 กับ ESP8266 ในการแชร์ข้อมูลซึ่งกันและกัน มอนิเตอร์อุณหภูมิแบบเรียวทาม ติดตามการทำงานของเครื่องจักรแบบไร้สาย นอกจากนี้ยังสามารถนำไปประยุกต์ใช้อะไรที่ไม่เกี่ยวข้องกับ ESP8266 อย่างการทำห้องแชทออนไลน์ได้อีกด้วย

รู้จักกับ MQTT

MQTT เป็นโปรโตคอลที่ใช้สำหรับการสื่อสาร ต่างภาษา ต่างอุปกรณ์กัน หรือภาษาเดียวกัน อุปกรณ์เดียวกัน ซึ่งมีไลบรารี่ให้พร้อมสำหรับภาษาต่างๆ ได้แก่ Heroku Ruby Python NodeJS Java Go .NET NodeMCU(Lua) และ PHP ทำงานอยู่บนฐานของโปรโตคอล TCP

โดยปกติแล้ว MQTT จะสามารถใช้งานได้ก็ต่อเมื่อมีเซิฟเวอร์ตัวกลางเท่านั้น ซึ่งท่านสามารถติดตั้งบนเซิฟเวอร์ของตัวเองก็ได้ แต่ในบทความนี้จะเลือกใช้บริการเซิฟเวอร์ MQTT จากเว็บ CloudMQTT ซึ่งสามารถใช้งานได้ฟรี 10 การเชื่อมต่อ กรณีต้องการนำไปใช้งานจริงควรเผื่อจำนวนการเชื่อมต่อไว้มากๆหากนำไปใช้กับสาธารณะ

ก่อนที่จะใช้งานได้ เราจำเป็นต้องมารู้ศัพท์ที่ใช้ และหลักการใช้งานกันก่อนครับ ก่อนอื่นเลย Username Password ที่ใช้ล็อกอินเข้าใช้งานโปรโตคอลจะมีอยู่ด้วยกัน 2 ระดับ คือ ระดับหัวหน้า และระดับผู้ดูแลห้อง (เป็นชื่อระดับที่ผมตั้งขึ้นเองเพื่อให้เข้าใจได้ง่าย) ข้อแตกต่างของ 2 ระดับนี้คือ

• ระดับหัวหน้า เปรียบได้กับผู้บริหาร หรือเจ้าของบริษัท มีสิทธิ์ที่จะฟัง และประกาศ ไปยังห้อง (Topic) ไหนก็ได้ที่มีการสร้างขึ้น ซึ่ง Username Password จะถูกกำหนดมาแล้ว หลังจากสมัครสมาชิกในระบบของ CloudMQTT จะมีประกาศในหน้าแรก
• ระดับผู้ดูแลห้อง ระดับนี้มีสิทธิ์ที่จะฟังอย่างเดียว ประกาศอย่างเดียว หรือทั้งฟังและประกาศ ได้ในห้อง (Topic) ที่กำหนดไว้แล้วเท่านั้น ซึ่ง Username Password สามารถกำหนดได้เองโดยการสร้าง

ต่อมา ก็มาทำความรู้จักกับคำว่า Topic กันครับ คำนี้ผมจะขอใช้ว่าเป็น "ชื่อห้อง" น่าจะเข้าใจได้ง่ายกว่า ก่อนที่เราจะส่งข้อมูล หรือรอฟังข้อมูล เราจะต้องทราบชื่อห้องซะก่อนครับ เปรียบเสมือนว่าหากเราต้องการจะคุยกับกลุ่มไหน เราจำเป็นที่จะต้องรู้ชื่อกลุ่มซะก่อน ในทาง MQTT จะเรียกชื่อห้องว่า Topic ซึ่งสามารถกำหนดเป็นอะไรก็ได้ แต่โดยส่วนใหญ่จะกำหนดในลักษณะคล้าย Path เช่น /ESP/LED /ESP/TEMP และอื่นๆ การตั้ง ควรเป็นชื่อที่สื่อความหมาย และเข้าใจได้ง่ายด้วยครับ

พอร์ต (Port) ใน CloudMQTT จะแบ่งพอร์ตออกเป็น 3 ชนิด ดังนี้

• Port เป็นพอร์ตที่โปรโตคอล MQTT ใช้งาน ใช้งานกับภาษาที่อยู่ในฝั่ง Back-end เช่น PHP C++ และภาษาอื่นๆที่ได้กล่าวไปแล้ว (พอร์ตที่จะให้ ESP8266 คือพอร์ตชนิดนี้)
• SSL Port เป็นพอร์ตที่โปรโตคอล MQTT ใช้งาน แต่จะถูกใช้เมื่อต้องการเชื่อมต่อแบบ SSL ซึ่งผมแนะนำให้ใช้พอร์ตนี้หากอุปกรณ์รองรับ SSL (ESP8266 ไม่ค่อยจะรองรับ จึงไม่ได้ใช้)
• Websockets Port (TLS only) เป็นพอร์ตที่ใช้กับหน้าเว็บ ซึ่งหน้าเว็บนั้นไม่รองรับโปรโตคอล MQTT หรือเชื่อมต่อ TCP โดยตรง แต่มีเทคโนโลยีเรียวทามที่ออกแบบมาสำหรับเว็บอยู่แล้ว ชื่อ WebSocket ในการที่จะส่งข้อมูลผ่านหน้าเว็บจะต้องคอนฟิกพอร์ตเป็นพอร์ตชนิดนี้

Connection limit เป็นการจำกัดจำนวนผู้เข้ามาเชื่อมต่อ (Clients) ในวินาทีนั้นๆ ตัวอย่างเช่น เปิดหน้าเว็บที่เชื่อมต่ออยู่ไว้ 2 หน้า และมี ESP8266 ที่เชื่อมต่ออีก 1 ตัว รวมแล้วจะนับเป็น 3 การเชื่อมต่อ หากใช้งานฟรีเซิฟเวอร์ MQTT จาก CloudMQTT จะถูกจำกัดไว้ที่ 10 การเชื่อมต่อ

สมัครใช้งานฟรีเซิฟเวอร์ MQTT จาก CloudMQTT

เข้าไปที่ลิงค์ https://customer.cloudmqtt.com/login ตรง Sign up กรอกอีเมล์ของท่านลงไปก่อน จากนั้นไปเช็คเมล์ ระบบจะส่งลิงค์สำหรับสมัครสมาชิกไปให้ จากนั้นคลิกลิงค์ที่อยู่ในเมล์ แล้วกรอกรายละเอียดต่างๆเป็นอันเสร็จครับ (ผมไม่มีรูปภาพให้ดูเป็นขั้นตอนเนื่องจากได้สมัครสมาชิกไว้แล้วครับ)

เลือก Plan ใช้งาน และเตรียมพร้อมก่อนเขียนโค้ด

เมื่อเข้าสู่ระบบแล้ว จะพบกับหน้าจัดการทั้งหมดประมาณรูปด้านล่างนี้ กดปุ่ม + Create

จากนั้นตั้งชื่อ (ชื่ออะไรก็ได้ ไม่มีผลต่อโค้ด) ในข้อที่ 1 เลือกที่ตั้งของเซิฟเวอร์ในข้อที่ 2 (มีให้เลือก US กับ EU ผมเลือก US) และสุดท้าย Plan กรณีต้องการใช้ฟรีให้คง Cute Cut ไว้ ไม่ต้องแก้ หากต้องการใช้งานแบบเสียงตังต้องเชื่อม Paypal แล้วเลือก Plan ที่ลิงค์ https://www.cloudmqtt.com/plans.html จากนั้นกดปุ่ม Create

จากนั้นระบบจะพากลับมาหน้าเดิม ให้กดที่ปุ่ม Details

จากนั้นรายละเอียดต่างๆจะแสดงขึ้นมาในหัวข้อ Instance info (สามารถอ่านรายละเอียดได้ในหัวข้อที่แล้ว)

ต่อมา เราจะมาสร้าง Username Password ระดับหัวหน้าห้องกันครับ เลื่อนมาที่หัวข้อ Manage Users แล้วตั้ง Username Password ที่ต้องการ หากทำครั้งแรกแนะนำให้ตั้งตามผมไปก่อนคือ User : TEST และ Pass : 12345 แล้วกดปุ่ม Save

แล้วจะมีการรีเฟสหน้าเว็บซักครู่ จากนั้นก็จะแสดงรายชื่อที่เราได้สร้างไว้ทั้งหมดออกมา

เลื่อนลงมาที่ New Rule ตรงส่วนนี้จะเป็นส่วนที่ไว้กำหนดว่าผู้ดูแลห้อง (User) ใด สามารถฟัง (Read) หรือประกาศ (Write) ไปที่ห้อง (Topic) ใดได้บ้าง เลือก User ในข้อที่ 1 จากนั้นตั้งชื่อห้อง (Topic) ในช่องที่ 2 หากทำครั้งแรกแนะนำให้ตั้ง /ESP/LED ตามผมไปก่อน แล้วเลือกสิทธิ์ในการใช้งานห้อง (Topic) ในช่อง 3 และ 4 จากนั้นกด Save

รอซักครู่หนึ่ง จะมีการรีเฟสหน้าเว็บ จากนั้นเลื่อนลงมาดูในหัวข้อ ACLs ก็จะเห็นข้อมูลที่เราได้ตั้งไว้ครับ

มาจนถึงตรงนี้ก็เป็นอันจบการจัดการแล้ว ลองกดไปที่ Websocket UI

แล้วเปิดลิงค์ขึ้นมา 2 หน้าคู่กัน ลองใส่ Topic เป็น /ESP/LED แล้วใส่ข้อความลงไป กดปุ่ม Send หากส่งจากหน้าหนึ่ง อีกหน้าหนึ่งจะมีการแสดงข้อมูลอัตโนมัติด้วย ซึ่งในหน้านี้จะใช้สำหรับดูว่าโค้ดที่เราได้เขียนนั้นได้มีการส่งข้อมูลมาที่เซิฟเวอร์หรือเปล่า สามารถใช้สำหรับดีบัคได้ในกรณีเกิดปัญหา

เขียนโค้ดด้วย Arduino IDE

หากยังไม่ได้ลงบอร์ดให้โปรแกรม Arduino ท่านสามารถอ่านวิธีลงบอร์ดได้ที่บทความ เริ่มต้นพัฒนาเฟิร์มแวร์ด้วย Arduino IDE

ใน Arduino จะไม่มีไลบรารี่เชื่อมต่อ MQTT มาให้ในตัว สามารถดาว์โหลดมาติดตั้งจากลิงค์ Arduino Client for MQTT

ก๊อปโค้ดด้านล่างนี้ลงโปรแกรม Arduino IDE ไป

แก้ไขตรงตัวแปร ssid (บรรทัดที่ 7) ให้เป็นชื่อ AP (ชื่อ WiFi) และแก้ไขตัวแปร password (บรรทัดที่ 8) ให้เป็นรหัสผ่านของ AP (รหัสผ่าน WiFi) กรณีไม่มีรหัสผ่านให้ใส่ตัวเลข 0 ( const char* password = 0; )

แก้ค่า mqtt_server (บรรทัดที่ 11) , mqtt_port (บรรทัดที่ 12) ให้ตรงกับหัวข้อ Instance info และกรณีที่สร้าง User Pass ตามผมในขั้นตอนที่แล้วก็ไม่ต้องเปลี่ยนตรง mqtt_user (บรรทัดที่ 13) และ mqtt_password (บรรทัดที่ 14) หากไม่ได้สร้าง User Pass ตาม ให้แก้ตรงส่วนนี้ด้วย

ในบรรทัดที่ 16 จะเป็นการกำหนดขาที่ต่อกับ LED แบบ Active Low ซึ่งผมเลือกใช้ขา GPIO5

เลือกบอร์ด เลือกพอร์ต จากนั้นกด Upload ได้เลย

เมื่ออัพโหลดเสร็จแล้ว เปิด Serial Monitor ขึ้นมา ปรับ Baud rate เป็น 115200

หากเชื่อมต่อ WiFi สำเร็จ และตั้งค่าถูกต้อง จะขึ้นประมาณดังรูปด้านล่างนี้

กลับไปที่หน้า Websocket UI ใส่ Topic เป็น /ESP/LED แล้วใส่ข้อความเป็น GET เมื่อกด Send จะต้องขึ้นดังรูป แสดงว่า ESP8266 สามารถสื่อสารกับ MQTT ได้แล้ว

กลับมาดูที่หน้าต่าง Serial Monitor ก็จะเห็นว่า ESP8266 ได้รับข้อความและส่งความกลับไปพร้อมๆกับได้รับข้อความที่ตัวเองส่งไปด้วย

ต่อวงจรให้พร้อม

การต่อวงจรสามารถต่อ LED เข้ากับขา GPIO2 ได้เลย โดยดูขาได้จากใน Pinout และต้องต่อตัวต้านทานค่าประมาณ 220 โอห์ม เพื่อป้องกัน LED ขาดไว้ด้วยครับ

การควบคุม LED ผ่านหน้าเว็บ

โหลดไฟล์ทั้งหมดที่ลิงค์ : mqtt_html.zip คลายไฟล์ออกมา ใช้โปรแกรม editor (เช่น Notepad Notepad++) เปิดไฟล์ index.html ขึ้นมาแก้ เลื่อนหา ver config แก้ข้อมูลตรงส่วน mqtt_server และ mqtt_websockets_port ให้ถูกต้อง (ดูรูปด้านล่างประกอบ) หากตอนสร้าง User Pass สร้างไว้ชื่อรหัสเดียวกับผมก็ไม่ต้องแก้ไข

เปิดไฟล์ index.html ด้วย Google Chrome (หรือโปรแกรมท่องเว็บอื่นๆ)

รอซักครู่ หากตั้งค่าไว้ถูกต้องจะขึ้น Connected ลองกดที่ปุ่ม ON หรือ OFF ก็จะสามารถควบคุม LED ได้แล้ว

ส่งท้าย

ในบทความนี้ต้องใช้ความรู้ทั้งภาษา C Arduino และภาษาบนเว็บไปด้วยกัน หากมีความรู้ด้านภาษาเว็บอยู่บ้างแล้ว ก็จะทำให้การนำไปประยุกต์ใช้นั้นทำได้ง่ายมากยิ่งขึ้นครับ และหากมีความรู้เขียนโปรแกรม C Arduino อยู่บ้างแล้ว ลองไล่โค้ดแต่ละบรรทัดดู จะช่วยให้เข้าใจการนำฟังก์ชั่นแต่ละตัวไปใช้งานได้ครับ