Node.jsを使用して「Facebookのようなもの」を表示/更新する方法

前の記事のサンプルコードを作成することで、Node.jsを使用することの実際の利点は何かを実感することができます。本日の記事では、イベントベースのプログラミングにおけるNode.jsの使用を明確に示す実用的なスクリプトを投入しました。.

特定のFacebookページの「Facebookが好き」の数を出力する簡単なスクリプトを作成します。そしてそれに加えて、2秒ごとに「Facebookが好き」の数を更新する追加機能を投入します。.

出力は単純でわかりやすいものになるでしょう。おそらく "Like of Likes：2630405"のようになり、CSSを使用してスタイルを設定するのはあなた次第です。それでは始めましょう。!

あなたにアイデアを与えるために

Node.jsを使い始める前に、一般的なサーバーサイドのプログラミング言語（PHPなど）を使用して通常行うことを考えてみましょう。あなたがAJAXに電話をかけての数を調べることを考えているならば好き 2秒ごとに - あなたは正しいです - しかしこれは可能性があります サーバーのオーバーヘッドを増やす可能性がある.

検討できるアクセスする graph.facebook.com これは 時間のかかるI / O操作. 5人のユーザーが同じページにアクセスしたとします。好き）アクセス数 graph.facebook.com 2秒以内に10になります。好き 2秒に1回 別のスレッドとして実行されます.

Node.jsサーバー実装では必要ありません。のみ Facebookサーバーへの1回のアクセスが必要です そしてその 結果を取得して出力する時間（好き）大幅に減らすことができます.

しかし、これをどのように実装するのでしょうか。それが以下のセクションで見つけられることです。.

入門

始める前に、あなたはすべきです Node.jsがv8環境対応のWebホスティングアカウントにインストールされ、実行されていること. 前の記事「Node.jsの初心者向けガイド」のトピック「Node.jsを始めよう」および「Node.jsをインストールする」を調べてください。.

サーバーでは アクセス graph.facebook.com 2秒間隔で そして の数を更新する好き. これを "と呼びましょう。アクション1"2秒ごとにAJAX経由で更新されるようにページを準備します。.

同じページにアクセスしている多数のユーザーを検討してください. すべてのユーザーの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"）; request.addListener（ "response"、関数（response）var body = ""; response.addListener（ "data"、関数（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（）;）; else load_file（my_path、response）聞く（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クライアント Facebook Graph APIにアクセスする方法 facebook_client. 我々も必要です EventEmitter（） "ACTION1"が完了したときにトリガーされる機能.

これは下記のコードで明らかになります。.

 関数get_data（）var request = facebook_client.request（ "GET"、 "/ 19292868552"、"host"： "graph.facebook.com"）; request.addListener（ "response"、関数（response）var body = ""; response.addListener（ "data"、関数（data）body + = data;）; response.addListener（ "end"、function（） ）var data = JSON.parse（body）; facebook_emitter.emit（ "data"、String（data.likes））;）;）; request.end（）;

関数 get_data Facebook API Callからデータを取得します. はじめに GETリクエストを作成する を使用して 要求 次の構文のメソッド

 Client.request（ 'GET'、 'get_url'、"host"： "host_url"）;

数字 “19292868552” 詳細にアクセスするために必要なページのFacebook IDです。それで、私たちがアクセスしようとしている最後のページはhttp://graph.facebook.com/19292868552です。要求をした後に我々はする必要があります それに3人のリスナーを追加する, それぞれ以下：

応答 - このリスナーは、リクエストがデータの受信を開始したときにトリガーされます。ここではレスポンスの本文を空の文字列に設定します。.
データ - Node.jsは非同期なので、データはチャンクとして受信されます。このデータは、ボディを構築するためにボディ変数に追加されます。.
終わり - このリスナーは、上記で指定された "ACTION1"が完了したときにトリガーされます。 Facebook Graph API呼び出しによって返されるデータは、JSON形式のデータを返します。 JavaScript関数を使って文字列をJSON配列に変換します。 JSON.parse.

あなたはリスナーがのために添付されていることがわかります event_emitter オブジェクト我々 "ACTION1"の最後に起動する必要があります. メソッドでリスナーを明示的にトリガーします facebook_emitter.emit.

 "id"： "19292868552"、 "名前"： "Facebookプラットフォーム"、 "画像"： "http://profile.ak.fbcdn.net/hprofile-ak-ash2/211033_19292868552_7506301_s.jpg"、 "リンク"： "https://www.facebook.com/platform"、 "お気に入り"：2738595、 "カテゴリ"： "製品/サービス"、 "Webサイト"： "http://developers.facebook.com"、 "ユーザー名"： "platform"、 "設立"： "2007年5月"、 "company_overview"： "Facebook Platformは誰でもFacebookやウェブ上でソーシャルアプリを構築することを可能にします。"、 "ミッション"： "ウェブをもっとオープンでソーシャルにするために" "駐車場"："通り"：0、 "ロット"：0、 "バレー"：0,

上記はFacebook Graph API呼び出しの応答を表しています。の数を取得するために好き： データオブジェクトのlikesオブジェクトを取得します, それを文字列に変換する そして それを渡す 発する 関数.

この行動の後、私たちは 終わり リクエスト.

 my_http.createServer（function（request、response）var my_path = url.parse（request.url）.pathname; if（my_path === "/ getdata"）varリスナー= facebook_emitter.once（ "data"、function（ 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）;

サーバーの作成は前のチュートリアルと似ていますが、少し変更があります。すべてのURLについて（を除く） / getdata）我々 を使用して対応する静的ファイルをロードします。 load_file 関数 以前に定義した.

の http：// localhost：8080 / getdata AJAXリクエストのURLです。 AJAXリクエストごとに にイベントリスナーを接続する facebook_emitter. それはに似ています addListener しかしリスナー メモリリークを避けるためにリスナーが発行された後にkillされる. チェックアウトする必要がある場合 交換する 一回 と addListener. 私達はまた呼出します get_data 機能により1秒に1回機能 setInterval.

次に、出力が表示されるHTMLページを作成します。.

コード：

Facebookのいいね！

好みの数： 読み込み中…

コード説明

jQuery AJAXの部分は一目瞭然です。の呼び出しをチェックしてください load_content 関数。それはそれのように見えます 無限ループを実行しています, はい、そうです。それはどのようにの数です好き自分自身を更新します.

各AJAXコール 平均時間1秒遅れます そのような各呼び出しのトリガーの遅延はサーバーから1秒になります。 AJAXリクエストはその1秒間は不完全な形式になります.

Facebookの数を取得するためにサーバーからのAJAX応答を遅らせる方法です。好き. 疑問や考えがある場合は、コメント欄に質問を投稿してください。ありがとう!

編集者注： この投稿はによって書かれています ジオポール Hongkiat.comのために。 Geoは独立したWeb / iPhone開発者で、PHP、Codeigniter、WordPress、jQuery、およびAjaxを扱うことを楽しんでいます。彼は4年間のPHP経験と2年間のiniPhoneアプリケーション開発経験を持っています。.