WebSocket dengan Laravel dan Vue 3: Real-time Notification

Real-time feature membuat aplikasi terasa hidup. Berikut implementasi notifikasi real-time dari nol.

Stack yang Digunakan

• Laravel Broadcasting — Server-side event

• Pusher / Soketi — WebSocket server

• Laravel Echo — Client-side listener

Setup Broadcasting

composer require pusher/pusher-php-server
npm install --save-dev laravel-echo pusher-js

BROADCAST_DRIVER=pusher
PUSHER_APP_ID=your-app-id
PUSHER_APP_KEY=your-app-key
PUSHER_APP_SECRET=your-app-secret

Event yang Bisa di-Broadcast

class NotificationCreated implements ShouldBroadcast
{
    public function __construct(public Notification $notification) {}
public function broadcastOn(): array     {         return [             new PrivateChannel('App.Models.User.' . $this->notification->notifiable_id),         ];     }
public function broadcastAs(): string     {         return 'notification.created';     } }

Vue 3 — Listen Event

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, })
// Di composable window.Echo.private(App.Models.User.${userId})   .listen('.notification.created', (e) => {     notifications.value.unshift(e.notification)   })