วิธีแสดง / อัปเดต“ การกดถูกใจ Facebook” โดยใช้ Node.js

โดยการหาโค้ดตัวอย่างจากโพสต์ก่อนหน้านี้คุณอาจรู้สึกว่าประโยชน์ที่แท้จริงของการใช้ Node.js ในโพสต์ของวันนี้เรามีสคริปต์ภาคปฏิบัติที่แสดงให้เห็นอย่างชัดเจนถึงการใช้ Node.js ในการเขียนโปรแกรมตามเหตุการณ์.

เราจะสร้างสคริปต์ง่าย ๆ ที่ส่งออกจำนวน "ชอบ Facebook" ของหน้า Facebook โดยเฉพาะ และนอกจากนั้นเราจะเพิ่มฟีเจอร์เพิ่มเติมที่จะอัปเดตจำนวน "การกดถูกใจ Facebook" ทุก 2 วินาที.

ผลลัพธ์จะเรียบง่ายและธรรมดาอาจมีลักษณะดังนี้: "จำนวนคนชอบ: 2630405" และมันก็ขึ้นอยู่กับคุณที่จะจัดสไตล์โดยใช้ CSS มาเริ่มกันเลย!

เพื่อให้ความคิดแก่คุณ

ก่อนที่เราจะดำดิ่งสู่การใช้ Node.js เราจะใช้เวลาสักครู่ในการคิดว่าสิ่งที่เราควรทำกับภาษาการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์ทั่วไป (เช่น PHP) หากคุณกำลังคิดที่จะทำการโทร AJAX เพื่อค้นหาจำนวน ชอบ ในทุก ๆ 2 วินาที - คุณถูกต้อง - แต่สิ่งนี้อาจ อาจเพิ่มโอเวอร์เฮดของเซิร์ฟเวอร์.

เราสามารถพิจารณา การเข้าถึง graph.facebook.com ซึ่งจะเป็น การดำเนินการ I / O ที่ใช้เวลานาน. พิจารณาผู้ใช้ 5 รายที่เข้าถึงหน้าเดียวกัน (ซึ่งแสดงจำนวน ชอบ) จำนวนการเข้าถึง graph.facebook.com ใน 2 วินาทีจะกลายเป็น 10 เพราะทุกคนจะอัปเดตหมายเลขของตน ชอบ หนึ่งครั้งใน 2 วินาทีและมัน จะถูกดำเนินการเป็นเธรดแยกต่างหาก.

ไม่จำเป็นสำหรับการปรับใช้เซิร์ฟเวอร์ Node.js เท่านั้น จำเป็นต้องมีการเข้าถึงเซิร์ฟเวอร์ Facebook หนึ่งครั้ง และ เวลาที่จะรับและส่งออกผลลัพธ์ (จำนวน ชอบ) สามารถลดลงอย่างมาก.

อย่างไรก็ตามเราจะนำไปใช้อย่างไร นั่นคือสิ่งที่เราจะค้นหาในส่วนด้านล่าง.

เริ่มต้นใช้งาน

ก่อนที่เราจะเริ่มคุณควร มีการติดตั้ง Node.js และทำงานบนบัญชีเว็บโฮสติ้งที่สนับสนุนสภาพแวดล้อม v8. ลองอ่านหัวข้อ "การเริ่มต้นกับ Node.js" และ "การติดตั้ง Node.js" ในบทความก่อนหน้าของเราคู่มือผู้เริ่มต้นไปที่ Node.js หากคุณยังไม่ได้.

ในเซิร์ฟเวอร์เรา ทางเข้า graph.facebook.com ในช่วงเวลา 2 วินาที และ อัปเดตจำนวน ชอบ. เรียกสิ่งนี้ว่า "ACTION1เราจะเตรียมหน้าเว็บเพื่อให้สามารถอัปเดตตัวเองผ่าน AJAX ทุก 2 วินาที.

พิจารณาผู้ใช้หลายคนที่เข้าถึงหน้าเดียวกัน. สำหรับคำขอ AJAX ของผู้ใช้ทุกคนจะมีการแนบตัวฟังเหตุการณ์ในเซิร์ฟเวอร์เพื่อให้การ "ACTION1" เสร็จสมบูรณ์. ดังนั้นเมื่อใดก็ตามที่ "ACTION1" เสร็จสิ้นผู้ฟังเหตุการณ์จะถูกเรียก.

ลองดูที่รหัสของฝั่งเซิร์ฟเวอร์.

รหัส:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = กิจกรรมใหม่ EventEmitter (); ฟังก์ชั่น get_data () var request = facebook_client.request ("GET", "/ 19292868552", "โฮสต์": "graph.facebook.com"); request.addListener ("การตอบสนอง", ฟังก์ชั่น (ตอบกลับ) var body = ""; response.addListener ("ข้อมูล", ฟังก์ชั่น (ข้อมูล) body + = data;); response.addListener ("สิ้นสุด", ฟังก์ชั่น ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  my_http.createServer (ฟังก์ชั่น (ร้องขอ, ตอบกลับ) var my_path = url.parse (request.url) .pathname; if (my_path === "/ getdata") var listener = facebook_emitter.once ("data", ฟังก์ชัน (data) response.writeHeader (200, "Content-Type": "text / plain"); response.write (data); response.end ();); อื่น load_file (my_path, การตอบกลับ) ;). ฟัง (8080); setInterval (get_data, 1000) sys.puts ("เซิร์ฟเวอร์ทำงานบน 8080"); 

คำอธิบายรหัส:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = กิจกรรมใหม่ EventEmitter (); 

เราสร้าง ไคลเอ็นต์ HTTP เพื่อเข้าถึง API กราฟของ Facebook facebook_client. เรายังต้องการ EventEmitter () ฟังก์ชั่นซึ่งจะทริกเกอร์เมื่อ "ACTION1" เสร็จสิ้น.

สิ่งนี้จะชัดเจนในรหัสที่อธิบายด้านล่าง.

 ฟังก์ชั่น get_data () var request = facebook_client.request ("GET", "/ 19292868552", "โฮสต์": "graph.facebook.com"); request.addListener ("การตอบสนอง", ฟังก์ชั่น (ตอบกลับ) var body = ""; response.addListener ("ข้อมูล", ฟังก์ชั่น (ข้อมูล) body + = data;); response.addListener ("สิ้นสุด", ฟังก์ชั่น ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  

ฟังก์ชัน get_data ดึงข้อมูลจากการโทรผ่าน Facebook API. เราก่อน สร้างคำขอ GET ใช้ ขอร้อง วิธีการของไวยากรณ์ต่อไปนี้:

 Client.request ( 'รับ', 'GET_URL',  "เจ้าภาพ": "host_url"); 

จำนวน “19292868552” คือ ID Facebook ของหน้าเว็บที่เราต้องเข้าถึงรายละเอียด ดังนั้นหน้าสุดท้ายที่เราพยายามเข้าถึงจึงกลายเป็น: http://graph.facebook.com/19292868552 หลังจากทำการร้องขอเราจำเป็นต้อง เพิ่มผู้ฟังสามคน, ตามลำดับดังต่อไปนี้:

1. คำตอบ - ฟังนี้จะถูกเรียกใช้เมื่อคำขอเริ่มได้รับข้อมูล ที่นี่เราตั้งค่าเนื้อความของการตอบสนองต่อสตริงว่าง.
2. ข้อมูล - ในฐานะที่เป็น Node.js ไม่ตรงกันข้อมูลที่ได้รับเป็นชิ้น ข้อมูลนี้จะถูกเพิ่มเข้าไปในตัวแปรร่างกายเพื่อสร้างร่างกาย.
3. ปลาย - ฟังนี้จะถูกเรียกเมื่อ "ACTION1" ที่ระบุข้างต้นได้เสร็จสิ้นแล้ว ข้อมูลที่ส่งคืนโดยการโทรกราฟ Facebook API ส่งคืนข้อมูลในรูปแบบ JSON ดังนั้นเราจึงแปลงสตริงเป็นอาร์เรย์ JSON โดยใช้ฟังก์ชัน JavaScript JSON.parse.

คุณจะเห็นว่ามีการแนบผู้ฟังสำหรับ event_emitter วัตถุ. เรา จำเป็นต้องเรียกใช้ในตอนท้ายของ "ACTION1". เราเรียกผู้ฟังอย่างชัดเจนด้วยวิธีการ facebook_emitter.emit.

 "id": "19292868552", "ชื่อ": "แพลตฟอร์ม Facebook", "รูปภาพ": "http://profile.ak.fbcdn.net/hprofile-ak-ash2/211033_19292868552_7506301_s.jpg", "ลิงก์": "https://www.facebook.com/platform", "Likes": 2738595, "หมวดหมู่": "ผลิตภัณฑ์ / บริการ", "เว็บไซต์": "http://developers.facebook.com", "ชื่อผู้ใช้": "แพลตฟอร์ม", "ก่อตั้ง": "พฤษภาคม 2550", "company_overview": "แพลตฟอร์ม Facebook ช่วยให้ทุกคนสามารถสร้างแอปโซเชียลบน Facebook และเว็บได้", "ภารกิจ": "เพื่อทำให้เว็บเปิดกว้างและเข้าสังคม", "parking": "street": 0, "lot": 0, "valet": 0,

ด้านบนแสดงถึงการตอบสนองของการเรียก API กราฟของ Facebook เพื่อที่จะได้รับจำนวน ชอบ: ใช้วัตถุชอบของวัตถุข้อมูล, แปลงเป็นสตริง และ ส่งต่อให้ ปล่อยออกมา ฟังก์ชัน.

หลังจากการกระทำนี้เรา ปลาย การร้องขอ.

 my_http.createServer (ฟังก์ชั่น (ร้องขอ, ตอบกลับ) var my_path = url.parse (request.url) .pathname; if (my_path === "/ getdata") var listener = facebook_emitter.once ("data", ฟังก์ชัน ( data) response.writeHeader (200, "Content-Type": "text / plain"); response.write (data); response.end ();); อื่น load_file (my_path, การตอบกลับ); ). ฟัง (8080); setInterval (get_data, 1000) 

การสร้างเซิร์ฟเวอร์นั้นคล้ายกับบทช่วยสอนก่อนหน้า - โดยมีการเปลี่ยนแปลงเล็กน้อย สำหรับทุก URL (ยกเว้น / GetData) เรา โหลดไฟล์คงที่ที่เกี่ยวข้องโดยใช้ load_file ฟังก์ชัน เรากำหนดไว้ก่อนหน้านี้.

http: // localhost: 8080 / GetData คือ URL สำหรับคำขอ AJAX ในแต่ละคำขอ AJAX เรา แนบฟังเหตุการณ์ facebook_emitter. มันคล้ายกับ addListener แต่ผู้ฟัง ถูกฆ่าหลังจากผู้ฟังถูกปล่อยออกมาเพื่อหลีกเลี่ยงการรั่วไหลของหน่วยความจำ. หากคุณต้องการตรวจสอบมันเพียง แทนที่ ครั้งหนึ่ง กับ addListener. เรายังเรียกว่า get_data ฟังก์ชั่นหนึ่งครั้งใน 1 วินาทีโดยฟังก์ชั่น setInterval.

ต่อไปเราจะสร้างหน้า HTML ที่แสดงผลลัพธ์.

รหัส:

         
จำนวนที่ถูกใจ: กำลังโหลด ... 
    

คำอธิบายรหัส:

ส่วน jQuery AJAX นั้นอธิบายได้ด้วยตนเอง ตรวจสอบการโทรของ load_content ฟังก์ชัน ดูเหมือนว่ามัน กำลังใช้การวนซ้ำไม่สิ้นสุด, และใช่มันคือ นั่นเป็นวิธีที่จำนวน ชอบ รับการปรับปรุงตัวเอง.

การโทร AJAX แต่ละครั้ง จะล่าช้าตามเวลาเฉลี่ย 1 วินาที เนื่องจากความล่าช้าในการกระตุ้นการโทรแต่ละครั้งจะเป็น 1 วินาทีจากเซิร์ฟเวอร์ คำขอ AJAX จะอยู่ในรูปแบบที่ไม่สมบูรณ์เป็นเวลา 1 วินาที.

ดังนั้นคุณจะไป - วิธีการชะลอการตอบสนอง AJAX จากเซิร์ฟเวอร์เพื่อรับจำนวน Facebook ชอบ. ส่งคำถามในส่วนความคิดเห็นของเราหากคุณมีข้อสงสัยหรือความคิดขอบคุณ!

หมายเหตุจากบรรณาธิการ: โพสต์นี้เขียนโดย Geo Paul สำหรับ Hongkiat.com Geo เป็นผู้พัฒนาเว็บ / iPhone อิสระที่สนุกกับการทำงานกับ PHP, Codeigniter, WordPress, jQuery และ Ajax เขามีประสบการณ์ 4 ปีใน PHP และประสบการณ์ 2 ปีในการพัฒนาแอพพลิเคชั่นบนไอโฟน.