Cara Membuat Notifikasi Realtime Dengan Pusher Part 3

Kita masuk bagian ketiga Cara Membuat Notifikasi Realtime Dengan Pusher yakni tugas berikutnya adalah membuat sisi clientnya dengan membuat file baru dengan nama index.html dengan struktur HTML biasa dan meload library dari pushernya lewat/via CDN atau bisa juga teman teman download dan menyimpannya dilocal folder sebagai berikut

Cara-Membuat-Notifikasi-Realtime-Dengan-Pusher-Part3-1

Pada kasus ini saya gunakan library pusher versi 4.1 dan selanjutnya kalo teman teman ingin mengetahui informasi warning atau error didalam consolenya tentu pesan tersebut hanya ketika masa development. Kita bisa tulis pusher.logToConsole yang nilainya true seperti ini

Cara Membuat Notifikasi Realtime Dengan Pusher-Part3-2

Berikutnya seperti sebelumnya kita akan memanggil object pushernya lalu yang kita butuhkan hanya menentukan APP Keynya saja dan kemudian menentukan opsi-opsi seperti cluster yang kita gunakan yakni app1 (singapore) didalam Object Pushernya dengan menuliskan seperti berikut

Cara Membuat Notifikasi Realtime Dengan Pusher-Part3-3

Untuk channelnya kita bisa gunakan metode subscribe() sesuai dengan nama channel yang kita tentukan di sisi servernya. Tentu nama channelnnya bebas artinya ketika user belangganan ke channel ini maka dia akan mendapatkan pesan notifnya.

Cara Membuat Notifikasi Realtime Dengan Pusher-Part3-4

Lalu kita gabungkan atau kita bind dengan event yang diberikan dengan menjalankan satu function yang menerima sebuah parameter data. Data ini adalah pesan atau hasil response yang akan diterima oleh client/user sebagai berikut

Cara Membuat Notifikasi Realtime Dengan Pusher-Part3-5

Nah contoh simplenya kita akan menuliskan alert/popup dengan menampilkan data message yang telah di kirimkan dari server lalu client menerima data tersebut secara langsung atau realtime.

Cara Membuat Notifikasi Realtime Dengan Pusher-Part3-6

dan bila kita coba jalankan file index.htmlnya maka belum terlihat apa apa. Masih kosong tapi bila kita mencoba menjalankan sisi servernya maka secara otomatis servernya menjalankan trigger dengan mengirimkan pesan dan kalo kita lihat dibrowser clientnya kita sudah dapat pesan popup seperti berikut

Cara Membuat Notifikasi Realtime Dengan Pusher-Part3-7

Karena pada bagian ini usernya sudah subscribe. Teman teman juga bisa buka 3 browser sekaligus untuk 3 user. Jadi pada saat user sedang mengakses halaman tersebut lalu servernya direload maka 3 browsernya akan dapat pesan yang sama dalam bentuk popup alert secara realtime tanpa harus kita mereload halamannya. Terima kasih

6 Januari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat