# 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.

Source: https://hibira.io/vi/use-cases/filament

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](https://hibira.io/portal/articles/filament-lock-vi-light.webp)

## 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.

```text
flow: Ứ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
Laravel|lưu, thông báo, nhập dữ liệu --một tin nhắn mỗi request--> *Hibira|ws.hibira.io --WebSocket--> Bảng Filament|chuông, bảng, trang bản ghi
== Ai được nghe
Bảng Filament|`POST /broadcasting/auth` --canAccessPanel()--> Laravel|quy tắc kênh --chữ ký--> *Hibira
```

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

```shell
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`:

```php
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:

```php
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](https://hibira.io/portal/articles/filament-lock-request-vi-light.webp)

## 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:

```php
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](https://hibira.io/portal/articles/filament-live-record-vi-light.webp)

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

- `->importProgress()` hiển thị tiến độ của từng lần nhập và xuất theo từng phần.
- `->chat()` thêm trang chat cho người dùng của bảng điều khiển.
- AI agent cũng có thể xuất hiện trong danh sách người đang xem và giữ khóa chỉnh sửa như một người: xem [hướng dẫn Filament](https://hibira.io/vi/guides/filament).
- [Trình soạn thảo cộng tác](https://hibira.io/vi/guides/filament-collab), [hộp thư phê duyệt công cụ AI](https://hibira.io/vi/guides/filament-approvals) và [hỗ trợ chat trực tiếp bằng AI](https://hibira.io/vi/guides/filament-support) đều xây trên cùng plugin.

![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](https://hibira.io/portal/articles/filament-import-vi-light.webp)

## 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](https://hibira.io/vi/migrate) 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á](https://hibira.io/vi/pricing) để biết mỗi gói gồm những gì.