tutorial - ทำระบบ Chatroom แบบ Realtime ง่ายๆด้วย Firebase กันเถอะวัยรุ่น

|


โอยๆ นานมากๆกว่าจะได้เขียนบทความสักอัน พอดีช่วงนี้ กำลังอ่านเจ้า firebase อยู่พอดี ^^ เลยเอามาเขียนเป็นบทความสั้นๆ จริงๆมีบทความที่เค้าเขียนไว้แล้วเยอะมาก ลองอ่านดูก็ได้นะครับ อาจจะละเอียดกว่า ละเอียดกว่าที่ผมเขียนอีก Y.Y แบบว่าเขียนตามความเข้าใจเพื่อลืมจะได้มาเปิดอ่านแหะๆ

โอเค ก่อนอื่น Firebase เนี่ยมันเกิดมาเพื่อทำระบบ realtime และเก็บข้อมูล โดยเฉพาะเลย (store & sync) ไว้ให้พัฒนาเรียกใช้ผ่าน api   เก็บข้อมูลเป็นแบบ Key-Value นั่นเอง จริงๆในเว็บหลักของเค้าก็มีตัวอย่างมายแถมยัง มี library ให้เรียกในหลายๆ platform

Screen Shot 2557-12-22 at 10.02.31 PM

 

อีกทั้งยังมีระบบหลังบ้านเอาไว้ดูข้อมูลที่ของเราอีกด้วย สำหรับใครที่จะใช้งาน firebase เนียต้องสมัครสมาชิกกับเค้าก่อนนะครับ ซึ่งเก็บเงินตามการใช้งานของเรา แต่ไม่ต้องห่วงครับเค้ามี package free ให้ นักพัฒนามาทดลองใช้ได้ครับ

Screen Shot 2557-12-22 at 10.53.08 PM

 

โอเคเรามาเริ่มกันเลยดีกว่า สร้างโฟลเดอร์ใหม่ขึ้นมาเลยชื่อตามสบายใจชอบได้เลยครับแล้วสร้างไฟล์ html ขึ้นมา ผมจะตั้งชื่อว่า hotchat/index.html

 

 

Screen Shot 2557-12-22 at 10.00.32 PM

*จะสังเกตว่ามีการเรียกใช้ library javascript ของทาง firebase ซึ่งถ้าเราไปเขียนเชื่อมต่อ firebase ต้องเชื่อมต่อผ่านทาง api ของเค้าครับ สำคัญมาก

ใส่โค้ดตามนี้ก็จะได้ดังรูปข้างล่างเลยครับ ก็คือจะมี div ที่เอาไว้ขึ้น chat ส่วนด้านล่างก็จะเป็น textbox เอาไว้ใส่ข้อความและชื่อครับ


Screen Shot 2557-12-22 at 9.37.11 PM

 

โอเคครับทีนี้จะเริ่มเขียนโค้ดกันดีกว่าครับ

ก่อนอื่นเลยต้องบอกกับระบบของเราก่อนว่า ข้อมูลของเราเก็บไว้ที่ไหนซึ่งก็คือ url firebase ของเราเอง จะได้มาตอนสมัครสมาชิกแล้วครับ ก็จะเห็นเหมือนในรูปนะครับ copy แทนที่เดิมในโค้ดนี้เลยครับ

Screen Shot 2557-12-22 at 11.13.14 PM

อันนี้ภาพปลากรอบ เอิ้กๆ

 

จากนั้นเนี่ยเราก็จะสามารถเข้าถึงหรือจัดการข้อมูลต่างๆใน firebase ของเราได้แล้วครับ ซึ่งข้อมูลต่างๆจะเรียกหรือจะเพิ่มอะไรก็ต้องเรียกผ่าน api ของทาง firebase ครับ ทีนี้มาเริ่มสร้างห้องแชทกันเลยดีกว่าครับ

สร้าง “chatroom” เราจะมองมันเป็นเหมือน array ก็ได้ครับ (จริงๆมันคือ json key-value)

เอาจริงๆผมว่าในจุดๆนี้มีคนงงแน่ๆครับเพราะผมคนนึงตอนแรกก็งงๆ 555 อะไรมันของมันฟะ

ทีนี้ผมเลยทำรูปมาเป็นภาพประกอบครับ (ถ่ายมาจากระบบหลังบ้านของ firebase)

Screen Shot 2557-12-22 at 11.19.14 PM

จะสังเกตว่า myFirebaseRef เนี่ยจะอยู่ root สุดเลย

ส่วน chatRef ก็จะมาจาก myFirebaseRef.(“chatroom”) ก็คือตั้งว่าข้อมูลที่ขอหรือเพิ่มเข้าไป chatRef จะถูกเพิ่มเข้าไปใน chatroom

ใจเย็นๆนะครับค่อยๆมโนดู

ทีนี้เวลาเราจะเพิ่มหรือจะเรียกข้อมูลมาดูเราก็เรียกผ่าน chatRef ซึ่งมันจะถูกผูกไว้กับ chatroom ใน firebase

มาถึงตอนนี้ก็เริ่มทำการส่งข้อความได้แล้วแหละครับ

ฟังกชั่นนี้จะทำงานก็ต่อเมื่อกดปุ่ม send ด้านบนนะครับจะส่งค่าข้อมูลใน input ไปให้ทาง firebase ซึ่ง .push เนี่ยหมายถึงเพิ่มเข้านั่นแหละครับ  ซึ่ง chatRef.push เนี่ยก็หมายถึงว่าเพิ่มเข้ามูล name , message ไปไว้ใน chatRef (หรือก็คือ chatroom ใน firebase)

ทีนี้มีตัวส่งแล้วก็ต้องมีตัวรับข้อความครับ

คำสังนี้จะบอกถึงว่า .limitToLast(10) รับข้อมูลล่าสุดจาก chatRef มา สิบข้อมูล .on(“child_added”) ตรงนี้เนี่ยจะมีหลาย event แต่ในที่นี้หมายถึงเมื่อมีการเพิ่ม ก็เรียก callback ให้  function ทำงานนั่นเองและเมื่อมีข้อมูลถูกเพิ่มลงใน chatroom callback ก็จะทำงานเองอัตโนมัติ

ต่อมา .val() คือเรียกเอาค่าข้อมูล แล้วก็เอามาต่อ string ธรรมดาๆเลยครับแค่นี้ก็จะได้โค้ดรูปร่างหน้าตาแบบนี้นะครับ จริงๆเราสามารถเรียก chatRef.on ได้เลยนะครับแต่ตอนเชื่อมต่อครั้งแรกเนี่ยหรือมีข้อมูลอัพเดทอะไรก็จะมาทั้งหมดเลยไม่มีการจำกัด

ทีนี้เราก็มาลองเล่นกันได้แล้วห้องแชทง่ายๆ

Screen Shot 2557-12-22 at 10.01.36 PM

ลองเปิดเบร้าเซอร์หลายๆ อันแล้วลองพิมๆดูละกันนะครับ ก็เรียบร้อยแล้วครับได้ห้องแชทตามที่โม้ไว้มากมายในตอนแรก

จริงๆแล้ว firebase สามารถเอาไปใช้ได้หลากหลายมากมายเลยครับดูจาก โปรเจคตัวอย่างของเค้าก็ได้แหะๆ หวังว่าจะมีประโยชน์ไม่มากก็น้อยนะครับ

Share Button

Comments

comments