كيفية عرض / تحديث الإعجابات على Facebook باستخدام Node.js

من خلال التدرب على نماذج الرموز من المنشور السابق ، قد تشعر بشعور ما هي الفائدة الفعلية لاستخدام Node.js. في منشور اليوم ، نلقي نصًا عمليًا يوضح بوضوح استخدام Node.js في البرمجة القائمة على الأحداث.

سنقوم بإنشاء برنامج نصي بسيط ينتج عنه عدد "الإعجابات على Facebook" لصفحة معينة على Facebook. علاوة على ذلك ، سنطرح ميزة إضافية ستقوم بتحديث عدد "الإعجابات على Facebook" كل ثانيتين.

سيكون الإخراج بسيطًا وسهلاً ، ربما يبدو مثل هذا: "عدد مرات الإعجاب: 2630405" والأمر متروك لك لتصميمه باستخدام CSS ، لنبدأ بعد ذلك!

لإعطائك فكرة

قبل الغوص في استخدام Node.js ، دعنا نتوقف لحظة للتفكير فيما كنا نفعله عادة مع لغات البرمجة الشائعة من جانب الخادم (مثل PHP). إذا كنت تفكر في إجراء مكالمة أجاكس للعثور على عدد الإعجابات في كل ثانيتين - أنت محق - لكن هذا ممكن يحتمل أن تزيد من الحمل الخادم.

يمكن أن نعتبر الوصول graph.facebook.com التي ستكون أ عملية إدخال / إخراج مستهلكة للوقت. ضع في اعتبارك 5 مستخدمين يصلون إلى نفس الصفحة (مما يؤدي إلى إخراج عدد الإعجابات). عدد الوصول إلى graph.facebook.com خلال ثانيتين ستصبح 10 ، لأن الجميع سيحدّث عددهم الإعجابات مرة واحدة في 2 ثانية و سيتم تنفيذها كخيط منفصل.

هذا ليس ضروريًا مع تطبيق خادم Node.js. فقط مطلوب وصول واحد إلى خادم الفيسبوك و ال الوقت للحصول على وإخراج النتيجة (عدد الإعجابات) يمكن تخفيض كبير.

ومع ذلك ، كيف سنقوم بتنفيذ هذا؟ هذا ما سنكتشفه في الأقسام أدناه.

ابدء

قبل أن نبدأ ، يجب أن قم بتثبيت Node.js وتشغيله على حساب استضافة ويب مدعوم من بيئة v8. تحقق من المواضيع ، "البدء مع Node.js" و "تثبيت Node.js" في مقالتنا السابقة ، دليل المبتدئين إلى Node.js إذا لم تقم بذلك.

في الخادم نحن التمكن من graph.facebook.com في فاصل من 2 ثانية و تحديث عدد الإعجابات. دعنا نسمي هذا باسم "ACTION1". سنقوم بإعداد صفحة حتى يتم تحديثها عبر AJAX كل ثانيتين.

النظر في العديد من المستخدمين الذين يصلون إلى نفس الصفحة. لكل طلب مستخدم AJAX ، يتم إرفاق مستمع أحداث في الخادم لإكمال "ACTION1". لذلك عندما يتم الانتهاء من "ACTION1" ، سيتم تشغيل مستمعي الحدث.

دعنا نلقي نظرة على كود جانب الخادم.

الرموز:

 var facebook_client = my_http.createClient (80 ، "graph.facebook.com") ؛ var facebook_emitter = أحداث جديدة. EventEmitter () ؛ function get_data () var request = facebook_client.request ("GET"، "/ 19292868552"، "host": "graph.facebook.com")؛ request.addListener ("response"، function (response) var body = ""؛ response.addListener ("data"، function (data) body + = data؛)؛ response.addListener ("end"، function ( ) var data = JSON.parse (body)؛ facebook_emitter.emit ("data"، String (data.likes))؛)؛)؛ request.end ()؛  my_http.createServer (function (request ، response) var my_path = url.parse (request.url) .pathname؛ if (my_path === "/ getdata") var listener = facebook_emitter.once ("data"، function (data) response.writeHeader (200، "Content-Type": "text / plain")؛ response.write (data)؛ response.end ()؛)؛ آخر load_file (my_path ، response) ؛). الاستماع (8080) ؛ setInterval (get_data، 1000)؛ sys.puts ("Server قيد التشغيل على 8080") ؛

شرح الرموز:

 var facebook_client = my_http.createClient (80 ، "graph.facebook.com") ؛ var facebook_emitter = أحداث جديدة. EventEmitter () ؛

نخلق عميل HTTP للوصول إلى واجهة برمجة تطبيقات Facebook Graph facebook_client. نحن بحاجة أيضا إلى EventEmitter () وظيفة والتي سوف تؤدي عند اكتمال "ACTION1".

سيكون هذا واضحًا في الكود الموضح أدناه.

 function get_data () var request = facebook_client.request ("GET"، "/ 19292868552"، "host": "graph.facebook.com")؛ request.addListener ("response"، function (response) var body = ""؛ response.addListener ("data"، function (data) body + = data؛)؛ response.addListener ("end"، function ( ) var data = JSON.parse (body)؛ facebook_emitter.emit ("data"، String (data.likes))؛)؛)؛ request.end ()؛

وظيفة احصل على البيانات جلب البيانات من Facebook API Call. نحن اولا إنشاء طلب GET باستخدام طلب طريقة بناء الجملة التالية:

 Client.request ( 'يحصل'، 'GET_URL'،  "المضيف": "host_url")؛

الرقم “19292868552” هو معرف Facebook للصفحة التي نحتاج إلى الوصول إلى تفاصيلها. وبالتالي تصبح الصفحة الأخيرة التي نحاول الوصول إليها: http://graph.facebook.com/19292868552. بعد تقديم الطلب نحتاج إلى أضف ثلاثة مستمعين إليها, على التوالي ما يلي:

استجابة - يتم تشغيل هذا المستمع عندما يبدأ الطلب في تلقي البيانات. نحن هنا مجموعة نص الاستجابة إلى سلسلة فارغة.
البيانات - نظرًا لأن Node.js غير متزامن ، يتم تلقي البيانات كقطع. تتم إضافة هذه البيانات إلى متغير الجسم لإنشاء الجسم.
النهاية - يتم تشغيل هذا المستمع عند اكتمال "ACTION1" المحدد أعلاه. البيانات التي يتم إرجاعها بواسطة استدعاء Facebook Graph API تُرجع البيانات بتنسيق JSON. لذلك نقوم بتحويل السلسلة إلى صفيف JSON باستخدام وظيفة JavaScript JSON.parse.

يمكنك أن ترى أن المستمع مرفق من أجل event_emitter موضوع. نحن بحاجة إلى تشغيله في نهاية "ACTION1". نقوم بتشغيل المستمع بوضوح مع الطريقة facebook_emitter.emit.

 "id": "19292868552" ، "name": "Facebook Platform" ، "picture": "http://profile.ak.fbcdn.net/hprofile-ak-ash2/211033_19292868552_7506301_s.jpg"، "link": "https://www.facebook.com/platform" ، "الإعجابات": 2738595 ، "الفئة": "المنتج / الخدمة" ، "موقع الويب": "http://developers.facebook.com" ، "اسم المستخدم": "platform" ، "أسس": "May 2007" ، "company_overview": "يتيح Facebook Platform لأي شخص إنشاء تطبيقات اجتماعية على Facebook والويب." ، "المهمة": "لجعل الويب أكثر انفتاحًا واجتماعيًا." ، "Parking": "street": 0، "lot": 0، "valet": 0,

ما ورد أعلاه يمثل استجابة استدعاء Facebook Graph API. من أجل الحصول على عدد الإعجابات: تأخذ كائن يحب كائن البيانات, تحويلها إلى سلسلة و نقلها إلى ينبعث وظيفة.

بعد هذا العمل نحن النهاية الطلب.

 my_http.createServer (function (request، response) var my_path = url.parse (request.url) .pathname؛ if (my_path === "/ getdata") var listener = facebook_emitter.once ("data"، function ( data) response.writeHeader (200، "Content-Type": "text / plain")؛ response.write (data)؛ response.end ()؛)؛ آخر load_file (my_path، response)؛ ). listen (8080) ؛ setInterval (get_data، 1000)؛

يشبه إنشاء الخادم البرنامج التعليمي السابق - مع تغيير بسيط. لكل عنوان URL (باستثناء /احصل على البيانات) نحن تحميل ملف ثابت المقابلة باستخدام تحميل الملف وظيفة حددنا في وقت سابق.

ال HTTP: // المضيف المحلي: 8080 / getdata هو عنوان URL لطلب AJAX. في كل طلب اجاكس نحن إرفاق مستمع الحدث إلى facebook_emitter. انها مماثلة ل addListener لكن المستمع قتل بعد انبعاث المستمع لتجنب تسرب الذاكرة. إذا كنت بحاجة إلى التحقق من ذلك فقط استبدال ذات مرة مع addListener. ونحن ندعو أيضا احصل على البيانات وظيفة مرة واحدة في 1 ثانية من قبل وظيفة setInterval.

بعد ذلك ، نقوم بإنشاء صفحة HTML حيث يتم عرض الإخراج.

الرموز:

اعجابات الفيسبوك

عدد الإعجابات: جار التحميل…

شرح الرموز:

جزء jQuery AJAX جميل للغاية. هل تحقق من دعوة لل load_content وظيفة. يبدو أنه يقوم بتشغيل حلقة لا نهائية, ونعم هو كذلك. هذه هي الطريقة عدد الإعجابات يحصل على تحديث نفسها.

كل مكالمة اجاكس سيتم تأجيله بمعدل متوسط قدره ثانية واحدة حيث أن التأخير في تشغيل كل مكالمة من هذا القبيل سيكون ثانية واحدة من الخادم. سيكون طلب AJAX في نموذج غير مكتمل لثانية واحدة.

إذن ، هناك طريقة لتأخير استجابة AJAX من الخادم للحصول على رقم Facebook الإعجابات. اطرح سؤال في قسم التعليقات إذا كان لديك أي شك أو تفكير ، شكرًا!

ملحوظة المحرر: هذا هو مكتوب من قبل جيو بول ل Hongkiat.com. Geo هو مطور ويب / iPhone مستقل يتمتع بالعمل مع PHP و Codeigniter و WordPress و jQuery و Ajax. لديه 4 سنوات من الخبرة في PHP وخبرة سنتين في تطوير تطبيقات iniPhone.