← 使用场景

Filament 面板:实时通知和编辑锁

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

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

团队得到什么

  • 通知一存进数据库,铃铛就立刻更新,你的应用现有的每一条通知都适用。
  • 显示谁也在同一页的头像,以及编辑锁:同一条记录一次只有一个人编辑。
  • 表格、关联表和记录页在数据变化时自己更新,不论变化来自面板、队列任务还是 API。
  • 导入、导出的进度条,以及团队聊天页。
编辑锁:Mei 正在编辑文章,其他人无法保存,但可以点“请求编辑”
编辑锁:Mei 正在编辑文章,其他人无法保存,但可以点“请求编辑”

用到的功能

  • hibira-io/laravel 提供的 hibira Laravel Broadcasting 连接。
  • Filament 自带的 Laravel Echo,由插件指向 Hibira。
  • 通知、表格、记录用私有频道;谁在线和编辑锁用 Presence 频道。
  • Channels HTTP API:服务器在转移编辑锁前,用它确认谁还在这条记录上。
Laravel保存、通知、导入
每个请求一条消息
Hibiraws.hibira.io
WebSocket
Filament 面板铃铛、表格、记录页

谁可以收听

Filament 面板POST /broadcasting/auth
canAccessPanel()
Laravel频道规则
签名
Hibira
你的应用在请求或任务结束时把变化发送到 Hibira;打开该页的面板立刻更新

步骤 1:一条命令安装

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

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

步骤 2:通知立刻送达

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

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

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

步骤 3:谁在线和编辑锁

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

class EditPost extends EditRecord
{
    use InteractsWithHibiraLock;

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

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

持有人收到请求,可以先保存再交出
持有人收到请求,可以先保存再交出

步骤 4:实时表格和记录页

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

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

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

app(\Hibira\Filament\LiveTables::class)->touch(Order::class);
美玲编辑时建宏保存了文章:页面会提示,点“载入修改”只带入他改的字段
美玲编辑时建宏保存了文章:页面会提示,点“载入修改”只带入他改的字段

步骤 5:面板的更多功能

导入 1,000 条数据:卡片随每一段前进,表格同时填入
导入 1,000 条数据:卡片随每一段前进,表格同时填入

从 Reverb 或轮询迁移过来

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

小提醒

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