Comment afficher / mettre à jour les Likes Facebook à l'aide de Node.js

En élaborant les exemples de codes de l'article précédent, vous aurez peut-être une idée du véritable avantage de l'utilisation de Node.js. Dans le post d'aujourd'hui, nous présentons un script pratique qui montre clairement l'utilisation de Node.js dans la programmation par événements..

Nous allons créer un script simple qui indique le nombre de "j'aime Facebook" d'une page Facebook donnée. Et en plus de cela, nous ajouterons une fonctionnalité supplémentaire qui mettra à jour le nombre de "J'aime" de Facebook toutes les 2 secondes..

La sortie sera simple et claire. Elle ressemble probablement à ceci: "Nombre de likes: 2630405" et il vous appartient de la personnaliser à l'aide du CSS, commençons ensuite.!

Pour vous donner une idée

Avant de nous lancer dans l'utilisation de Node.js, prenons un moment pour réfléchir à ce que nous ferions normalement avec les langages de programmation côté serveur courants (comme PHP). Si vous envisagez de passer un appel AJAX pour connaître le nombre de aime toutes les 2 secondes - vous avez raison - mais cela peut augmenter potentiellement la surcharge du serveur.

Nous pouvons considérer accédant graph.facebook.com ce qui serait un opération d'E / S fastidieuse. Considérez 5 utilisateurs accédant à la même page (qui affiche le nombre de aime). Le nombre d'accès à graph.facebook.com dans 10 secondes, ce sera 10, car tout le monde mettra à jour son nombre de aime une fois en 2 secondes et sera exécuté comme un fil séparé.

Ce n'est pas nécessaire avec une implémentation de serveur Node.js. Seulement un accès au serveur Facebook est requis et le temps pour obtenir et afficher le résultat (nombre de aime) peut être grandement réduit.

Cependant, comment allons-nous mettre cela en œuvre? C'est ce que nous allons découvrir dans les sections ci-dessous.

Commencer

Avant de commencer, vous devriez avoir Node.js installé et en cours d'exécution sur un compte d'hébergement Web pris en charge par l'environnement v8. Consultez les rubriques "Initiation à Node.js" et "Installation de Node.js" dans notre article précédent, Guide du débutant pour Node.js, si vous ne l'avez pas déjà fait..

Dans le serveur nous accès graph.facebook.com à un intervalle de 2 secondes et mettre à jour le nombre de aime. Appelons cela comme "ACTION1". Nous allons préparer une page pour qu’elle se mette à jour automatiquement via AJAX toutes les 2 secondes.

Considérez de nombreux utilisateurs accédant à la même page. Pour chaque demande AJAX d'un utilisateur, un écouteur d'événement est associé au serveur pour l'achèvement de "ACTION1".. Ainsi, chaque fois que "ACTION1" est terminé, les écouteurs d'événements sont déclenchés.

Jetons un coup d'oeil au code du côté serveur.

Les codes:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = new events.EventEmitter (); function get_data () var request = facebook_client.request ("GET", "/ 19292868552", "hôte": "graph.facebook.com"); request.addListener ("response", fonction (response) var body = ""; response.addListener ("data", fonction (data) body + = data;); response.addListener ("end", function ( ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  my_http.createServer (fonction (demande, réponse) var chemin_mis = url.parse (demande.url). nom de chemin; if (mon chemin === "/ getdata") var listener = facebook_emitter.once ("données", fonction (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); sys.puts ("serveur fonctionnant sur 8080"); 

Explication des codes:

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

Nous créons un Client HTTP accéder aux API de Facebook facebook_client. Nous avons aussi besoin de EventEmitter () fonction qui se déclenchera lorsque "ACTION1" sera terminé.

Cela sera clair dans le code décrit ci-dessous.

 function get_data () var request = facebook_client.request ("GET", "/ 19292868552", "hôte": "graph.facebook.com"); request.addListener ("response", fonction (response) var body = ""; response.addListener ("data", fonction (data) body + = data;); response.addListener ("end", function ( ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  

Une fonction get_data récupère les données de l'appel API Facebook. Nous d'abord créer une requête GET en utilisant le demande méthode de la syntaxe suivante:

 Client.request ('GET', 'get_url', "hôte": "hôte_url"); 

Le nombre “19292868552” est l'ID Facebook de la page dont nous avons besoin pour accéder à ses détails. La dernière page à laquelle nous essayons d'accéder devient: http://graph.facebook.com/19292868552. Après avoir fait la demande, nous devons ajouter trois auditeurs, respectivement les suivantes:

1. Réponse - Cet écouteur est déclenché lorsque la demande commence à recevoir des données. Ici, nous définissons le corps de la réponse sur une chaîne vide.
2. Les données - Comme Node.js est asynchrone, les données sont reçues sous forme de morceaux. Ces données sont ajoutées à la variable body pour constituer le corps..
3. Fin - Cet écouteur est déclenché lorsque "ACTION1" spécifié ci-dessus est terminé. Les données renvoyées par l'appel de l'API Facebook Graph renvoient des données au format JSON. Nous convertissons donc la chaîne en tableau JSON à l'aide de la fonction JavaScript JSON.parse.

Vous pouvez voir qu'un auditeur est attaché pour le event_emitter objet. nous besoin de le déclencher à la fin de "ACTION1". Nous déclenchons explicitement l'auditeur avec la méthode facebook_emitter.emit.

 "id": "19292868552", "name": "Plate-forme Facebook", "picture": "http://profile.ak.fbcdn.net/hprofile-ak-ash2/211033_19292868552_7506301_s.jpg", "link": "https://www.facebook.com/platform", "likes": 2738595, "catégorie": "Produit / service", "site Web": "http://developers.facebook.com", "nom d'utilisateur": "plate-forme", "fondée": "mai 2007", "société_vue": "La plate-forme Facebook permet à tout utilisateur de créer des applications sociales sur Facebook et sur le Web.", "mission": "Rendre le Web plus ouvert et social.", "parking": "rue": 0, "lot": 0, "voiturier": 0,

Ce qui précède représente la réponse de l'appel de l'API Graph Facebook. Pour obtenir le nombre de aime: prendre l'objet likes de l'objet de données, le convertir en chaîne et passe le à émettre une fonction.

Après cette action nous fin la demande.

 my_http.createServer (fonction (demande, réponse) var chemin_mis = url.parse (demande.url). nom de chemin; if (mon chemin === "/ getdata") var listener = facebook_emitter.once ("données", fonction ( 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); 

La création du serveur est similaire au didacticiel précédent - avec une petite modification. Pour chaque URL (sauf / getdata) nous charger le fichier statique correspondant en utilisant le fichier de chargement une fonction nous avons défini plus tôt.

le http: // localhost: 8080 / getdata est l'URL de la demande AJAX. Dans chaque demande AJAX, nous attacher un écouteur d'événement à facebook_emitter. C'est semblable à la addListener mais l'auditeur est tué après que l'auditeur soit émis pour éviter une fuite de mémoire. Si vous avez besoin de vérifier juste remplace le une fois que avec addListener. Nous appelons aussi le get_data fonction une fois en 1 seconde par la fonction setInterval.

Ensuite, nous créons la page HTML où la sortie s'affiche.

Les codes:

         
Nombre de J'aime: Chargement… 
    

Explication des codes:

La partie jQuery AJAX est assez explicite. Vérifiez l'appel du load_content une fonction. Ça y ressemble exécute une boucle infinie, et oui ça l'est. Voilà comment le nombre de aime se met à jour.

Chaque appel AJAX sera retardé par le temps moyen de 1 seconde car le délai de déclenchement de chaque appel sera de 1 seconde à partir du serveur. La demande AJAX sera sous une forme incomplète pour cette 1 seconde.

Alors voilà - une méthode pour retarder une réponse AJAX du serveur pour obtenir le nombre de Facebook aime. Laissez tomber la question dans notre section de commentaire si vous avez un doute ou une pensée, merci!

Note de l'éditeur: Cet article est écrit par Geo Paul pour Hongkiat.com. Geo est un développeur Web / iPhone indépendant qui aime travailler avec PHP, Codeigniter, WordPress, jQuery et Ajax. Il a 4 ans d'expérience en PHP et 2 ans en développement d'applications iPhone..