# Filament 面板：即時通知與編輯鎖

> 一條命令：鈴鐺立刻更新、誰在線、編輯鎖，以及自己更新的表格。

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

Filament 面板是團隊一整天工作的地方：訂單、工單、內容與審核。預設情況下面板靠輪詢得知變化，所以通知鈴鐺最多晚 30 秒，表格會過時，兩個人也可能互相蓋掉對方的修改。Filament 本來就能透過 Laravel Echo 連到任何相容 Pusher 的服務，我們的 `hibira-io/filament` 插件用一條命令就幫你打開，支援 Filament 3、4、5。不必自己架 WebSocket 伺服器，也不用 npm 建置。

## 團隊得到什麼

- 通知一存進資料庫，鈴鐺就立刻更新，你的 App 現有的每一則通知都適用。
- 顯示誰也在同一頁的頭像，以及編輯鎖：同一筆資料一次只有一個人編輯。
- 表格、關聯表和記錄頁在資料變動時自己更新，不論變動來自面板、佇列工作還是 API。
- 匯入、匯出的進度條，以及團隊聊天頁。

![編輯鎖：Mei 正在編輯文章，其他人無法儲存，但可以按「請求編輯」](https://hibira.io/portal/articles/filament-lock-zh-TW-light.webp)

## 用到的功能

- `hibira-io/laravel` 提供的 `hibira` **Laravel Broadcasting** 連線。
- **Filament 內建的 Laravel Echo**，由插件指向 Hibira。
- 通知、表格、記錄用**私人頻道**；誰在線與編輯鎖用 **Presence 頻道**。
- **Channels HTTP API**：伺服器在轉移編輯鎖前，用它確認誰還在這筆資料上。

```text
flow: 你的 App 在請求或工作結束時把變動送到 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，最後檢查連線與每個面板。隨時可以再執行，它只會補上缺少的部分。記得在 App 頁面的 **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-TW-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-TW-light.webp)

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

- `->importProgress()` 一段一段顯示每個匯入、匯出的進度。
- `->chat()` 為面板使用者加上聊天頁。
- AI 代理也能出現在「誰在線」並像人一樣取得編輯鎖：請看 [Filament 指南](https://hibira.io/zh-tw/guides/filament)。
- [多人協作富文字編輯器](https://hibira.io/zh-tw/guides/filament-collab)、[AI 工具審核收件匣](https://hibira.io/zh-tw/guides/filament-approvals)與 [AI 即時客服](https://hibira.io/zh-tw/guides/filament-support)都建立在同一個插件上。

![匯入 1,000 筆資料：卡片隨每一段前進，表格同時填入](https://hibira.io/portal/articles/filament-import-zh-TW-light.webp)

## 從 Reverb 或輪詢換過來

如果你的面板已經用 Echo 搭配 Reverb 或 Pusher，插件會替它所在的面板換掉 `filament.broadcasting.echo` 設定，你自己的事件與頻道規則照常運作。如果面板現在靠輪詢，`->databaseNotifications()` 會關掉輪詢；想保留作為備援就傳 `polling: '60s'`。[搬遷頁面](https://hibira.io/zh-tw/migrate)列出了要檢查的項目。

## 小提醒

- 每個環境（本機、測試、正式）各建一個 App，測試事件就不會送到真正的使用者。
- 用自己 guard 登入的面板，需要用同一個 guard 註冊廣播路由；`hibira:filament` 遇到時會提醒你。
- 一連串的變動在每個請求或佇列工作只送出一則訊息，用量很省；各方案內容請看[價格](https://hibira.io/zh-tw/pricing)。