Laravel Reverb: Fitur Websocket Server pada Laravel 11

Laravel 11 rilis pada tanggal 12 maret 2024 dengan berbagai macam fitur dan improvement baik dari sisi performance, package, command, dan lain-lain. Salah satu fitur yang menarik untuk kita bahas adalah Laravel Reverb. Yuk kita bahas sedikit tentang laravel reverb ini.

Apa itu Laravel Reverb? kalau dari penjelasan official dari laravel reverb seperti ini “Reverb is a first-party WebSocket server for Laravel applications, bringing real-time communication between client and server directly to your fingertips. Open source and an Artisan command away — with love from the Laravel team.”, jadi kurang lebih reverb ini adalah sebuah first party websocket server yang bisa digunakan dan bisa berjalan secara bersama-sama dengan projek laravel kita. Sebelum adanya reverb, ketika kita ingin membuat sebuah websocket server kita bisa menggunakan salah satu servicenya adalah Pusher, yang mana Pusher ini adalah salah satu service websocket server yang gratis maupun berbayar tetapi berjalan di luar Laravel.

Sekarang kita cobain aja ya bagaimana Laravel Reverb ini bekerja di Laravel. Seperti biasa temen-temen bisa langsung buka official documentation dari Laravel.

---

Instalasi Laravel 11

composer create-project laravel/laravel:^11.0 laravel-reverb

Instalasi Broadcasting, kenapa kita perlu melakukan instalasi broadcasting? karena by default di laravel 11 broadcasting tidak ditampilkan di folder routes

php artisan install:broadcasting

Pilih yes ketika ada pilihan untuk menginstall Laravel Reverb dikarenakan kita membutuhkan credential key dari reverb.

Pilih yes ketika ada pilihan untuk menginstall dependencies untuk broadcasting.

Apabila instalasi berhasil maka ketika temen-temen membuka file .env maka akan ada credential key untuk reverb.

Buat event broadcast class dengan perintah di bawah ini

php artisan make:event SendMessageEvent

Jangan lupa tambahkan implements terhadap interface ShouldBroadcastNow

Tambahkan variabel pada constructor function yang akan digunakan sebagai variabel untuk mengirim data dari event broadcast ke channel reverb.

Kemudian silahkan ganti PrivateChannel menjadi Channel, kemudian nama channel default channel-name bisa kita ganti sesuai dengan kebutuhan, disini saya coba ganti menjadi channel-reverb.

Private Channel Default:

Channel Reverb:

Sehingga hasil akhirnya kurang lebih seperti berikut:

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class SendMessageEvent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     */
    public function __construct(
        public string $message,
    ) {
        //
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return array<int, \Illuminate\Broadcasting\Channel>
     */
    public function broadcastOn(): array
    {
        return [
            new Channel('channel-reverb'),
        ];
    }
}

Buat controller untuk mendefinisikan view dan function yang akan digunakan untuk mengirimkan sebuah event.

php artisan make:controller MessageController

Buat 2 function yang digunakan untuk membuat view dan melakukan aksi untuk mengirim event broadcast ke reverb.

<?php

namespace App\Http\Controllers;

use App\Events\SendMessageEvent;
use Illuminate\Http\Request;

class MessageController extends Controller
{
    public function index()
    {
        return view('message');
    }

    public function sendMessage(Request $request)
    {
        $message = $request->message;

        event(new SendMessageEvent(
            message: $message
        ));

        return response()->json(['message' => 'Message has been send'], 200);
    }
}

Kemudian definisikan 2 route yang digunakan untuk meng-handle route view dan route action.

<?php

use App\Http\Controllers\MessageController;
use Illuminate\Support\Facades\Route;

Route::get('/message', [MessageController::class, 'index']);
Route::post('/message/send', [MessageController::class, 'sendMessage']);

Setelah itu silahkan distart untuk reverb websocket server menggunakan perintah dibawah ini

php artisan reverb:start

Setelah itu bisa kita langsung cobain Reverb ini ya, hasilnya kurang lebih seperti ini, kebetulan disini saya membuat aplikasi todo list sederhana.

Gimana? Cukup sederhana ya untuk konfigurasi websocket kali ini menggunakan Laravel Reverb. Tentunya dengan menggunakan reverb kita sebagai developer dipermudah untuk menggunakan websocket server pada projek Laravel. Kalau misalkan temen-temen pingin nyobain projek ini bisa diakses di repository github saya di sini : https://github.com/yogameleniawan/laravel-reverb

Oke, pembahasan tentang reverb cukup sampai disini ya temen-temen. See u di kesempatan lain dengan artikel yang berbeda.