Học Laravel – Bài 37: Broadcasting

Giới thiệu broadcasting trong Laravel

Websocket được sử dụng để thực thi các tác vụ realtime, live-update. Khi 1 dữ liệu được cập nhật ở server, 1 tin nhắn sẽ được gửi qua websocket về client. Ví dụ bạn cần export dữ liệu ra file CSV và gửi email cho user. Tuy nhiên việc này mất thời gian và bạn phải sử dụng queued job để thực thi. Khi file CSV được tạo và gửi mail đến user, chúng ta sử dụng event broadcasting để kích hoạt 1 event App\Events\UserDataExported. Khi sự kiện này được gửi đến browser, chúng ta hiển thị 1 tin nhắn đến user thông báo đã gửi mail (mà không cần phải load lại page).

Ở server-side, Laravel hỗ trợ 2 driver: Pusher Channels và Ably. Tuy nhiên các package như laravel-websockets và soketi cũng cung cấp các driver broadcasting mà không cần yêu cầu các nhà cung cấp thương mại.

Update: Laravel version 11 giới thiệu Laravel Reverb (sẽ có bài viết chi tiết sau).

Cấu hình server:

Để sử dụng event broadcasting, cần cài đặt 1 số packages ở server. Ở client Laravel Echo (1 thư viện js) có thể nhận tin nhắn từ server.

Các cấu hình trong file config/broadcasting.php. Laravel hỗ trợ nhiều broadcast driver như: Pusher Channels, Redis, và log driver cho local dev. null driver cho phép disable broadcast trong testing.

Broadcast Service Provider:

Trước khi broadcast 1 event, bạn cần đăng ký App\Providers\BroadcastServiceProvider bằng cách uncomment dòng provider này trong file cấu hình config/app.php.

Cấu hình Queue:

Bạn cũng cần cấu hình và chạy 1 queue worker. Tất cả event broadcasting được chạy qua queued jobs để thời gian phản hồi của ứng dụng không bị ảnh hưởng bởi event broadcast.

Reverb:

Bạn có thể cài đặt Reverb sử dụng composer (đang ở beta, cần cài đặt ở beta release):

composer require laravel/reverb:@beta

Sau khi cài đặt, chạy cài đặt Reverb để publish cấu hình:

php artisan reverb:install

Pusher Channels:

Nếu sử dụng Pusher Channels, bạn cần cài đặt PHP SDK sử dụng composer:

composer require pusher/pusher-php-server

Tiếp theo, cấu hình thông tin xác thực của Pusher Channels trong file config/broadcasting.php. Thông thường chỉ cần các tham số sau:

PUSHER_APP_ID=your-pusher-app-id
PUSHER_APP_KEY=your-pusher-key
PUSHER_APP_SECRET=your-pusher-secret
PUSHER_APP_CLUSTER=mt1

Cấu hình pusher cũng cho phép bạn chỉ định thêm options được hỗ trợ bởi Channels, ví dụ cluster.

Tiếp theo, thay đổi broadcast driver trong file .env:

BROADCAST_DRIVER=pusher

Cuối cùng cài đặt và cấu hình Laravel Echo để nhận broadcast event ở client side.

Cài đặt ở Client:

Reverb:

Sử dụng Laravel Echo qua NPM (cần cài đặt cả pusher-js):

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

Tiếp theo tạo 1 Echo instance trong ứng dụng js của bạn. Trong resource/js/bootstrap.js:

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;

window.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,
    wssPort: import.meta.env.VITE_REVERB_PORT,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

Chạy compile:

npm run build

Pusher Channels:

Để cấu hình cho Pusher:

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
});

Sau đó chạy compile: npm run build