7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Cloud Services

Memulai Dengan Pusher: Buat Chat App Dengan Channels, PHP, dan Vue.js

Read Time: 3 mins
This post is part of a series called Get Started With Pusher.
Get Started With Pusher: Demonstrating Real-Time Communication With Channels
Get Started With Pusher: Using Private Channels
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

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

Channels from Pusher adalah platform yang memungkinkan Anda memberi data real-time yang mulus pada aplikasi Anda.

Dalam posting ini, saya akan menunjukkan kepada Anda bagaimana menulis functional components dari chat app yang sangat sederhana. Ini adalah contoh stripped-down, tetapi Anda akan melihat bagaimana Channels dapat menyederhanakan penerapan real-time communication dalam web app.

Menyiapkan Server

Aplikasi server kita adalah file PHP tunggal yang disebut messages.php yang akan menangani permintaan POST yang datang dari browser. Pengelola pesan kita akan mengirim pesan klien ke layanan Channels, yang kemudian akan menyiarkan pesan-pesan itu ke klien lain.

Saat menggunakan PHP untuk server application Anda, Anda ingin mengunduh dan menggunakan Channels library, dan Anda dapat menginstal library itu menggunakan composer dan perintah berikut:

Kode untuk messages.php hampir merupakan salinan persis dari apa yang dapat Anda temukan di Getting Started di dasbor Saluran Anda. Hanya ada beberapa modifikasi.

Pertama, Anda perlu meminta file autoload.php untuk menggunakan Pusher library:

Selanjutnya, data yang berasal dari klien dalam format JSON, jadi kami jelas ingin mendekodekannya menjadi array PHP yang bisa diterapkan.

Kita kemudian ingin mengatur objek Pusher kita sehingga kita dapat memicu suatu peristiwa.

Instalasi PHP saya tidak berfungsi jika opsi encrypted diaktifkan, jadi saya menghilangkannya dari kode saya. Jarak tempuh Anda mungkin bervariasi, tetapi penting untuk dicatat bahwa opsi encrypted menentukan apakah data yang dikirim antara server dan Saluran dienkripsi. Ini tidak ada hubungannya dengan koneksi antara Channels dan klien Anda — client library yang menangani itu.

Baris terakhir dari kode server kita mengirimkan data pesan ke Channels:

Seperti server libraries lainnya, kita meneruskan tiga hal ke trigger() method:

  1. The channel name: anon-chat
  2. The event name: send-message
  3. The payload: $data

Perhatikan bahwa channel dan nama acara berbeda dari nama channel dan acara yang digunakan pada Getting Started page. Anda tidak perlu membuat channels baru atau menentukan acara khusus di dasbor; cukup gunakan saluran dan nama acara apa pun yang Anda inginkan dalam kode Anda.

Menyelesaikan Klien

Klien kita adalah laman web dengan tiga Vue.js components yang mengaktifkan UI. Komponen utama disebut ChannelsChat, dan di sanalah kita akan menempatkan objek Pusher kita yang mendengarkan untuk send-message acara di saluran anon-chat. Mari gunakan created hook.

Dalam kode ini, kita membuat Pusher object, subscribe anon-chat channel, dan mendengarkan peristiwa send-message.

Karena ini adalah chat application, kita perlu menyimpan riwayat pesan sehingga siapa pun yang menggunakan aplikasi dapat melihat semua pesan yang mereka terima selama sesi mereka. Cara termudah untuk mencapai ini adalah dengan menyimpan setiap pesan sebagai elemen dalam array. Jadi, mari tambahkan properti data messages dikomponen ini, seperti yang diperlihatkan dalam kode berikut:

Kemudian, ketika kita menerima pesan, kita hanya akan push() ke array kita, seperti yang ditunjukkan pada kode berikut:

Kita kemudian akan meneruskan messages ke komponen MessageView:

Sending Messages

Yang terakhir dari kode kita termasuk dalam komponen MessageSend; ketika pengguna mengetik pesan dan mengklik Send button, kita perlu mengirim data tersebut ke messages.php.

Pertama, mari pastikan pengguna mengetikkan sesuatu ke dalam text box. Kalau tidak, tidak perlu melakukan apa-apa!

Properti message terikat pada nilai <input/>'s , jadi kita akan menggunakannya untuk menentukan apakah kita memiliki data.

Selanjutnya, kita mengirim permintaan POST ke message.php, dan data adalah objek dengan message property .

Jika permintaan berhasil, kita menghapus nilai message property's, yang pada gilirannya membersihkan nilai <input/>'s (ingat bahwa mereka terikat). Jika permintaan gagal, alert box memberi tahu pengguna bahwa kesalahan terjadi.

Screenshot of sample chatScreenshot of sample chatScreenshot of sample chat

Itu untuk kode. Jadi buka dua browser windows dan arahkan ke index.php. Mulai mengirim messages dan Anda akan melihat both windows secara otomatis memperbarui dan menampilkan messages.

Kesimpulan

Seperti yang Anda lihat, Channels membuatnya sangat mudah dengan cepat menambahkan real-time communication ke aplikasi Anda, dan itu bahkan tidak memerlukan banyak kode!

Anda juga belajar bahwa Anda dapat membuat channels dan events dengan cepat saat Anda menulis kode Anda. Tidak perlu mengaturnya sebelum menggunakannya.

Dan akhirnya, Anda belajar bagaimana Anda dapat mengatur aplikasi Anda untuk memasukkan real-time communication. Cukup menangani masukan pengguna yang masuk dari server Anda, dan picu events berdasarkan masukan itu.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.