← Tình huống

Bảng Filament có thông báo tức thì và khóa chỉnh sửa

Một lệnh: chuông cập nhật ngay, ai đang xem, khóa chỉnh sửa và bảng tự làm mới.

Bảng điều khiển Filament là nơi đội ngũ làm việc cả ngày: đơn hàng, ticket, nội dung và phê duyệt. Mặc định bảng điều khiển biết thay đổi bằng cách polling, nên chuông thông báo trễ tới 30 giây, bảng bị cũ và hai người có thể lưu đè công việc của nhau. Filament vốn đã kết nối được với mọi dịch vụ tương thích Pusher qua Laravel Echo, và plugin hibira-io/filament của chúng tôi bật nó lên bằng một lệnh, cho Filament 3, 4 và 5. Không cần chạy máy chủ WebSocket, không cần build bằng npm.

Đội ngũ nhận được gì

  • Chuông thông báo cập nhật ngay khi thông báo được lưu, cho mọi thông báo ứng dụng của bạn đang gửi.
  • Ảnh đại diện của những ai đang mở cùng trang, và khóa chỉnh sửa để mỗi lúc chỉ một người sửa một bản ghi.
  • Bảng, relation manager và trang bản ghi tự cập nhật khi có thay đổi, dù từ bảng điều khiển, job trong hàng đợi hay API.
  • Thanh tiến độ cho nhập và xuất dữ liệu, cùng trang chat cho đội ngũ.
Khóa chỉnh sửa: Mei đang sửa bài viết nên người khác không lưu được, kèm nút Xin quyền sửa
Khóa chỉnh sửa: Mei đang sửa bài viết nên người khác không lưu được, kèm nút Xin quyền sửa

Dùng những gì

  • Laravel Broadcasting với kết nối hibira từ hibira-io/laravel.
  • Laravel Echo có sẵn trong Filament, được plugin trỏ tới Hibira.
  • Kênh private cho thông báo, bảng và bản ghi; kênh presence cho danh sách người đang xem và khóa chỉnh sửa.
  • Channels HTTP API, máy chủ dùng để kiểm tra ai còn ở bản ghi trước khi chuyển khóa.
Laravellưu, thông báo, nhập dữ liệu
một tin nhắn mỗi request
Hibiraws.hibira.io
WebSocket
Bảng Filamentchuông, bảng, trang bản ghi

Ai được nghe

Bảng FilamentPOST /broadcasting/auth
canAccessPanel()
Laravelquy tắc kênh
chữ ký
Hibira
Ứng dụng gửi thay đổi tới Hibira khi request hoặc job kết thúc; các bảng điều khiển đang mở trang đó cập nhật ngay

Bước 1: cài đặt bằng một lệnh

composer require hibira-io/filament
php artisan hibira:filament

Lệnh này thêm cấu hình vào .env và hỏi App ID, key và secret, bật route xác thực broadcasting, tạo bảng thông báo và thêm plugin vào panel provider. Sau đó nó kiểm tra kết nối và từng bảng điều khiển. Chạy lại bất cứ lúc nào; nó chỉ thêm phần còn thiếu. Hãy thêm địa chỉ trang web vào Allowed origins trên trang ứng dụng để trình duyệt kết nối được.

Bước 2: thông báo tới ngay

Không cần sửa mã. Mọi thông báo trong cơ sở dữ liệu cập nhật chuông ngay khi được lưu, kể cả thông báo gửi không có isEventDispatched: true:

Notification::make()
    ->title('Order #1024 shipped')
    ->success()
    ->sendToDatabase($user);

Filament lưu thông báo qua hàng đợi, nên hãy để php artisan queue:work chạy, hoặc dùng QUEUE_CONNECTION=sync khi phát triển.

Bước 3: ai đang xem và khóa chỉnh sửa

hibira:filament đã bật ảnh đại diện. Với khóa chỉnh sửa, thêm một trait vào trang sửa:

class EditPost extends EditRecord
{
    use InteractsWithHibiraLock;

    protected static string $resource = PostResource::class;
}

Người đầu tiên mở bản ghi giữ khóa; người khác có thể xem và xin quyền sửa. Khi người giữ rời đi, người kế tiếp nhận khóa trong vài giây, không cần polling heartbeat.

Người giữ khóa nhận yêu cầu và có thể lưu trước khi chuyển giao
Người giữ khóa nhận yêu cầu và có thể lưu trước khi chuyển giao

Bước 4: bảng và trang bản ghi thời gian thực

Khi bật liveTables() và liveRecords(), bảng và trang bản ghi cập nhật cho mọi người đang mở. Một loạt thay đổi, như nhập một nghìn dòng, chỉ gửi một lần mỗi request hoặc job, không phải mỗi dòng. Trang sửa cho biết ai đã đổi bản ghi và chỉ tải các trường đã đổi, nên các chỉnh sửa chưa lưu vẫn còn.

Sau khi cập nhật hàng loạt bằng query builder, vốn không phát model event, hãy tự đánh dấu bảng:

Order::query()->where('paid', false)->update(['status' => 'cancelled']);

app(\Hibira\Filament\LiveTables::class)->touch(Order::class);
Minh lưu bài viết khi Lan đang sửa: trang báo cho Lan biết, và nút Tải thay đổi chỉ lấy các trường anh ấy đã đổi
Minh lưu bài viết khi Lan đang sửa: trang báo cho Lan biết, và nút Tải thay đổi chỉ lấy các trường anh ấy đã đổi

Bước 5: thêm cho bảng điều khiển của bạn

Nhập 1.000 dòng: thẻ tiến lên theo từng phần trong khi bảng được điền dần
Nhập 1.000 dòng: thẻ tiến lên theo từng phần trong khi bảng được điền dần

Chuyển từ Reverb hoặc polling

Nếu bảng điều khiển đã dùng Echo với Reverb hoặc Pusher, plugin thay cấu hình filament.broadcasting.echo cho bảng điều khiển có cài nó, còn event và quy tắc kênh của bạn vẫn hoạt động như cũ. Nếu bảng điều khiển đang polling, ->databaseNotifications() sẽ tắt polling; truyền polling: '60s' nếu muốn giữ làm dự phòng. Trang chuyển đổi liệt kê những gì cần kiểm tra.

Mẹo

  • Tạo một ứng dụng cho mỗi môi trường (local, staging, production) để event thử nghiệm không tới người dùng thật.
  • Bảng điều khiển đăng nhập bằng guard riêng cần đăng ký route broadcasting với guard đó; hibira:filament sẽ nhắc khi cần.
  • Một loạt thay đổi được gửi thành một tin nhắn mỗi request hoặc job, giúp mức dùng thấp; xem bảng giá để biết mỗi gói gồm những gì.