Hogyan jelenítsük meg / frissítsük a „Facebook-szerelmeket” a Node.js használatával

Az előző bejegyzésből származó mintakódok kidolgozásával az érzés, hogy a Node.js. A mai poszton egy gyakorlati forgatókönyvet dobunk, amely egyértelműen mutatja a Node.js használatát eseményalapú programozásban.

Egy egyszerű szkriptet fogunk létrehozni, amely egy adott Facebook oldal "Facebook szerelmeseinek" számát adja ki. Ráadásul egy további funkciót fogunk dobni, amely 2 másodpercenként frissíti a "Facebook szerelmeseinek" számát.

A kimenet egyszerű és egyszerű lesz, valószínűleg úgy néz ki, mint ez: "Kedvelések száma: 2630405", és rajtad múlik, hogy a CSS használatával stílusosítsa, kezdjük el!

Ötletet adni neked

Mielőtt bemerülnénk a Node.js használatába, vessünk egy pillanatot arra, hogy azt gondoljuk, amit általában a közös szerveroldali programozási nyelvekkel (például PHP-vel) csinálunk. Ha úgy gondolja, hogy egy AJAX hívást szeretne megkeresni, akkor a számát kedvel 2 másodpercenként - helyes - de ez lehet potenciálisan növelheti a szerver fölött.

Figyelembe vehetjük betekintés graph.facebook.com ami a időigényes I / O művelet. Tekintsünk 5 felhasználót, akik ugyanazt az oldalt érik el (ami a számot adja meg) kedvel). A hozzáférés száma graph.facebook.com 2 másodperc múlva 10 lesz, mert mindenki frissíti a számát kedvel 2 másodpercenként egyszer külön szálként fog végrehajtani.

Ez nem szükséges a Node.js kiszolgáló megvalósításakor. Csak egy hozzáférés a Facebook szerverhez szükséges és a idő az eredmény megszerzéséhez és kiadásához (. \ t kedvel) jelentősen csökkenthető.

De hogyan fogjuk ezt végrehajtani? Ezt fogjuk megtudni az alábbi szakaszokban.

Elkezdeni

Mielőtt elkezdenénk, a kell telepítsük és futtassuk a Node.js-ot v8 környezetbarát web hosting számlán. Nézze meg a következő témaköröket: "Első lépések a Node.js használatával" és "Node.js telepítése" az előző cikkünkben, a Kezdő útmutató Node.js-hoz, ha nem.

A szerveren mi hozzáférés graph.facebook.com 2 másodperces intervallumban és frissítse a számot kedvel. Hívjuk ezt "1. program". Készítünk egy oldalt, hogy 2 másodpercenként frissítse magát az AJAX-on.

Tekintsünk sok felhasználót, akik ugyanazt az oldalt használják. Minden felhasználó AJAX kérésére egy eseményfigyelő csatlakozik a kiszolgálóhoz az "ACTION1" befejezéséhez. Tehát, ha az "ACTION1" befejeződött, az eseményfigyelők bekapcsolódnak.

Nézzük meg a szerveroldali kódot.

A kódok:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = új események.EventEmitter (); get_data () var request = facebook_client.request ("GET", "/ 19292868552", "host": "graph.facebook.com") függvény; request.addListener ("válasz", függvény (válasz) var body = ""; response.addListener ("adat", függvény (adat) body + = data;); response.addListener ("vég", függvény ( ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  my_http.createServer (funkció (kérés, válasz) var my_path = url.parse (request.url) .pathname; ha (my_path === "/ getdata") var listener = facebook_emitter.once ("adat", funkció (data) response.writeHeader (200, "Content-Type": "text / plain"); válasz.write (data); response.end ();); más load_file (my_path, válasz) ;). (8080); setInterval (get_data, 1000); sys.puts ("Kiszolgáló fut 8080-on"); 

Kódok Magyarázat:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = új események.EventEmitter (); 

Létrehozunk egy HTTP-ügyfél hozzáférni a Facebook Graph API-hoz facebook_client. Szükségünk van rá EventEmitter () funkció, amely akkor indul el, amikor az "ACTION1" befejeződött.

Ez az alábbi kódban lesz egyértelmű.

 get_data () var request = facebook_client.request ("GET", "/ 19292868552", "host": "graph.facebook.com") függvény; request.addListener ("válasz", függvény (válasz) var body = ""; response.addListener ("adat", függvény (adat) body + = data;); response.addListener ("vég", függvény ( ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  

Funkció get_data az adatokat a Facebook API hívásából szerez. Először hozzon létre GET kérést használni a kérés a következő szintaxis módszere:

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

A szám “19292868552” az oldal Facebook azonosítója, amelyhez hozzá kell férnünk hozzá. Tehát az utolsó oldal, amelyet megpróbálunk elérni: http://graph.facebook.com/19292868552. Miután megkaptuk a kérést, szükségünk van rá add hozzá három hallgatót, illetve az alábbiak:

1. Válasz - Ez a hallgató akkor jelenik meg, amikor a kérés adatokat fogad. Itt egy üres karakterláncra adott válasz testét állítjuk be.
2. Adat - Mivel a Node.js aszinkron, az adatokat darabként kapjuk meg. Ezt az adatot a test változójába adjuk a test felépítéséhez.
3. vég - Ez a hallgató akkor jelenik meg, amikor a fenti "ACTION1" befejeződött. A Facebook Graph API hívás által visszaadott adatok JSON formátumban adják vissza az adatokat. Tehát a JavaScript függvény segítségével átalakítjuk a JSON tömböt JSON.parse.

Láthatjuk, hogy a hallgató be van kapcsolva event_emitter tárgy. Mi az "ACTION1" végén ki kell kapcsolnia. A hallgatót a módszerrel kifejezetten kiváltjuk facebook_emitter.emit.

 "id": "19292868552", "név": "Facebook platform", "kép": "http://profile.ak.fbcdn.net/hprofile-ak-ash2/211033_19292868552_7506301_s.jpg", "link": "https://www.facebook.com/platform", "szereti": 2738595, "kategória": "Termék / szolgáltatás", "weboldal": "http://developers.facebook.com", "felhasználónév": "platform", "megalapozott": "2007. május", "company_overview": "A Facebook Platform lehetővé teszi, hogy bárki társadalmi alkalmazásokat építhessen a Facebookon és a weben.", "küldetés": "A web nyitottabbá és szociálisabbá tétele". "parkoló": "street": 0, "lot": 0, "valet": 0,

A fenti a Facebook Graph API hívás válaszát mutatja. Annak érdekében, hogy megkapja a számot kedvel: vegye figyelembe az objektum objektumát, konvertálja azt stringre és átadja kibocsát funkció.

Miután ezt a lépést megtettük vég a kérés.

 my_http.createServer (funkció (kérés, válasz) var my_path = url.parse (request.url) .pathname; ha (my_path === "/ getdata") var listener = facebook_emitter.once ("adat", függvény ( data) response.writeHeader (200, "Content-Type": "text / plain"); válasz.write (data); response.end ();); other load_file (my_path, válasz); ). (8080); setInterval (get_data, 1000); 

A kiszolgáló létrehozása hasonló az előző bemutatóhoz - kis változással. Minden URL-címhez (kivéve: / getdata) mi töltse be a megfelelő statikus fájlt a load_file funkció korábban definiáltuk.

A http: // localhost: 8080 / getdata az AJAX-kérelem URL-címe. Minden AJAX kérésünkben csatoljon egy eseményfigyelőt facebook_emitter. Ez hasonló a addListener de a hallgató a membránszivárgás elkerülése érdekében a hallgatót meghalják. Ha csak meg kell vizsgálnia helyettesíteni a egyszer val vel addListener. Mi is hívjuk get_data 1 másodpercenként egyszer működhet a funkció setInterval.

Ezután létrehozzuk a HTML oldalt, ahol a kimenet jelenik meg.

A kódok:

         
Kedvelések száma: Betöltés… 
    

Kódok Magyarázat:

A jQuery AJAX rész elég önmagában magyarázható. Nézd meg a hívást load_content funkció. Úgy néz ki végtelen hurkot futtat, és igen. Így a szám kedvel frissül.

Minden AJAX hívás az 1 másodperces átlagos idővel késik mivel az ilyen hívások indításának késleltetése 1 másodperc lesz a kiszolgálótól. Az AJAX kérés hiányos formában lesz az 1 másodpercig.

Szóval ott van - egy módszer, amely késlelteti az AJAX válaszát a szerverről, hogy megkapja a Facebook számát kedvel. Ha bármilyen kétsége vagy gondolatod van, nézd meg a megjegyzést szekciónkban!

A szerkesztő megjegyzése: Ezt a bejegyzést írta Geo Paul Hongkiat.com részére. A Geo független web / iPhone fejlesztő, aki a PHP, a Codeigniter, a WordPress, a jQuery és az Ajax munkáival dolgozik. 4 éves tapasztalattal rendelkezik a PHP-ben és 2 éves tapasztalattal rendelkezik a fejlesztés fejlesztésében.