Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Menjadi Real-Time dengan Pusher

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Yusuf Samin (you can also view the original English article)

Apakah Anda ingin membumbui aplikasi web Anda dengan membuat mereka real-time — tetapi tidak ingin membuat infrastruktur baru dengan tujuan mendapatkan web soket untuk bekerja? Dalam artikel ini, kita akan menjelajahi bagaimana menggunakan dan menerapkan Pusher, bertenaga HTML5 WebSocket real-time messaging service untuk aplikasi Anda.


Pengenalan

Apa itu WebSockets?

WebSocketMenurut halaman WebSocket Wikipedia, WebSocket adalah sebuah teknologi yang menyediakan saluran komunikasi dua arah, full-duplex, atas soket TCP tunggal.

WebSockets Illustration by Pusher

Dalam istilah awam, WebSockets memungkinkan klien dan server untuk berkomunikasi dalam dua arah. Hal ini memungkinkan server yang mengirim pesan ke klien, dan sebaliknya.

Bagaimana Apakah ini relevan dengan aplikasi web saya?

Selama bertahun-tahun, data kadaluarsa selalu menjadi masalah dengan aplikasi web, khususnya mereka yang memiliki beberapa orang masuk dan bekerja pada hal yang sama. Misalnya, dalam aplikasi manajemen proyek, pengguna kadang-kadang membuat item agenda yang anggota tim mereka menciptakan pada waktu yang sama. Dengan WebSockets, ini dapat dikurangi dengan memungkinkan server untuk push pemberitahuan untuk semua pihak yang terkait, memungkinkan browser untuk menerima data baru secara real-time. Akibatnya, sebelum membuat duplikat to-do item, Anda akan melihat bahwa seseorang sudah telah menciptakannya.

Apa itu Pusher?

Pusher

Pusher adalah API host untuk cepat, mudah dan aman menambahkan fungsionalitas real-time scalable melalui WebSockets untuk web dan aplikasi mobile.

Pada dasarnya, Pusher merangkum implementasi WebSockets, fungsi, debugging, dan hosting untuk Anda.
Daripada harus menjalankan server WebSockets sendiri, hal ini memungkinkan Anda untuk offload seluruh proses untuk Pusher di server, menghemat waktu dan uang.

Pusher adalah API host untuk cepat, mudah dan aman menambahkan fungsionalitas real-time terukur melalui WebSockets untuk web dan aplikasi mobile.

Untuk Pusher untuk bekerja, Anda akan memerlukan sebuah klien Perpustakaan dan Perpustakaan penerbit. Perpustakaan klien digunakan dengan klien yang berinteraksi dengan aplikasi Anda. Ini mungkin sebuah browser (melalui JavaScript), sebuah iPhone app (melalui Objective-C), atau aplikasi Flash (melalui ActionScript). Penerbit Perpustakaan digunakan pada server Anda untuk mengirim event ke klien Anda.

Saat ini, Pusher memiliki perpustakaan klien untuk JavaScript, Objective-C, ActionScript, .NET dan Silverlight, Ruby dan Arduino. Ini memiliki penerbit perpustakaan untuk Node.js, Java, Groovy, Grails, Clojure, Python, VB.NET, C#, PHP, Ruby, Perl, dan ColdFusion.

Untuk tujuan dari tutorial ini, kita akan menggunakan JavaScript client Perpustakaan dan penerbit PHP perpustakaan. Pelaksanaan seharusnya tidak terlalu berbeda jika Anda menggunakan bahasa pemrograman lain.

Aku merasa seperti membangun sebuah widget live chat sehingga orang dapat chatting di real-time pada sebuah situs web. Dengan ini dalam pikiran, mari kita lanjutkan.


Menyiapkan Pusher

Langkah 1: Mendaftar untuk akun pengembang Pusher gratis

Untuk memulai, pergi ke website Pusher dan mendaftar untuk account Anda. Mereka menawarkan account gratis untuk pengguna rencana Sandbox, yang mencakup 20 koneksi dan 100.000 pesan per hari. Saat Anda siap, Anda selalu dapat upgrade rencana dibayar, tapi karena kami hanya akan menggunakannya untuk aplikasi contoh kita, rencana Sandbox gratis akan melakukan trik!

Pusher Registration

Pusher pendaftaran

Pada situs, klik tombol Sign Up bahwa Anda akan menemukan di sudut kanan atas dan masukkan rincian yang dibutuhkan. Setelah selesai, klik tombol Sign Up lagi untuk menyelesaikan pendaftaran Anda.


Langkah 2: Login untuk pertama kalinya

Setelah Anda mendaftar, Anda akan diarahkan ke halaman Pusher administrasi Anda. Ini adalah tempat Anda dapat mengelola semua aplikasi yang ambisius. Satu account dapat meng-host beberapa aplikasi.

Pusher Adminstration Page

Pusher admin.

Di atas, Anda memiliki bar navigasi Anda, mana Anda akan menemukan bagian berikut:

  • Dashboard - ini adalah di mana Anda akan melihat aplikasi pendorong Statistik. Anda dapat melihat Message Rate (jumlah pesan yang dikirim per menit), Connection (jumlah membuka koneksi pada waktu tertentu), dan Messages (total pesan mengirim aplikasi Anda setiap hari).
  • Edit - di sini, Anda dapat mengubah nama aplikasi saat ini dan memilih apakah atau tidak untuk menggunakan enkripsi SSL.
  • API Access - ini berisi aplikasi Anda API Credential, yang kita akan membutuhkan kemudian.
  • Debug - ini akan menampilkan semua peristiwa-peristiwa yang dipicu dan pesan dikirim oleh aplikasi pendorong ketika klien terhubung atau putus. Hal ini sangat berguna ketika mengembangkan aplikasi web Anda, karena Anda dapat melihat di sini persis apa Pusher kirim dan menerima dan siapa online untuk menerima mereka.
  • Acara pencipta - ini adalah alat yang berguna untuk mengirimkan peristiwa tes untuk klien Anda terhubung — tanpa harus memicu peristiwa diri dari aplikasi web Anda.

Sekarang Anda siap untuk mulai mengembangkan dengan Pusher!


Pengembangan dengan Pusher

Langkah 1: Buat HTML, CSS, JavaScript, dan PHP

Mari kita mulai mengembangkan widget live chat kami dengan menciptakan HTML. Apa yang ada dalam pikiran adalah sebuah widget yang akan muncul di bagian bawah layar, "Who's Online" daftar di samping, seperti IRC.

Beberapa CSS untuk style HTML kita:

Gabungan HTML dan CSS di atas harus membuat sesuatu seperti ini:

Demo Login

Demo Login

Kita harus membuat sebuah fungsi yang memicu ketika kita klik tombol Login dan cek nilai yang dimasukkan, jadi mari kita melakukannya:

Selanjutnya, kita perlu memberitahu server ketika kita telah masuk. Untuk melakukan ini, kami akan membuat sebuah file start_session.php yang pada dasarnya akan login pengguna.

Anda akan melihat bahwa saya telah membuat sebuah fungsi ajaxCall, yang pada dasarnya hanya membungkus di sekitar jQuery $Ajax fungsi. Hanya menambahkan ini sebelum baris $(document).ready().

Sekarang, mari kita memuat Perpustakaan Pusher JavaScript dan jQuery juga. Tempat script berikut referensi dalam<head>HTML Anda:

Langkah 2: Perhatikan kredensial API

Ingat halaman akses API dari atas? Kembali ke sana dan mencatat kredensial API. Kita akan membutuhkan nilai-nilai ini ketika kami mendirikan Perpustakaan klien dan penerbit.

Pusher API Credentials

Kredensial Pusher API

Merasa bebas untuk menggunakan punya saya, namun, saya sangat menyarankan Anda mendapatkan Anda sendiri, karena account gratis terbatas dan Anda mungkin memotong midstream.

Langkah 3: Menerapkan kode Pusher

Sebelum kita mulai menerapkan Pusher ke dalam aplikasi kita, kita perlu memahami istilah-istilah Pusher:

  • Channel - cara membedakan stream data di dalam aplikasi. Aplikasi dapat memiliki beberapa channel dan satu channel dapat memiliki beberapa klien. Kita dapat membandingkan ini dengan chat room di IRC — semua pesan yang dikirim ke ruang chat tertentu dapat dilihat oleh semua orang yang berada di dalam.
  • Events - ini adalah sama dengan server mengirimkan data ke klien sehingga Anda dapat melihat pesan di chat room. Event dipicu oleh penerbit Perpustakaan, dan pelanggan dapat berlangganan untuk event ini. Dalam analogi kita, berlangganan ke event ini mirip mendengarkan ketika orang mengobrol di kamar dan memperhatikan apa yang mereka katakan.

Ada tiga jenis channel:

  • Public channel - chnaeel yang siapa pun dapat berlangganan ke, selama mereka tahu nama channel.
  • Private Channel - chaneel yang hanya authentikasi pengguna dapat berlangganan.
  • Presence channes - mirip dengan private channel, tetapi juga memungkinkan kami untuk memberitahu klien lain terhubung dengan informasi tentang klien yang menghubungkan. Kita akan menggunakan saluran ini di widget obrolan kami.

Presence channel khusus karena mereka membiarkan kami mengirimkan informasi tentang pengguna ketika mereka terhubung. Mereka juga memiliki event khusus yang kita dapat berlangganan untuk mengetahui bila pengguna menghubungkan dan memutuskan hubungan. Presence Channel ideal untuk private channel yang aman, yang perlu tahu Kapan pengguna masuk atau keluar.

Tersambung ke layanan Pusher

Mari kita mulai dengan menghubungkan klien kami untuk layanan Pusher. Untuk melakukannya, kita akan perlu membuat sebuah instance baru dari objek Pusher (dari perpustakaan), dan memanggil fungsi subscribe. Tambahkan kode berikut setelah //We're login! Now what? komentar.

Fungsi Subscribe pada dasarnya membuat klien bergabung dengan channel. setelah di dalam channel, klien akan menerima evebt yang terjadi di dalamnya.

Apa itu "channel_auth_endpoint"?

Ketika berlangganan presence atau channel private, kita perlu memastikan bahwa pengguna menghubungkan diizinkan untuk mengakses channel. Oleh karena itu, sebelum membiarkan klien sepenuhnya terhubung ke itu, pendorong klien secara otomatis membuat panggilan ke URL yang didefinisikan dalam variabel channel_auth_endpoint dan mengirimkan informasi tentang cara menyambungkan pengguna. Kemudian, melalui channel_auth_endpoint, kita dapat mengetahui jika pengguna yang terhubung itu terauthentikasi.

Secara default, panggilan ini dibuat untuk /pusher/auth, tetapi kita dapat mengganti dengan mengeset variabel channel_auth_endpoint.

Pusher Authentication Sequence

socket_id unik yang dihasilkan dan dikirim ke browser pusher. Ketika usaha yang dibuat untuk berlangganan untuk private atau presence-chaneel socket_id dan channel_name yang dikirim ke aplikasi Anda, (1) melalui pos AJAX request yang kewenangan kepada pengguna untuk mengakses channel terhadap sistem otentikasi yang ada. Jika berhasil aplikasi Anda mengembalikan string otorisasi ke browser ditandatangani dengan Pusher secret Anda. Ini dikirim ke Pusher atas WebSocket, yang melengkapi otorisasi (2) jika string otorisasi cocok.

Kembali ke aplikasi kita, kita perlu membuat channel_auth_endpoint kami. Buat file, bernama pusher_auth.php dan tempat ini didalamnya:

Sekarang bahwa kami dapat mengotentikasi pengguna menghubungkan kami, kita akan perlu untuk mengikat beberapa fungsi JavaScript pusher event untuk menunjukkan bahwa kami telah sudah masuk. Memperbarui kode di bawah //We're logged in! Now What? Komentar, seperti:

Ingat untuk menambahkan updateOnlineCount(); fungsi di atas baris $(document).ready():

Penjelasan tentang apa yang baru saja kita tambahkan

Fungsi pusher.connection.bind memungkinkan kita untuk mengikat fungsi callback setiap kali perubahan status sambungan pusher. Ada banyak kemungkinan status, seperti initialized, connection, unavailable, failed dan disconnected. Kami tidak akan menggunakan mereka dalam tutorial ini, tetapi Anda dapat membaca lebih lanjut tentang mereka dalam dokumentasi Pusher.

Fungsi channel_name.bind memungkinkan kita untuk mengikat fungsi untuk event tertentu yang mungkin terjadi di dalam channel. Secara default, presence channel memiliki event mereka sendiri yang kita dapat mengikat fungsi untuk, seperti event pusher:subscription_succeeded yang kami di atas. Anda dapat membaca lebih lanjut tentang mereka dalam dokumentasi presence event klien.

Mari kita menguji app sekarang dan melihat apa yang terjadi. Untuk melakukannya, buka dua tab dari aplikasi Anda dan masuk dua kali. Anda harus melihat sesuatu seperti ini:

First Test

Tes pertama

Ketika Anda menutup satu tab, kedua klien menutup juga, memicu event pusher:member_removed kami, dan mengeluarkan klien dari daftar online:

Second Test

Tes kedua

Sekarang bahwa itu bekerja, kami akhirnya dapat mengimplementasikan fungsionalitas core dari aplikasi kita-live chat.

Menerapkan fungsi live chat

Mulailah dengan mengikat fungsi untuk event yang menyerahkan form obrolan kami:

newMessageCallback fungsi:

Setelah itu, kita harus membuat send_message.php untuk menerima panggilan AJAX kami dari atas dan memicu event new_message:

Anda mungkin bertanya-tanya mengapa kami disarikan newMessageCallback ke dalam fungsi tersendiri. Yah, kita bisa menyebutnya lagi ketika kita menerima event new_message dari Pusher. Kode berikut mengikat fungsi sebuah acara yang disebut new_message, yang akan memicu setiap kali pengguna mengirim pesan. Tambahkan kode ini setelah blok kode nettuts_channel.bind('pusher:member_removed'):

data variabel dalam fungsi binding di atas akan mengirimkan data server dalam panggilan $pusher->trigger(), yang harus berisi data message.

Pengujian

Mari kita coba kami app lagi dengan dua browser, bukan tab. (Atau mencobanya dengan seorang teman jika Anda upload di suatu tempat.)

Working Demo

Halo teman!

Selamat! Anda telah berhasil membuat sebuah aplikasi bekerja menggunakan Pusher.


Kesimpulan

Di sana Anda memilikinya, aplikasi real-time yang didukung oleh Pusher. Jangan ragu untuk mengunjungi demo live chat yang sudah disetup di sini.

Ada lebih banyak yang saya tidak bahas dalam tutorial ini, seperti debug aplikasi Anda, excluding penerima dari event, dan memicu event sisi klien, tetapi Anda dapat belajar ini hanya dengan membaca dokumentasi pusher. Anda bahkan dapat memeriksa showcase website mereka dan aplikasi yang menggunakan Pusher untuk bekerja secara real-time.

Tutorial ini hanya goresan permukaan Pusher dan WebSockets secara umum. Dengan teknologi semacam ini, apa yang dapat Anda lakukan hanya dibatasi oleh apa yang dapat Anda bayangkan membuat sesuatu.

Apakah Anda mencoba membuat sesuatu dengan pendorong, atau apakah Anda berencana untuk melakukannya segera? Beritahu saya di komentar!

Catatan: Pendorong telah meminta kami untuk mengatur ulang kredensial API yang digunakan oleh akun demo pada tutorial ini sebagai tindakan pencegahan untuk itu diperlakukan. Saya minta maaf kepada kalian dan mudah-mudahan Anda hanya bisa mendapatkan Anda sendiri :) Terima kasih!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.