Jak wyświetlić / zaktualizować „Likes na Facebooku” za pomocą Node.js

Opracowując przykładowe kody z poprzedniego posta, możesz odczuć, jaka jest rzeczywista korzyść z używania Node.js. W dzisiejszym poście wprowadzamy praktyczny skrypt, który wyraźnie pokazuje użycie Node.js w programowaniu opartym na zdarzeniach.

Stworzymy prosty skrypt, który wyświetli liczbę „polubień na Facebooku” konkretnej strony na Facebooku. Ponadto wprowadzimy dodatkową funkcję, która aktualizuje liczbę „polubień na Facebooku” co 2 sekundy.

Dane wyjściowe będą proste i proste, prawdopodobnie wyglądają mniej więcej tak: „Liczba Lików: 2630405” i od Ciebie zależy, czy stylizujesz je za pomocą CSS, ale zacznijmy wtedy!

Aby dać ci pomysł

Zanim zagłębimy się w korzystanie z Node.js, zastanówmy się przez chwilę, co normalnie zrobilibyśmy ze zwykłymi językami programowania po stronie serwera (np. PHP). Jeśli myślisz o wywołaniu AJAX, aby znaleźć numer lubi co 2 sekundy - masz rację - ale to może potencjalnie zwiększyć obciążenie serwera.

Możemy rozważyć dostęp graph.facebook.com co byłoby a czasochłonna operacja we / wy. Rozważ 5 użytkowników uzyskujących dostęp do tej samej strony (która wyświetla liczbę lubi). Numer dostępu do graph.facebook.com w ciągu 2 sekund zmieni się na 10, ponieważ każdy zaktualizuje swój numer lubi raz na 2 sekundy i to zostanie wykonany jako osobny wątek.

Nie jest to konieczne przy implementacji serwera Node.js. Tylko wymagany jest jeden dostęp do serwera Facebook i czas na uzyskanie i wyprowadzenie wyniku (liczba lubi) można znacznie zmniejszyć.

Jak jednak zamierzamy to wdrożyć? Tego właśnie dowiemy się w poniższych sekcjach.

Rozpoczęcie pracy

Zanim zaczniemy, twoje powinno mieć zainstalowane i uruchomione Node.js na obsługiwanym przez środowisko v8 koncie hostingowym. Sprawdź tematy „Rozpoczęcie pracy z Node.js” i „Instalowanie Node.js” w naszym poprzednim artykule, Przewodnik dla początkujących do Node.js, jeśli nie masz.

Na serwerze my dostęp graph.facebook.com w odstępie 2 sekund i zaktualizuj liczbę lubi. Nazwijmy to „AKCJA1". Przygotujemy stronę, aby aktualizowała się za pośrednictwem AJAX co 2 sekundy.

Rozważ wielu użytkowników korzystających z tej samej strony. Dla żądania AJAX każdego użytkownika dołączany jest na serwerze detektor zdarzeń w celu ukończenia „ACTION1”. Tak więc po zakończeniu „ACTION1” zostaną uruchomione detektory zdarzeń.

Spójrzmy na kod po stronie serwera.

Kody:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = new events.EventEmitter (); funkcja get_data () var request = facebook_client.request ("GET", "/ 19292868552", "host": "graph.facebook.com"); request.addListener („odpowiedź”, funkcja (odpowiedź) var body = ””; response.addListener („dane”, funkcja (dane) ciało + = dane;); response.addListener („koniec”, funkcja ( ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  my_http.createServer (funkcja (żądanie, odpowiedź) var moja_ścieżka = url.parse (request.url) .pathname; if (moja_ścieżka === "/ getdata") var listener = facebook_emitter.once ("dane", funkcja (data) response.writeHeader (200, "Content-Type": "text / plain"); response.write (data); response.end ();); else plik_przesuwu (moja_ścieżka, odpowiedź) ;). listen (8080); setInterval (get_data, 1000); sys.puts („Serwer działający na 8080”); 

Kody Objaśnienie:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = new events.EventEmitter (); 

Tworzymy Klient HTTP aby uzyskać dostęp do API Facebook Graph facebook_client. Potrzebujemy także EventEmitter () funkcja, która zostanie uruchomiona po zakończeniu „ACTION1”.

Będzie to jasne w opisanym poniżej kodzie.

 funkcja get_data () var request = facebook_client.request ("GET", "/ 19292868552", "host": "graph.facebook.com"); request.addListener („odpowiedź”, funkcja (odpowiedź) var body = ””; response.addListener („dane”, funkcja (dane) ciało + = dane;); response.addListener („koniec”, funkcja ( ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  

Funkcjonować otrzymać dane pobiera dane z wywołania API Facebooka. Najpierw utwórz żądanie GET używając żądanie metoda o następującej składni:

 Client.request („GET”, „get_url”, „host”: „host_url”); 

Numer “19292868552” to identyfikator Facebook strony, której potrzebujemy, aby uzyskać dostęp do jej szczegółów. Ostatnią stroną, do której próbujemy uzyskać dostęp, jest: http://graph.facebook.com/19292868552. Po złożeniu wniosku musimy dodaj do niego trzech słuchaczy, odpowiednio następujące:

1. Odpowiedź - Ten detektor jest wyzwalany, gdy żądanie zaczyna odbierać dane. Tutaj ustawiamy treść odpowiedzi na pusty ciąg.
2. Dane - Ponieważ Node.js jest asynchroniczny, dane są odbierane jako porcje. Te dane są dodawane do zmiennej ciała, aby zbudować ciało.
3. Koniec - Ten detektor jest wyzwalany po zakończeniu podanej powyżej czynności „ACTION1”. Dane zwracane przez wywołanie API Facebook Graph zwracają dane w formacie JSON. Konwertujemy więc łańcuch na tablicę JSON za pomocą funkcji JavaScript JSON.parse.

Widać, że słuchacz jest dołączony do event_emitter obiekt. My trzeba go uruchomić na końcu „ACTION1”. Wyzwalamy słuchacza jawnie tą metodą 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”, „likes”: 2738595, „category”: „Product / service”, „website”: „http://developers.facebook.com”, „username”: „platforma”, „założona”: „maj 2007”, „company_overview”: „Platforma Facebook umożliwia każdemu budowanie aplikacji społecznościowych na Facebooku i w sieci.”, „misja”: „Aby uczynić sieć bardziej otwartą i społeczną”. „parkowanie”: „ulica”: 0, „lot”: 0, „lokaj”: 0,

Powyższe przedstawia reakcję wywołania API wykresu Facebook. Aby uzyskać liczbę lubi: weź obiekt podobny obiektowi danych, przekonwertuj go na łańcuch i przekazać to do emitować funkcjonować.

Po tej akcji my koniec prośba.

 my_http.createServer (funkcja (żądanie, odpowiedź) var moja_ścieżka = url.parse (request.url) .pathname; if (moja_ścieżka === "/ getdata") var listener = facebook_emitter.once ("dane", funkcja ( data) response.writeHeader (200, "Content-Type": "text / plain"); response.write (data); response.end ();); else load_file (my_path, response); ). listen (8080); setInterval (get_data, 1000); 

Tworzenie serwera jest podobne do poprzedniego samouczka - z małą zmianą. Dla każdego adresu URL (z wyjątkiem /otrzymać dane) my załaduj odpowiedni plik statyczny za pomocą Załaduj plik funkcjonować zdefiniowaliśmy wcześniej.

The http: // localhost: 8080 / getdata to adres URL żądania AJAX. W każdym żądaniu AJAX dołączyć odbiorcę zdarzenia do facebook_emitter. Jest podobny do addListener ale słuchacz jest zabijany po wysłaniu słuchacza, aby uniknąć wycieku pamięci. Jeśli chcesz to sprawdzić Zastąp pewnego razu z addListener. Nazywamy też otrzymać dane funkcja raz na 1 sekundę dzięki funkcji setInterval.

Następnie tworzymy stronę HTML, na której wyświetlane jest wyjście.

Kody:

         
Liczba polubień: Ładuję… 
    

Kody Objaśnienie:

Część jQuery AJAX jest dość oczywista. Sprawdź połączenie load_content funkcjonować. To wygląda jak uruchamia nieskończoną pętlę, i tak jest. Tak właśnie wygląda liczba lubi się aktualizuje.

Każde połączenie AJAX będzie opóźniony o średni czas 1 sekundy ponieważ opóźnienie wyzwolenia każdego takiego połączenia będzie wynosić 1 sekundę z serwera. Żądanie AJAX będzie niekompletne przez 1 sekundę.

Tak więc - metoda opóźniania odpowiedzi AJAX z serwera, aby uzyskać numer Facebooka lubi. Upuść pytanie w naszej sekcji komentarzy, jeśli masz jakiekolwiek wątpliwości lub myśli, dzięki!

Nota redaktora: Ten wpis jest napisany przez Geo Paul dla Hongkiat.com. Geo to niezależny programista WWW / iPhone, który lubi pracować z PHP, Codeigniter, WordPress, jQuery i Ajax. Ma 4 lata doświadczenia w PHP i 2 lata doświadczenia w tworzeniu aplikacji iniPhone.