כיצד להציג / עדכון פייסבוק אוהב באמצעות

על ידי עבודה את קודי המדגם מן ההודעה הקודמת, אתה יכול לקבל את ההרגשה של מה היתרון בפועל של שימוש Node.js. בהודעה של היום, אנו זורקים תסריט מעשי המדגים בבירור את השימוש ב- Node.js בתכנות מבוסס אירוע.

אנו ניצור סקריפט פשוט שיוציא את מספר הפייסבוק "אוהב" של דף פייסבוק מסוים. בנוסף על כך, אנחנו זורקים תכונה נוספת אשר יעדכן את מספר "פייסבוק אוהב" כל 2 שניות.

הפלט יהיה פשוט פשוט, כנראה נראה משהו כזה: "מספר סימוני 'אהבתי': 2630405" וזה תלוי בך כדי לסגנו את זה באמצעות CSS, בואו נתחיל אז!

לתת לך רעיון

לפני שאנחנו לצלול לתוך באמצעות Node.js, בואו לקחת רגע לחשוב מה אנחנו בדרך כלל עושים את זה עם שפת תכנות משותפת בצד השרת (כמו PHP). אם אתה חושב לבצע שיחת AJAX כדי למצוא את מספר אוהב בכל 2 שניות - אתה צודק - אבל זה יכול פוטנציאל להגדיל את השרת תקורה.

אנחנו יכולים לשקול גישה גרף אשר יהיה זמן רב I / O המבצע. שקול 5 משתמשים גישה לאותו דף (אשר פלט מספר אוהב). מספר הגישה אל גרף ב 2 שניות יהפוך 10, כי כולם לעדכן שלו / שלה מספר אוהב פעם ב 2 שניות וזה יבוצע כחוט נפרד.

זה לא הכרחי עם יישום שרת Node.js. רק נדרשת גישה אחת לשרת הפייסבוק וה זמן להגיע פלט התוצאה (מספר אוהב) יכול להיות מופחת במידה ניכרת.

עם זאת, איך אנחנו הולכים ליישם את זה? זה מה שאנחנו הולכים לגלות בסעיפים הבאים.

מתחילים

לפני שנתחיל, את צריכה יש Node.js מותקן ופועל על סביבת אירוח אינטרנט נתמך v8 אירוח. בדוק את הנושאים, "תחילת העבודה עם Node.js" ו "התקנת Node.js" במאמר הקודם שלנו, מדריך למתחילים Node.js אם לא.

בשרת אנחנו גישה גרף במרווח של 2 שניות ו עדכן את מספר אוהב. בואו נקרא לזה "פעולה 1"אנחנו נכין דף כך שהוא יעדכן את עצמו באמצעות AJAX כל 2 שניות.

שקול משתמשים רבים ניגשים לאותו דף. לבקשת AJAX של כל משתמש מחובר למאזין האירוע בשרת להשלמת "ACTION1". אז בכל פעם את "ACTION1" הושלמה המאזינים האירוע יופעלו.

בואו נסתכל על הקוד של צד השרת.

הקודים:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = new events.EventEmitter (); הפונקציה get_data () var request = facebook_client.request ("GET", "19292868552", "host": "graph.facebook.com"); (function) (body = + data;); Resp.addListener ("end", function () ) var data = JSON.parse (body); facebook_emitter.emit ("נתונים", מחרוזת (data.likes));); request.end ();  my_http.createServer (פונקציה (בקשה, תגובה) var my_path = url.parse (request.url) .pathname, אם (my_path === "/ getdata") var listener = facebook_emitter.once ("data", function (data) (תגובה); תגובה (); (;;;); אחר 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 = new events.EventEmitter ();

אנו יוצרים לקוח HTTP כדי לגשת לפייסבוק API גרף של facebook_client. אנחנו גם צריכים את EventEmitter () פונקציה אשר תפעיל כאשר "ACTION1" הושלמה.

זה יהיה ברור בקוד המתואר להלן.

 הפונקציה get_data () var request = facebook_client.request ("GET", "19292868552", "host": "graph.facebook.com"); (function) (body = + data;); Resp.addListener ("end", function () ) var data = JSON.parse (body); facebook_emitter.emit ("נתונים", מחרוזת (data.likes));); request.end ();

פונקציה get_data מאחסן נתונים משיחת ה- API של Facebook. אנחנו הראשונים ליצור בקשה GET משתמש ב בקשה השיטה של התחביר הבא:

 Client.request ('GET', 'get_url', "host": "host_url");

המספר “19292868552” הוא מזהה פייסבוק של הדף שבו אנחנו צריכים לגשת לפרטיו. אז הדף האחרון שאנחנו מנסים לגשת הופך: http://graph.facebook.com/19292868552. לאחר ביצוע הבקשה אנחנו צריכים להוסיף שלושה מאזינים אליו, בהתאמה:

תגובה - מאזין זה מופעל כאשר הבקשה מתחילה לקבל נתונים. כאן אנו מציבים את גוף התגובה על חוט ריק.
נתונים - כמו Node.js הוא אסינכרוני הנתונים מתקבל כמו גושים. נתונים אלה מתווסף משתנה הגוף כדי לבנות את הגוף.
סוף - מאזין זה מופעל כאשר "ACTION1" שצוין לעיל הושלמה. הנתונים שחוזרים על ידי שיחת ה- 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": msgstr "https://www.facebook.com/platform", "אהבתי": 2738595, "category": "Product / service", "website": "http://developers.facebook.com", "username": "פלטפורמת פייסבוק מאפשרת לכל אחד לבנות אפליקציות חברתיות בפייסבוק ובאינטרנט", "משימה": "כדי להפוך את האינטרנט ליותר פתוח וחברתי", " "parking": "street": 0, "הרבה": 0, "valet": 0,

האמור לעיל מייצג את התגובה של שיחת ה- API של גרף ה- Facebook. כדי לקבל את מספר אוהבYou קח את האובייקט 'אהבתי' של אובייקט הנתונים, להמיר אותו מחרוזת ו להעביר את זה לפלוט פונקציה.

לאחר פעולה זו אנו ח הבקשה.

 My_http.createServer (function, Request) (var my_path = url.parse (request.url) .pathname, אם (my_path === "/ getdata") var listener = facebook_emitter.once ("data", function ( נתונים) תגובה.תמונההיאדר (200, "Content-Type": "text / plain"); Resp.write (נתונים); Resp.end ();); אחר load_file (my_path, תגובה); ) האזן (8080); setInterval (get_data, 1000);

יצירת השרת דומה לשיעור הקודם - עם שינוי קטן. עבור כל כתובת אתר (למעט / getdata) אנחנו לטעון את הקובץ סטטי המתאים באמצעות עומס פונקציה הגענו מוקדם יותר.

ה http: // localhost: 8080 / getdata היא כתובת האתר עבור בקשת AJAX. בכל בקשת AJAX אנו לצרף מאזין אירועים ל facebook_emitter. זה דומה ל AddListener אלא המאזין הוא נהרג לאחר המאזין נפלט כדי למנוע דליפת זיכרון. אם אתה צריך לבדוק את זה רק החלף את ה פעם אחת עם AddListener. אנחנו גם קוראים get_data פונקציה פעם אחת ב 1 השני על ידי הפונקציה setInterval.

לאחר מכן, אנו יוצרים את דף ה- HTML שבו מוצג הפלט.

הקודים:

לייקים בפייסבוק

מספר סימוני 'אהבתי': טעינה…

קודים הסבר:

החלק JJuery AJAX הוא די מובן מאליו. האם לבדוק את השיחה של טעון פונקציה. זה נראה כמו זה הוא מפעיל לולאה אינסופית, וכן זה. כך מספר אוהב מעדכנת את עצמה.

כל שיחת AJAX יידחה על ידי הזמן הממוצע של 1 השני כמו העיכוב מפעיל של כל שיחה כזו יהיה 1 שנייה מהשרת. הבקשה AJAX יהיה טופס חלקי עבור זה 1 השני.

אז הנה לך - שיטה של דחיית תגובה AJAX מהשרת כדי לקבל את מספר פייסבוק אוהב. זרוק שאלה בסעיף הערות שלנו אם יש לך ספק או מחשבה, תודה!

הערת העורך: פוסט זה נכתב על ידי גיאו פול עבור Hongkiat.com. Geo היא עצמאית אינטרנט / iPhone מפתח אשר נהנה לעבוד עם PHP, Codeigniter, וורדפרס, jQuery ו Ajax. יש לו 4 שנות ניסיון ב- PHP ו- 2 שנות ניסיון בפיתוח יישומים.