Chuyển đến nội dung chính

第 14 課:事件、聽眾與廣播

事件系統,事件訂閱者。使用 Pusher/Laravel Reverb 進行廣播。私人/存在頻道。即時通知、WebSocket 整合。拉拉維爾迴聲報。

💻 程式設計 — 第 14 課 第 14 課:事件、聽眾與廣播

Laravel:從基礎到高級

第 4 部分:進階功能

亞洲開發網

1. 事件和監聽器

// Event
class OrderPlaced
{
    use Dispatchable, SerializesModels;

    public function __construct(
        public readonly Order $order,
    ) {}
}

// Listener
class SendOrderConfirmation implements ShouldQueue
{
    public function handle(OrderPlaced $event): void
    {
        $event->order->user->notify(new OrderConfirmation($event->order));
    }
}

// EventServiceProvider hoặc Attribute
#[AsEventListener]
class SendOrderConfirmation { ... }

// Dispatch
OrderPlaced::dispatch($order);
event(new OrderPlaced($order));

2. 廣播

composer require laravel/reverb
php artisan reverb:install
class OrderStatusUpdated implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public function __construct(
        public readonly Order $order,
    ) {}

    public function broadcastOn(): array
    {
        return [new PrivateChannel('orders.' . $this->order->user_id)];
    }

    public function broadcastWith(): array
    {
        return [
            'order_id' => $this->order->id,
            'status' => $this->order->status,
        ];
    }
}

// routes/channels.php
Broadcast::channel('orders.{userId}', function (User $user, int $userId) {
    return $user->id === $userId;
});

3.Laravel Echo(前端)

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

const echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: false,
});

echo.private(`orders.${userId}`)
    .listen('OrderStatusUpdated', (e) => {
        console.log('Order updated:', e.order_id, e.status);
    });

// Presence channel
echo.join(`chat.${roomId}`)
    .here((users) => console.log('Online:', users))
    .joining((user) => console.log('Joined:', user))
    .leaving((user) => console.log('Left:', user));

下一篇: 通知、郵件和日程安排。