Cara menggunakan php websocket realtime

gimana sih cara membuat aplikasi yang real time? maksud dari real time disini yaitu seperti hal nya chating atau comment yang dimana user tidak perlu melakukan refresh page terlebih dahulu untuk mendapatkan pesan baru atau comment yang baru dari user lain. saya disini sedang belajar juga dengan menggunakan framework php yaitu laravel. mungkin kalo ada referensi untuk cara membangun aplikasi yang real time boleh di share :) boleh itu menggunakan javascript ataupun php mangga di share.

Table of Contents Show

Apa itu Pusher?
Apa itu web socket?
Alternatif web socket..
Broadcasting Laravel
Instalasi Laravel Terlebih Dahulu..
Buat Event Nya Terlebih Dahulu..
Integrasi Dengan Pusher
Listening Event Dengan Laravel Echo
Studi Kasus – Membuat Realtime Table dengan Laravel, Vue JS, Pusher

Jadi jika kalian ingin membuat aplikasi yang realtime, maka websocket adalah salah satu jawaban nya..

Alternatif web socket..

Apakah ada cara lain selain tanpa menggunakan web socket?? Tentu saja ada..

Mimin sendiri sebelumnya sudah pernah membahas nya, kita juga bisa membuat realtime App dengan menggunakan teknik polling..

Jadi cara kerja dari polling ini yaitu dengan mengirimkan request secara terus-menerus terhadap server dengan interval tertentu..

Silahkan buka: Membuat Aplikasi Realtime Tanpa Web Socket dengan Livewire Polling..

Broadcasting Laravel

Sebelum kita bisa membuat sebuah Realtime App.. Kita perlu mempelajari dan memahami terlebih dahulu apa itu Broadcasting pada Laravel..

Dan materi tentang Broadcasting ini akan terdiri dari Event dan Listeners.. 2 hal inilah yang nanti nya akan membuat aplikasi kita menjadi Realtime..

Broadcasting ini juga memiliki file konfigurasi nya sendiri yang terletak didalam folder “../config/broadcasting.php”..

Tapi untuk kali ini, kita tidak akan mengutak-atik file konfigurasi tersebut..

Instalasi Laravel Terlebih Dahulu..

Sekarang kita coba install laravel nya terlebih dahulu via Composer..

Dan versi laravel yang akan kita install itu adalah yang versi 8.. Kalo kalian menggunakan versi laravel yang lain juga sebetulnya tidak masalah yaa..

Jalankan perintah berikut:

composer create-project laravel/laravel:^8.0 basic_pusher

Setelah proses instalasi nya selesai, kemudian coba kalian cek isi dari file .env..

Disana kalian akan menemukan “BROADCAST_DRIVER=log”..

Itu adalah nilai default dari Broadcast Driver nya, secara default ketika kita akan melakukan broadcasting, maka hasil nya akan ditaruh kedalam log..

Sekarang untuk latihan broadcasting nya, agar lebih memahami tentang alur kerja dari broadcasting, kita biarkan saja nilai broadcast_driver nya dengan log terlebih dahulu..

Nanti kita bisa melihat hasil dari broadcast nya didalam folder “../storage/logs”..

Buat Event Nya Terlebih Dahulu..

Untuk test broadcasting.. Pertama kita harus buat event nya terlebih dahulu..

Untuk membuat event, kalian bisa menjalankan perintah berikut:

php artisan make:event ServerCreated

Diatas, kita membuat sebuah event baru dengan nama “ServerCreated”..

Kalian akan menemukan lokasi file event tersebut berada di dalam folder “../app/Events/ServerCreated.php”..

Sekarang kemudian kita perlu melakukan implements ShouldBroadcast pada Class ServerCreated nya.. Sehingga menjadi seperti berikut:

Sekarang selanjutnya, kalian buat sebuah public Channel didalam method broadcastOn() nya seperti berikut:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Dengan perintah seperti diatas, berarti kita membuat sebuah public channel dengan nama messages..

Sebetulnya dengan perintah diatas, kita sudah berhasil membuat sebuah perintah broadcast, tapi baru hanya sampai proses event nya saja..

Lantas bagaimana cara untuk menguji coba nya?

Uji coba Broadcast Event

Untuk menguji coba Broadcast Event nya, kita buka file “../routes/web.php” nya terlebih dahulu.. Kemudian kita tambahkan route baru seperti berikut:

<?php

use App\Events\ServerCreated;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('/test-broadcast-event', function () {
    ServerCreated::dispatch();
    
    echo 'test broadcast event sangcahaya.id';
});

Perhatikan script diatas, pada baris ke-3 kita memanggil class event ServerCreated nya..

Kemudian pada baris ke-21, kita membuat sebuah route baru dengan method get, url nya mengarah ke “/test-broadcast-event”.. Yang didalam nya kita memanggil event nya dengan menjalankan perintah:

ServerCreated::dispatch();

Sekarang kalo di browser nya kalian akses url “http://127.0.0.1:8000/test-broadcast-event”.. Maka akan muncul seperti berikut:

Kemudian kita bisa cek hasil dari broadcast event nya pada file log yang berada pada folder “../storage/logs/laravel.log”.. Seperti berikut:

Diatas adalah contoh dari hasil broadcast event nya yang kita taruh kedalam log.. Terdapat 1 buah atribut yang bernama “socket” dengan nilai nya adalah null..

Cara menambah atribut baru pada broadcast event..

Sebelumnya kita sudah berhasil melakukan broadcast event, tapi return nya baru hanya ada 1 atribut saja, yaitu “socket”: null..

Sekarang bagaimana cara nya kalo kita ingin menambah atribut baru misalkan dengan nama “message” seperti contoh berikut:

Caranya gampang, pertama kita buka dulu file event nya “../app/Events/ServerCreated.php”, kemudian didalam nya kita tambahkan sebuah atribut baru dengan nama message seperti berikut:

....
class ServerCreated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }
....

Kemudian, pada method __construct() nya kita juga menambahkan sebuah parameter baru dengan nama $message..

Didalam nya kita membarikan nilai untuk atribut message dengan nilai dari parameter nya..

Maka nanti cara pemanggilan event nya berubah menjadi seperti berikut:

....
Route::get('/test-broadcast-event', function () {
    ServerCreated::dispatch('parameter atribut message | sangcahaya.id');

    echo 'test broadcast event sangcahaya.id';
});
....

Kalo kalian refresh lagi page di browser nya, kemudian kalian cek ulang file log nya, maka hasil nya akan menjadi seperti berikut:

Kita bisa lihat pada gambar diatas, hasil return nya terdapat atribut baru dengan nama message, dan isi nya sesuai dengan apa yang kita lempar pada saat dispatch nya..

Integrasi Dengan Pusher

Yap, sekarang kita masuk ke inti materi nyaa, yaitu menjadikan Pusher sebagai broadcast dari aplikasi yang sedang kita bangun..

Kalo kalian buka situs web nya di pusher.com, maka kalian akan menemukan hal berikut:

Dengan pusher kita bisa membuat Realtime charts, notifications, location tracking, aplikasi chat, dan sebagai nya..

Intinya dengan pusher kita bisa membuat aplikasi kita menjadi realtime, kita akan selalu bisa melihat perubahan tanpa harus me-reload halaman nya terlebih dahulu..

Sekarang silahkan kalian login/register kedalam pusher, hingga bisa masuk ke dalam dashboard nya seperti berikut, kemudian klik getting started..

Maka nanti akan muncul sebuah pop up untuk membuat channel baru, silahkan diisi seperti berikut:

Kalian bisa tentukan sendiri untuk nama channel nya, dan cluster nya kita pilih yang singapore, karena kita berada di kawasan asia.. Setelah itu silahkan klik button Create app..

Setelah itu kalian masuk ke halaman app keys.. nanti disana kalian akan menemukan 4 buah key, copy semua nya kedalam file .env..

Copy kedalama file .env

Kemudian jangan lupa juga untuk merubah broadcast_driver yang awal nya dari log, kita rubah menjadi pusher..

Sekarang coba kalian refresh lagi halaman test broadcast event nya dengan mengakses url:

http://127.0.0.1:8000/test-broadcast-event

Jika muncul error seperti berikut:

Maka kalian perlu menginstall package/library pusher nya terlebih dahulu, silahkan jalankan perintah berikut:

composer require pusher/pusher-php-server

Setelah proses instalasi nya selesai, sekarang pada web pusher nya, silahkan kalian buka menu debug console nya..

Setiap event yang masuk kedalam pusher kita, semua nya akan tercatat pada menu debug console tersebut..

Sekarang coba kalian reload lagi halaman test broadcast event nya

http://127.0.0.1:8000/test-broadcast-event

Jika sukses, coba kalian cek debug console di pusher nya, maka seharusnya akan tampil seperti berikut:

Event ServerCreated yang berisi channel messages yang sebelumnya sudah kita buat, sekarang sudah berhasil terintegrasi dengan pusher..

Listening Event Dengan Laravel Echo

Nah sekarang maka langkah terakhir yang perlu kita lakukan yaitu menerima atau me-listen broadcast event tersebut kedalam aplikasi web kita..

Sehingga nanti nya aplikasi kita dapat bereaksi setiap kali ada event yang terjadi.. Nah hal inilah yang membuat aplikasi kita menjadi sebuah Realtime App..

Nah untung nya di laravel sudah memiliki starter pack untuk listening sebuah event, disebut dengan Laravel Echo..

Silahkan kalian buka file “../resources/js/bootstrap.js”, kemudian un-comment pada baris berikut:

Sehingga menjadi seperti berikut:

php artisan make:event ServerCreated

Setelah itu dibawahnya kalian tambahkan script seperti berikut:

php artisan make:event ServerCreated

Script diatas artinya kita me-listen sebuah event yang berasal dari ServerCreated dengan channel nya yaitu messages..

Jika sistem berhasil me-listen, maka akan mencetak data event kedalam console, dan juga akan menampilkan sebuah alert dengan pesan sukses..

Sehingga keseluruhan script nya akan menjadi seperti berikut:

php artisan make:event ServerCreated

Kemudian, karena diatas kita mengimport laravel-echo dan juga pusher-js, maka kita perlu menginstall package nya terlebih dahulu..

Pertama, jalankan perintah berikut:

php artisan make:event ServerCreated

Kemudian jalankan:

php artisan make:event ServerCreated

Setelah proses instalasi nya selesai, sekarang kita akan memanggil file bootstrap.js nya didalam file welcome.blade.php..

Kenapa dipanggil kedalam file welcome.blade.php? Karena saat mengakses base url, kita memanggil view welcome.blade.php..

Jadi pada base url nya akan kita test listener nya..

Tapi sekarang yang jadi permasalahan nya, bagaimana cara kita bisa memanggil file “../resources/js/bootstrap.js” kedalam file welcome.blade.php?

Karena posisi bootstrap.js tidak berada didalam folder public, melainkan berada didalam folder resources..

Maka kita perlu meng-compile nya terlebih dahulu dengan menjalankan perintah:

php artisan make:event ServerCreated

Hasil dari compile nya akan seperti berikut:

Perhatikan yang mimin beri tanda panah, path tersebutlah yang nantinya akan kita panggil..

Sekarang buka kembali file welcome.blade.php nya, dan tambahkan script seperti berikut:

Tepat sebelum penutup tag body, kita memanggil path js/app.js nya..

Sekarang coba kalian buka 2 browser, browser pertama digunakan untuk membuka halaman base url nya, tempat kita untuk me-listen event nya..

php artisan make:event ServerCreated

Dan browser kedua digunakan untuk membroadcast event nya, dengan mengakses url:

php artisan make:event ServerCreated

Maka nanti hasilnya akan seperti berikut:

Apakah dikalian berhasil?

Studi Kasus – Membuat Realtime Table dengan Laravel, Vue JS, Pusher

Sekarang kita coba masuk kedalam studi kasus nya dengan membuat sebuah table yang bersifat realtime..

Table ini digunakan untuk menampilkan data karyawan secara realtime, jadi ketika ada penambahan data karyawan, atau setiap kali data baru di inputkan, maka otomatis table tersebut akan memperbaharui datanya sendiri..

Tapi sebelum lanjut, kalian harus memahami terlebih dahulu tentang basic vue js, sebagai latihan, kalian bisa coba halaman berikut: Belajar Membuat CRUD dengan Laravel Vue JS..

Pertama kita perlu buat database nya terlebih dahulu, untuk nama database nya bebas, kemudian kita hubungkan dengan file project kita dengan memasukkan username, password, beserta database nya kedalam file .env..

Kemudian selanjutnya kita buat dulu Model beserta file Migration nya dengan menjalankan perintah berikut:

php artisan make:event ServerCreated

Kalian isi file migration nya seperti berikut:

php artisan make:event ServerCreated

Dan kalian ubah juga Model nya menjadi seperti berikut:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Kemudian jangan lupa untuk menjalankan perintah:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Sekarang kita buat 3 buah route baru seperti berikut:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Kemudian buat controller baru dengan nama KaryawanController seperti berikut:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Kemudian buat file view baru didalam folder “../resources/views/karyawan/index.blade.php”, dan isi seperti berikut:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Dan buat lagi 1 buah file view baru untuk form create data karyawan nya didalam folder “../resources/views/karyawan/create.blade.php”..:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Dan langkah terakhir yaitu kita buat juga file event nya dengan nama KaryawanCreated.. Jalankan perintah berikut:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Dan isi file event nya seperti berikut:

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Sekarang untuk mengetest nya, kalian buka 2 browser seperti biasa..

Browser pertama kalian akses halaman list karyawan nya..

....
public function broadcastOn()
{
    // return new PrivateChannel('channel-name');
    return new Channel('messages');
}
....

Browser keduan kalian akses halaman untuk create data karyawan nya..

<?php

use App\Events\ServerCreated;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::get('/test-broadcast-event', function () {
    ServerCreated::dispatch();
    
    echo 'test broadcast event sangcahaya.id';
});

Maka nanti hasil nya akan seperti berikut:

Bagaimana? Mudah kan? Tertarik untuk menggunakan Pusher?

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid