# Filament 面板：实时通知和编辑锁

> 一条命令：铃铛立刻更新、谁在线、编辑锁，以及自己更新的表格。

Source: https://hibira.io/zh-cn/use-cases/filament

Filament 面板是团队一整天工作的地方：订单、工单、内容和审核。默认情况下面板靠轮询得知变化，所以通知铃铛最多晚 30 秒，表格会过时，两个人也可能互相覆盖对方的修改。Filament 本来就能通过 Laravel Echo 连接任何兼容 Pusher 的服务，我们的 `hibira-io/filament` 插件用一条命令就帮你打开，支持 Filament 3、4、5。不用自己搭 WebSocket 服务器，也不用 npm 构建。

## 团队得到什么

- 通知一存进数据库，铃铛就立刻更新，你的应用现有的每一条通知都适用。
- 显示谁也在同一页的头像，以及编辑锁：同一条记录一次只有一个人编辑。
- 表格、关联表和记录页在数据变化时自己更新，不论变化来自面板、队列任务还是 API。
- 导入、导出的进度条，以及团队聊天页。

![编辑锁：Mei 正在编辑文章，其他人无法保存，但可以点“请求编辑”](https://hibira.io/portal/articles/filament-lock-zh-CN-light.webp)

## 用到的功能

- `hibira-io/laravel` 提供的 `hibira` **Laravel Broadcasting** 连接。
- **Filament 自带的 Laravel Echo**，由插件指向 Hibira。
- 通知、表格、记录用**私有频道**；谁在线和编辑锁用 **Presence 频道**。
- **Channels HTTP API**：服务器在转移编辑锁前，用它确认谁还在这条记录上。

```text
flow: 你的应用在请求或任务结束时把变化发送到 Hibira；打开该页的面板立刻更新
Laravel|保存、通知、导入 --每个请求一条消息--> *Hibira|ws.hibira.io --WebSocket--> Filament 面板|铃铛、表格、记录页
== 谁可以收听
Filament 面板|`POST /broadcasting/auth` --canAccessPanel()--> Laravel|频道规则 --签名--> *Hibira
```

## 步骤 1：一条命令安装

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

这条命令会把设置加进 `.env` 并询问你的 App ID、key 和 secret，开启广播授权路由，创建通知数据表，并把插件加进你的 Panel provider，最后检查连接和每个面板。随时可以再运行，它只会补上缺少的部分。记得在应用页面的 **Allowed origins** 加上你网站的地址，浏览器才能连接。

## 步骤 2：通知立刻送达

代码不用改。每一条数据库通知一存入就会更新铃铛，包括没有加 `isEventDispatched: true` 的通知：

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

Filament 通过队列保存通知，所以请保持 `php artisan queue:work` 运行，开发时也可以用 `QUEUE_CONNECTION=sync`。

## 步骤 3：谁在线和编辑锁

`hibira:filament` 已经打开头像。要用编辑锁，在编辑页加一个 trait：

```php
class EditPost extends EditRecord
{
    use InteractsWithHibiraLock;

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

第一个打开记录的人持有锁，其他人可以查看并请求编辑。持有人离开后，下一个人几秒内就会拿到锁，不需要心跳轮询。

![持有人收到请求，可以先保存再交出](https://hibira.io/portal/articles/filament-lock-request-zh-CN-light.webp)

## 步骤 4：实时表格和记录页

打开 `liveTables()` 和 `liveRecords()` 后，表格和记录页会为所有打开它们的人更新。一连串的变化，例如导入一千条数据，每个请求或队列任务只发送一次，而不是每条一次。编辑页会显示是谁改了记录，并且只载入被改的字段，所以你尚未保存的编辑会保留。

用 query builder 批量更新时不会触发 model 事件，请自己标记表格：

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

app(\Hibira\Filament\LiveTables::class)->touch(Order::class);
```

![美玲编辑时建宏保存了文章：页面会提示，点“载入修改”只带入他改的字段](https://hibira.io/portal/articles/filament-live-record-zh-CN-light.webp)

## 步骤 5：面板的更多功能

- `->importProgress()` 一段一段显示每个导入、导出的进度。
- `->chat()` 为面板用户加上聊天页。
- AI 代理也能出现在“谁在线”并像人一样获取编辑锁：请看 [Filament 指南](https://hibira.io/zh-cn/guides/filament)。
- [多人协作富文本编辑器](https://hibira.io/zh-cn/guides/filament-collab)、[AI 工具审批收件箱](https://hibira.io/zh-cn/guides/filament-approvals)和 [AI 在线客服](https://hibira.io/zh-cn/guides/filament-support)都建立在同一个插件上。

![导入 1,000 条数据：卡片随每一段前进，表格同时填入](https://hibira.io/portal/articles/filament-import-zh-CN-light.webp)

## 从 Reverb 或轮询迁移过来

如果你的面板已经用 Echo 搭配 Reverb 或 Pusher，插件会为它所在的面板替换 `filament.broadcasting.echo` 设置，你自己的事件和频道规则照常工作。如果面板现在靠轮询，`->databaseNotifications()` 会关掉轮询；想保留作为备用就传 `polling: '60s'`。[迁移页面](https://hibira.io/zh-cn/migrate)列出了要检查的项目。

## 小提醒

- 每个环境（本地、测试、生产）各建一个应用，测试事件就不会发到真正的用户。
- 用自己 guard 登录的面板，需要用同一个 guard 注册广播路由；`hibira:filament` 遇到时会提醒你。
- 一连串的变化在每个请求或队列任务只发送一条消息，用量很省；各方案内容请看[价格](https://hibira.io/zh-cn/pricing)。