Laravel Reverb: Fitur Websocket Server pada Laravel 11
Tags: laravel
Published: 2024-06-02 15:18:23


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qoh3h2w4uk3ci6j2684.png)

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](https://reverb.laravel.com/). Yuk kita bahas sedikit tentang laravel reverb ini.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4x9cuzozfr961t4k96a8.png)

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](https://pusher.com/), 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](https://laravel.com/).

---

Instalasi Laravel 11

```bash
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

```bash
php artisan install:broadcasting
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6wtfny0ssamh230va6z.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7zsavoyyjcrndidvjvy.png)

Pilih yes ketika ada pilihan untuk menginstall dependencies untuk broadcasting.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2hdls1psvdl808ez4x1d.png)

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

```bash
php artisan make:event SendMessageEvent
```

Jangan lupa tambahkan implements terhadap interface ShouldBroadcastNow

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nucsuf3nnc85z7e2ohys.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2b8ij1h9wdathskg45t.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy6nxar1jz3yst09qf6d.png)

Channel Reverb:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79yn44zndwcf33g8y093.png)

Sehingga hasil akhirnya kurang lebih seperti berikut:

```php
<?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'),
        ];
    }
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/clhe4169isjisjz65dzh.png)

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

```bash
php artisan make:controller MessageController
```

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

```php
<?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);
    }
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67f89z13wjejgc0yxlx5.png)

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

```php
<?php

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk4fohicfwee9cld0a0a.png)

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

```bash
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pmhq2g7pdg33pqv6kz1.png)


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](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.