DEV Community

Cover image for Laravel Reverb: Fitur Websocket Server pada Laravel 11
Yoga Meleniawan Pamungkas
Yoga Meleniawan Pamungkas

Posted on • Updated on

Laravel Reverb: Fitur Websocket Server pada Laravel 11

Image description

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.

Image description

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
Enter fullscreen mode Exit fullscreen mode

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

php artisan install:broadcasting
Enter fullscreen mode Exit fullscreen mode

Image description

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

Image description

Pilih yes ketika ada pilihan untuk menginstall dependencies untuk broadcasting.

Image description

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
Enter fullscreen mode Exit fullscreen mode

Jangan lupa tambahkan implements terhadap interface ShouldBroadcastNow

Image description

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

Image description

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:
Image description

Channel Reverb:
Image description

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'),
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode

Image description

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

php artisan make:controller MessageController
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Image description

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']);
Enter fullscreen mode Exit fullscreen mode

Image description

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

php artisan reverb:start
Enter fullscreen mode Exit fullscreen mode

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

Image description

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.

Top comments (0)