Cara Mudah Implementasi WebSocket untuk Real Time Notification di Laravel

Pernahkah kamu mengalami frustrasi ketika harus refresh halaman berkali-kali hanya untuk melihat notifikasi terbaru?

Di era digital 2026 ini, user menuntut pengalaman yang instant dan real-time.

Aplikasi chat, notification sistem, live dashboard, bahkan e-commerce modern semuanya mengandalkan teknologi WebSocket untuk memberikan update data secara langsung tanpa polling yang boros resource.

Artikel ini akan memandu kamu step-by-step mengimplementasikan WebSocket di Laravel untuk membuat sistem notifikasi real-time yang profesional dan scalable.

Apa Itu WebSocket dan Mengapa Penting?

WebSocket adalah protokol komunikasi dua arah yang memungkinkan server mengirim data ke client tanpa harus menunggu request.

Berbeda dengan HTTP tradisional yang bersifat request-response, WebSocket membuka koneksi persistent antara client dan server.

Bayangkan seperti telepon yang tetap tersambung, bukan seperti SMS yang harus kirim-terima berulang kali.

Keuntungan utama WebSocket:

• Latency rendah – Update sampai dalam hitungan milidetik
• Efisien – Tidak perlu polling yang membebani server
• Real-time – Data langsung ter-push ke semua client yang terhubung
• Bidirectional – Client dan server bisa saling kirim data kapan saja

Untuk aplikasi seperti notification system, live chat, atau collaborative editing, WebSocket adalah solusi terbaik.

Persiapan dan Requirements

Sebelum mulai, pastikan environment kamu sudah memenuhi requirement berikut:

• Laravel 10 atau lebih tinggi (Laravel 11 recommended)
• PHP 8.1+ dengan extension Redis atau Pusher
• Composer untuk dependency management
• Node.js dan NPM untuk Laravel Echo di frontend
• Redis server (optional tapi sangat direkomendasikan)

Laravel menyediakan broadcasting system yang powerful dan mudah dikonfigurasi.

Kita bisa menggunakan berbagai driver seperti Pusher, Redis, atau bahkan Laravel Reverb yang baru dirilis.

Setup Laravel Broadcasting

Langkah pertama adalah menginstall dan konfigurasi broadcasting di Laravel project kamu.

Buka terminal dan jalankan command berikut:

composer require pusher/pusher-php-server
php artisan install:broadcasting

Command ini akan menginstall dependencies yang diperlukan dan membuat file konfigurasi broadcasting.

Setelah itu, buka file .env dan sesuaikan konfigurasi broadcast driver:

BROADCAST_CONNECTION=pusher

PUSHER_APP_ID=your_app_id
PUSHER_APP_KEY=your_app_key
PUSHER_APP_SECRET=your_app_secret
PUSHER_APP_CLUSTER=ap1

Jika kamu ingin menggunakan Redis sebagai driver (lebih hemat biaya), ubah konfigurasi menjadi:

BROADCAST_CONNECTION=redis
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

Buka file config/broadcasting.php dan pastikan konfigurasi Redis sudah benar.

Untuk production, Redis adalah pilihan yang lebih ekonomis dibanding Pusher yang berbayar.

Membuat Event untuk Broadcasting

Laravel menggunakan Event system untuk broadcasting.

Mari kita buat event sederhana untuk notifikasi ketika ada order baru:

php artisan make:event NewOrderNotification

Buka file app/Events/NewOrderNotification.php dan modifikasi seperti ini:

<?php

namespace App\Events;

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

class NewOrderNotification implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $order;
    public $message;

    public function __construct($order, $message)
    {
        $this->order = $order;
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new Channel('orders');
    }

    public function broadcastAs()
    {
        return 'new.order';
    }

    public function broadcastWith()
    {
        return [
            'order_id' => $this->order->id,
            'customer_name' => $this->order->customer_name,
            'total' => $this->order->total,
            'message' => $this->message,
            'created_at' => $this->order->created_at->toDateTimeString()
        ];
    }
}

Interface ShouldBroadcast memberitahu Laravel bahwa event ini harus di-broadcast ke client.

Method broadcastOn() menentukan channel mana yang akan menerima broadcast.

Method broadcastAs() memberi nama custom untuk event (opsional tapi recommended).

Method broadcastWith() menentukan data apa saja yang akan dikirim ke client.

Trigger Event dari Controller

Sekarang mari kita trigger event ini dari controller ketika ada order baru:

<?php

namespace App\Http\Controllers;

use App\Events\NewOrderNotification;
use App\Models\Order;
use Illuminate\Http\Request;

class OrderController extends Controller
{
    public function store(Request $request)
    {
        $validated = $request->validate([
            'customer_name' => 'required|string|max:255',
            'total' => 'required|numeric|min:0',
            'items' => 'required|array'
        ]);

        $order = Order::create($validated);

        // Trigger broadcast event
        broadcast(new NewOrderNotification(
            $order, 
            'Order baru dari ' . $order->customer_name
        ));

        return response()->json([
            'success' => true,
            'order' => $order
        ], 201);
    }
}

Helper function broadcast() akan mengirim event ke semua client yang listen di channel tersebut.

Event ini akan di-queue secara default untuk performa yang lebih baik.

Setup Frontend dengan Laravel Echo

Di sisi frontend, kita perlu Laravel Echo untuk listen ke WebSocket events.

Install dependencies yang diperlukan via NPM:

npm install --save-dev laravel-echo pusher-js

Jika menggunakan Redis, install socket.io-client:

npm install --save-dev laravel-echo socket.io-client

Buka file resources/js/bootstrap.js dan tambahkan konfigurasi Echo:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true
});

Untuk Redis dengan socket.io, konfigurasinya sedikit berbeda:

import Echo from 'laravel-echo';
import io from 'socket.io-client';

window.io = io;

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

Jangan lupa tambahkan environment variables di file .env:

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

Listen ke Events di Frontend

Sekarang kita bisa listen ke event yang di-broadcast dari backend.

Buat file JavaScript baru atau tambahkan di component Vue/React kamu:

// Vanilla JavaScript
document.addEventListener('DOMContentLoaded', function() {
    Echo.channel('orders')
        .listen('.new.order', (data) => {
            console.log('New order received:', data);
            
            // Tampilkan notification
            showNotification(data.message, data);
            
            // Update UI
            updateOrderList(data);
        });
});

function showNotification(message, orderData) {
    // Bisa pakai library seperti Toastr atau custom notification
    if (Notification.permission === 'granted') {
        new Notification('Order Baru!', {
            body: message,
            icon: '/images/notification-icon.png'
        });
    }
    
    // Tampilkan di dalam aplikasi
    const notificationEl = document.createElement('div');
    notificationEl.className = 'alert alert-success';
    notificationEl.innerHTML = `
        Order #${orderData.order_id}

        ${message}

        Total: Rp ${formatNumber(orderData.total)}
    `;
    
    document.getElementById('notification-container').appendChild(notificationEl);
    
    // Auto hide after 5 seconds
    setTimeout(() => notificationEl.remove(), 5000);
}

function updateOrderList(orderData) {
    // Logic untuk update daftar order di UI
    const ordersList = document.getElementById('orders-list');
    const newOrderRow = createOrderRow(orderData);
    ordersList.insertBefore(newOrderRow, ordersList.firstChild);
}

Untuk Vue.js, implementasinya akan seperti ini:

<template>
  <div class="dashboard">
    <div class="notification-container">
      <div v-for="notification in notifications" 
           :key="notification.id" 
           class="alert alert-success">
        {{ notification.message }}
      </div>
    </div>
    
    <div class="orders-list">
      <div v-for="order in orders" :key="order.order_id" class="order-item">
        Order #{{ order.order_id }} - {{ order.customer_name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: [],
      orders: []
    }
  },
  
  mounted() {
    this.listenToOrders();
  },
  
  methods: {
    listenToOrders() {
      Echo.channel('orders')
        .listen('.new.order', (data) => {
          this.addNotification(data.message);
          this.addOrder(data);
        });
    },
    
    addNotification(message) {
      const notification = {
        id: Date.now(),
        message: message
      };
      
      this.notifications.unshift(notification);
      
      setTimeout(() => {
        this.removeNotification(notification.id);
      }, 5000);
    },
    
    addOrder(orderData) {
      this.orders.unshift(orderData);
    },
    
    removeNotification(id) {
      const index = this.notifications.findIndex(n => n.id === id);
      if (index > -1) {
        this.notifications.splice(index, 1);
      }
    }
  }
}
</script>

Kesulitan dengan tugas programming atau butuh bantuan coding? KerjaKode siap membantu menyelesaikan tugas IT dan teknik informatika Anda. Dapatkan bantuan profesional di jasa tugas IT KerjaKode.

Menggunakan Private Channels untuk Security

Untuk notifikasi yang bersifat pribadi seperti notification per user, gunakan private channel.

Ubah event kita untuk menggunakan private channel:

public function broadcastOn()
{
    return new PrivateChannel('user.' . $this->order->user_id);
}

Kemudian define authorization logic di routes/channels.php:

<?php

use Illuminate\Support\Facades\Broadcast;

Broadcast::channel('user.{userId}', function ($user, $userId) {
    return (int) $user->id === (int) $userId;
});

Di frontend, listen ke private channel dengan authentication:

Echo.private('user.' + userId)
    .listen('.new.order', (data) => {
        console.log('Private notification:', data);
        showNotification(data.message, data);
    });

Laravel akan otomatis handle authentication menggunakan session atau Sanctum token.

Menggunakan Presence Channels

Presence channel berguna untuk aplikasi yang perlu tahu siapa saja yang sedang online.

Cocok untuk fitur "who's typing", online status, atau collaborative editing.

// Di routes/channels.php
Broadcast::channel('chat.{roomId}', function ($user, $roomId) {
    if ($user->canJoinRoom($roomId)) {
        return [
            'id' => $user->id,
            'name' => $user->name,
            'avatar' => $user->avatar_url
        ];
    }
});

// Di frontend
Echo.join('chat.' + roomId)
    .here((users) => {
        console.log('Users currently in room:', users);
    })
    .joining((user) => {
        console.log(user.name + ' joined');
    })
    .leaving((user) => {
        console.log(user.name + ' left');
    })
    .listen('.message', (data) => {
        console.log('New message:', data);
    });

Running WebSocket Server dengan Laravel Reverb

Laravel Reverb adalah WebSocket server bawaan Laravel yang powerful dan mudah di-setup.

Install Reverb dengan command:

php artisan install:broadcasting

Pilih Reverb saat diminta memilih driver.

Start Reverb server dengan:

php artisan reverb:start

Untuk production, gunakan process manager seperti Supervisor:

[program:reverb]
command=php /path/to/artisan reverb:start
autostart=true
autorestart=true
user=www-data
redirect_stderr=true
stdout_logfile=/var/log/reverb.log

Reverb support horizontal scaling dengan Redis untuk aplikasi high-traffic.

Optimization dan Best Practices

Beberapa tips penting untuk WebSocket implementation yang optimal:

1. Gunakan Queue untuk Broadcasting

Selalu queue broadcast events agar tidak blocking request:

class NewOrderNotification implements ShouldBroadcast, ShouldQueue
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    
    public $queue = 'broadcasts';
}

2. Batasi Data yang Dikirim

Hanya kirim data yang benar-benar diperlukan di frontend untuk mengurangi bandwidth:

public function broadcastWith()
{
    return [
        'id' => $this->order->id,
        'total' => $this->order->total,
        // Hindari kirim relationship yang tidak perlu
    ];
}

3. Implement Reconnection Logic

Handle koneksi yang terputus dengan reconnection otomatis:

window.Echo.connector.pusher.connection.bind('state_change', function(states) {
    if (states.current === 'disconnected') {
        console.log('Disconnected, attempting to reconnect...');
    }
    
    if (states.current === 'connected') {
        console.log('Reconnected successfully');
    }
});

4. Gunakan Redis untuk Scaling

Untuk aplikasi dengan traffic tinggi, Redis memungkinkan multiple WebSocket server instances berbagi state:

BROADCAST_CONNECTION=redis
QUEUE_CONNECTION=redis

5. Monitor WebSocket Connections

Implementasikan monitoring untuk track active connections dan performance:

// Di EventServiceProvider
Event::listen(
    \Laravel\Reverb\Events\ConnectionEstablished::class,
    function ($event) {
        logger()->info('New WebSocket connection', [
            'connection_id' => $event->connection->id()
        ]);
    }
);

Troubleshooting Common Issues

Event tidak ter-broadcast

Pastikan queue worker berjalan:

php artisan queue:work --queue=broadcasts

Check juga apakah event implements ShouldBroadcast interface.

Frontend tidak menerima events

Periksa network tab di browser untuk memastikan WebSocket connection established.

Verify juga credential Pusher atau Redis configuration sudah benar.

Authentication gagal di Private Channel

Pastikan route /broadcasting/auth accessible dan CSRF token di-pass dengan benar.

Memory leak di long-running connections

Implement proper cleanup saat component unmount:

beforeDestroy() {
    Echo.leave('orders');
}

Testing WebSocket Implementation

Testing adalah bagian penting dari development.

Laravel menyediakan helper untuk testing broadcast events:

<?php

namespace Tests\Feature;

use App\Events\NewOrderNotification;
use App\Models\Order;
use Illuminate\Support\Facades\Event;
use Tests\TestCase;

class OrderBroadcastTest extends TestCase
{
    public function test_new_order_broadcasts_notification()
    {
        Event::fake();

        $order = Order::factory()->create([
            'customer_name' => 'John Doe',
            'total' => 150000
        ]);

        broadcast(new NewOrderNotification($order, 'Test message'));

        Event::assertDispatched(NewOrderNotification::class, function ($event) use ($order) {
            return $event->order->id === $order->id;
        });
    }
}

Untuk testing di browser, gunakan Pusher Debug Console atau Chrome DevTools Network tab.

Kesimpulan

WebSocket implementation di Laravel memberikan foundation yang solid untuk aplikasi real-time modern.

Dengan Laravel Broadcasting, Echo, dan Reverb, kamu bisa build notification system, live chat, atau collaborative features dengan effort minimal.

Key takeaways dari artikel ini:

• WebSocket membuka komunikasi dua arah persistent antara client dan server
• Laravel Broadcasting menyediakan abstraksi yang elegant untuk WebSocket
• Gunakan queue untuk broadcast events agar performa optimal
• Private channel penting untuk security dan data privacy
• Presence channel berguna untuk fitur collaborative dan social
• Laravel Reverb adalah solusi cost-effective untuk production
• Monitoring dan proper error handling adalah must-have

Real-time features bukan lagi luxury, tapi necessity untuk aplikasi modern.

Dengan panduan ini, kamu sudah punya bekal untuk implementasi WebSocket di project Laravel kamu.

Start dengan notification sederhana, kemudian expand ke fitur yang lebih complex seperti live chat atau collaborative editing.

Selamat coding dan semoga sukses dengan real-time application kamu!