tutorial - NodeJs + Express + Socket.io ทำ Realtime Server กันเถอะะ

|


หลายๆคนอาจจะสงสัย เขียนไปทำไมวะ nodejs ยังไม่รู้ว่าจะเอาไปใช้ทำอะไร เอาจริงๆแล้วผู้เขียนเองก็ยังไม่เข้าใจอะไรถึงแก่นแท้ เข้าใจแค่พื้นๆแต่แค่อยากจะเขียนพวก server realtime  อะไรแบบนี้เพื่อไว้ทำเกมทำอะไรบ้างก็เลยมานั่งศึกษาเนี่ยแหละ วันนี้มีตัวอย่างคร่าวๆมาเสนอด้วยนะครับ ฮะๆ

ก่อนอื่นเรามาดูสิ่งที่เราเตรียมการก่อนที่จะทำตามตัวอย่างวันนี้ก่อนนะครับ

  • NodeJs อันนี่แน่นอนติดตั้งกันเป็นนะ (ติดตั้ง nodejs คลิก)
  • Express คือ Framework สำหรับ NodeJs จะมีคำสั่งต่างๆมีช่วยให้เขียนได้ง่ายขึ้น(เข้าไปอ่าน api กันเอานะ นี่ก็ทำๆตามๆตัวอย่างเค้ามาอีกทีเหมือนกัน T,T)
  • Socket.IO ไอนี่สิพระเอกของวันนี้เลยครับ socket.io คือ library ตัวนึงที่จะเข้ามาช่วยในการสร้าง socket ที่ใช้ในการติดต่อระหว่าง client กับ server นั่นเองครับ (ในเว็บของเค้ามีตัวอย่างให้ดูหลายอย่างเลยนะ)

*คือว่าที่อธิบายมาทั้งหมดก็เป็นข้อมูลที่อ่านๆศึกษามาอีกทีถ้าผิดพลาดยังไงก็ต้องขออภัยนะครับ

โอเคจนถึงตอนนี้เรารู้เครื่องมือกันแล้ว หลายๆ อาจจะยัง งงๆลงไม่เป็นมาๆจะมาบอกวิธีลงง่ายๆเลยนะเริ่มแรกสร้าง folder ขึ้นมาในที่นี่จะตั้งชื่อว่า socketclass จากนั้น สร้างไฟล์ package.json แล้วนำโค้ดนี้ไปใส่ครับ

Screen Shot 2556-08-17 at 12.04.21 AM

จากนั้นให้เราเข้า terminal หรือ cmd เข้าไปรันคำสั่ง npm install ที่ folder socketclass จากนั้นระบบจะทำการติดตั้ง express และ socket.io ให้เราทีนี้เมื่อลงเสร็จจะสังเกตเห็น folder node_modules ที่ folder socketclass เป็นอันเสร็จสิ้นการติดตั้งมาก็อบโค๊ดกันเถอะ

Screen Shot 2556-08-17 at 12.05.31 AM

ในตัวอย่างครั้งนี้จะมี 2 file นะครับซึ่งเราจะทำทั้งฝั่ง client กับ server เลยครับ เพราะงั้นมาเริ่มสร้างไฟล์ timeserver.js กันก่อนอย่าได้รีรอ!!

อันนี้คือฝั่ง server ครับต่อไปจะเป็นฝั่ง client  จากนั้นก็สร้างไฟล์ timeclient.html และเริ่มก็อปโค๊ดกันต่อๆ

โอเคๆทีนี้เป็นอันเสร็จแล้วมาทดลองรันกันได้เลย หึหึ  วิธีรันก็เหมือนเดิมเลยครับ terminal หรือ cmd เข้าไปรัน node timeserver.js ถ้าไม่มี error อะไรแสดงว่า O_O ที่ผ่านมาเราถูกต้องแล้ววว

Screen Shot 2556-08-17 at 12.15.50 AM

ก็จะได้ผลดังรูปนี้เลยครับจากนั้นให้เข้าไปที่ http://localhost:7777/ แล้วเปิด console ของ browser ขึ้นเลยครับอย่าช้าเพื่อดู log การทำงาน

Screen Shot 2556-08-17 at 12.17.16 AMScreen Shot 2556-08-17 at 12.18.29 AM

นี่คือผลจากการรันหลายๆคนอาจจะส่งว่าอะไรวะเลขนี้ เด้งขึ้นมาเรื่อยๆ จริงๆมันคือเวลา ที่ server ส่งกลับมา (ในรูปคือทำการทดลองตอน เที่ยงคืนเลยเป็นเวลา 0 – -” ตอนแรกก็แอบงงเหมือนกันครับ)

การทำงานของ server คือ เมื่อมีเข้ามาเชื่อมต่อมาที่ localhost:7777 ก็จะกลายเป็นการเปิดไฟล์ timeclient.html สังเกตบรรทัดที่ 7-9 จาก script ที่อยุ่ใน timeserver ก็จะทำการเชื่อมต่อ กับ server – – โอ้ถ้าให้อธิบายนี่มันหนังไตรภาคเลยนะครับแนะนำให้ทำความเข้าใจกับโค๊ดละกันครับจะบอกคร่าวๆก็คือ

socket.on(ชื่อท่อ,ข้อมูลที่ได้) คือการเปิดท่อด้วยชื่อ เพื่อรอรับข้อมูลที่อีกฝั่งส่งมา (อธิบายง่ายๆคือ *รอรับข้อมูลนั่นแหละครับชื่อท่อต้องตรงกับที่อีกฝั่งจะส่งมานะไม่งั้นจะไม่ถึงกัน)

ส่วน socket.emit(ชื่อท่อ,ข้อมูลที่จะส่งไป) คือการเปิดท่อส่งข้อมูล (กำหนดชื่อท่อให้ตรงกับปลายทางที่รอรับนะครับ ไม่งั้นอาจจะส่งไปไม่ถึง)

เท่านี้เราก็สามารถไปประยุกต์ทำ  server chat , game หรืออื่นๆได้อีกมากมายนะครับ : )

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

Share Button

Comments

comments