Cara Menampilkan / Memperbarui Suka Facebook Menggunakan Node.js

Dengan mengerjakan kode sampel dari pos sebelumnya, Anda mungkin merasakan apa manfaat sebenarnya dari menggunakan Node.js. Dalam posting hari ini, kami melempar naskah praktis yang dengan jelas menunjukkan penggunaan Node.js dalam pemrograman berbasis acara.

Kami akan membuat skrip sederhana yang menampilkan jumlah "suka Facebook" dari halaman Facebook tertentu. Dan di atas itu, kami akan memasukkan fitur tambahan yang akan memperbarui jumlah "suka Facebook" setiap 2 detik.

Outputnya akan sederhana dan polos, mungkin terlihat seperti ini: "Jumlah Suka: 2630405" dan terserah Anda untuk menatanya menggunakan CSS, mari kita mulai saja!

Untuk Memberi Anda Sebuah Ide

Sebelum kita mulai menggunakan Node.js, mari kita berpikir sejenak tentang apa yang biasanya kita lakukan dengan bahasa pemrograman sisi server yang umum (seperti PHP). Jika Anda berpikir untuk melakukan panggilan AJAX untuk menemukan nomor suka dalam setiap 2 detik - Anda benar - tetapi ini mungkin berpotensi meningkatkan overhead server.

Kita bisa pertimbangkan mengakses graph.facebook.com yang akan menjadi operasi I / O yang memakan waktu. Pertimbangkan 5 pengguna mengakses halaman yang sama (yang menampilkan jumlah suka). Jumlah akses ke graph.facebook.com dalam 2 detik akan menjadi 10, karena semua orang akan memperbarui nomornya suka sekali dalam 2 detik dan itu akan dieksekusi sebagai utas terpisah.

Itu tidak perlu dengan implementasi server Node.js. Hanya diperlukan satu akses ke server Facebook dan waktu untuk mendapatkan dan menampilkan hasilnya (jumlah suka) dapat sangat berkurang.

Namun, bagaimana kita akan menerapkan ini? Itulah yang akan kita temukan di bagian di bawah ini.

Mulai

Sebelum kita mulai, Anda harus memiliki Node.js diinstal dan dijalankan pada akun hosting web yang didukung lingkungan v8. Lihat topik, "Memulai dengan Node.js" dan "Menginstal Node.js" di artikel kami sebelumnya, Panduan Pemula untuk Node.js jika Anda belum.

Di server kami mengakses graph.facebook.com pada interval 2 detik dan perbarui jumlah suka. Sebut ini sebagai "AKSI1". Kami akan menyiapkan halaman sehingga akan memperbarui dirinya sendiri melalui AJAX setiap 2 detik.

Pertimbangkan banyak pengguna mengakses halaman yang sama. Untuk setiap permintaan AJAX pengguna pendengar acara dilampirkan di server untuk penyelesaian "ACTION1". Jadi kapan pun "ACTION1" selesai, pendengar acara akan terpicu.

Mari kita lihat kode sisi server.

Kode:

 var facebook_client = my_http.createClient (80, "graph.facebook.com"); var facebook_emitter = acara baru.EventEmitter (); function get_data () var request = facebook_client.request ("GET", "/ 19292868552", "host": "graph.facebook.com"); request.addListener ("response", function (response) var body = ""; response.addListener ("data", function (data) body + = data;); response.addListener ("end", function ( ) var data = JSON.parse (body); facebook_emitter.emit ("data", String (data.likes)););); request.end ();  my_http.createServer (fungsi (permintaan, respons) var my_path = url.parse (request.url) .pathname; if (my_path === "/ getdata") var listener = facebook_emitter.once ("data", fungsi (data) response.writeHeader (200, "Tipe-Konten": "text / plain"); response.write (data); response.end ();); else load_file (my_path, response) ;) .dengarkan (8080); setInterval (get_data, 1000); sys.puts ("Server Menjalankan pada 8080"); 

Penjelasan Kode:

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

Kami membuat Klien HTTP untuk mengakses Facebook Graph API facebook_client. Kami juga membutuhkan EventEmitter () fungsi yang akan memicu ketika "ACTION1" telah selesai.

Ini akan menjadi jelas dalam kode yang dijelaskan di bawah ini.

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

Fungsi get_data mengambil data dari Panggilan API Facebook. Kami yang pertama buat permintaan GET menggunakan permintaan metode sintaks berikut:

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

Nomor “19292868552” adalah ID Facebook dari halaman yang perlu kita akses detailnya. Jadi halaman terakhir yang kami coba akses menjadi: http://graph.facebook.com/19292868552. Setelah membuat permintaan kita perlu tambahkan tiga pendengar ke dalamnya, masing-masing sebagai berikut:

1. Tanggapan - Pendengar ini terpicu ketika permintaan mulai menerima data. Di sini kita mengatur tubuh respons ke string kosong.
2. Data - Karena Node.js tidak sinkron, data diterima sebagai potongan. Data ini ditambahkan ke variabel tubuh untuk membangun tubuh.
3. Akhir - Pendengar ini dipicu ketika "ACTION1" yang ditentukan di atas telah selesai. Data yang dikembalikan oleh panggilan Facebook Graph API mengembalikan data dalam format JSON. Jadi kami mengonversi string ke array JSON menggunakan fungsi JavaScript JSON.parse.

Anda dapat melihat bahwa pendengar dilampirkan untuk event_emitter obyek. Kita perlu memicunya di akhir "ACTION1". Kami memicu pendengar secara eksplisit dengan metode ini facebook_emitter.emit.

 "id": "19292868552", "name": "Platform Facebook", "picture": "http://profile.ak.fbcdn.net/hprofile-ak-ash2/211033_19292868552_7506301_s.jpg", "tautan": "https://www.facebook.com/platform", "suka": 2738595, "kategori": "Produk / layanan", "situs web": "http://developers.facebook.com", "nama pengguna": "platform", "didirikan": "Mei 2007", "company_overview": "Platform Facebook memungkinkan siapa saja untuk membangun aplikasi sosial di Facebook dan web.", "misi": "Untuk membuat web lebih terbuka dan sosial.", "parking": "street": 0, "lot": 0, "valet": 0,

Di atas mewakili respons panggilan API Grafik Facebook. Untuk mendapatkan nomor suka: ambil objek suka dari objek data, mengubahnya menjadi string dan berikan kepada memancarkan fungsi.

Setelah aksi ini kita akhir Permintaan.

 my_http.createServer (fungsi (permintaan, respons) var my_path = url.parse (request.url) .pathname; if (my_path === "/ getdata") var listener = facebook_emitter.once ("data", function ( data) response.writeHeader (200, "Type-Type": "text / plain"); response.write (data); response.end ();); lain load_file (my_path, response); ) .dengarkan (8080); setInterval (get_data, 1000); 

Membuat server mirip dengan tutorial sebelumnya - dengan sedikit perubahan. Untuk setiap URL (kecuali / getdata) kita memuat file statis yang sesuai menggunakan load_file fungsi kami mendefinisikan sebelumnya.

Itu http: // localhost: 8080 / getdata adalah URL untuk permintaan AJAX. Dalam setiap permintaan AJAX kami lampirkan pendengar acara ke facebook_emitter. Ini mirip dengan addListener tapi si pendengar terbunuh setelah pendengar dikeluarkan untuk menghindari kebocoran memori. Jika Anda perlu memeriksanya saja ganti sekali dengan addListener. Kami juga memanggil get_data berfungsi sekali dalam 1 detik oleh fungsi setInterval.

Selanjutnya, kami membuat halaman HTML tempat output ditampilkan.

Kode:

         
Jumlah Suka: Pemuatan… 
    

Penjelasan Kode:

Bagian jQuery AJAX cukup jelas. Periksa panggilan dari isi_konten fungsi. Itu terlihat seperti itu sedang menjalankan infinite loop, dan ya itu. Begitulah jumlahnya suka akan diperbarui sendiri.

Setiap panggilan AJAX akan tertunda oleh waktu rata-rata 1 detik karena keterlambatan pemicuan setiap panggilan akan 1 detik dari server. Permintaan AJAX akan dalam bentuk tidak lengkap untuk 1 detik itu.

Jadi begitulah - metode menunda respons AJAX dari server untuk mendapatkan jumlah Facebook suka. Letakkan pertanyaan di bagian komentar kami jika Anda ragu atau berpikir, terima kasih!

Catatan Editor: Posting ini ditulis oleh Geo Paul untuk Hongkiat.com. Geo adalah pengembang Web / iPhone independen yang senang bekerja dengan PHP, Codeigniter, WordPress, jQuery dan Ajax. Dia memiliki 4 tahun pengalaman dalam PHP dan 2 tahun pengalaman iniPhone pengembangan aplikasi.