# แผง Filament ที่มีการแจ้งเตือนเรียลไทม์และ edit lock

> คำสั่งเดียว: กระดิ่งที่อัปเดตทันที คนที่อยู่ในหน้า edit lock และตารางที่รีเฟรชเอง

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

แผง Filament คือที่ที่ทีมใช้ทั้งวัน ทั้งคำสั่งซื้อ ทิกเก็ต เนื้อหา และการอนุมัติ โดยค่าเริ่มต้นแผงรู้ว่ามีอะไรเปลี่ยนด้วยการ polling กระดิ่งแจ้งเตือนจึงช้าได้ถึง 30 วินาที ตารางล้าสมัย และสองคนอาจบันทึกทับงานของกันและกัน Filament เชื่อมต่อบริการที่เข้ากันได้กับ Pusher ผ่าน Laravel Echo ได้อยู่แล้ว และปลั๊กอิน `hibira-io/filament` ของเราเปิดใช้ได้ด้วยคำสั่งเดียว รองรับ Filament 3, 4 และ 5 ไม่ต้องดูแลเซิร์ฟเวอร์ WebSocket และไม่ต้อง build ด้วย npm

## สิ่งที่ทีมได้รับ

- กระดิ่งแจ้งเตือนอัปเดตทันทีที่การแจ้งเตือนถูกบันทึก ใช้ได้กับทุกการแจ้งเตือนที่แอปส่งอยู่แล้ว
- อวาตาร์ของคนที่เปิดหน้าเดียวกัน และ edit lock ให้แก้ไขรายการหนึ่งได้ทีละคน
- ตาราง relation manager และหน้ารายการอัปเดตเองเมื่อข้อมูลเปลี่ยน ไม่ว่าจะเปลี่ยนจากแผง คิวงาน หรือ API
- แถบความคืบหน้าของการนำเข้าและส่งออก และหน้าแชตของทีม

![Edit lock: Mei กำลังแก้ไขบทความ คนอื่นจึงบันทึกไม่ได้ แต่มีปุ่มขอแก้ไข](https://hibira.io/portal/articles/filament-lock-th-light.webp)

## ฟีเจอร์ที่ใช้

- **Laravel Broadcasting** กับ connection `hibira` จาก `hibira-io/laravel`
- **Laravel Echo ที่มากับ Filament** ซึ่งปลั๊กอินชี้ไปที่ Hibira
- **ช่อง private** สำหรับการแจ้งเตือน ตาราง และรายการ และ **ช่อง presence** สำหรับคนที่อยู่ในหน้าและ edit lock
- **Channels HTTP API** ที่เซิร์ฟเวอร์ใช้ตรวจว่าใครยังอยู่ในรายการก่อนย้าย lock

```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 เปิด route ยืนยันสิทธิ์ broadcasting สร้างตารางการแจ้งเตือน และเพิ่มปลั๊กอินใน 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: ใครอยู่ในหน้าและ edit lock

`hibira:filament` เปิดอวาตาร์ให้แล้ว ส่วน edit lock ให้เพิ่ม trait หนึ่งตัวในหน้าแก้ไข:

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

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

คนแรกที่เปิดรายการถือ lock คนอื่นดูได้และขอแก้ไขได้ เมื่อผู้ถือออกไป คนถัดไปจะได้ lock ภายในไม่กี่วินาที โดยไม่ต้อง polling heartbeat

![ผู้ถือได้รับคำขอ และบันทึกก่อนส่งต่อได้](https://hibira.io/portal/articles/filament-lock-request-th-light.webp)

## ขั้นที่ 4: ตารางและหน้ารายการแบบเรียลไทม์

เมื่อเปิด `liveTables()` และ `liveRecords()` ตารางและหน้ารายการจะอัปเดตให้ทุกคนที่เปิดอยู่ การเปลี่ยนแปลงต่อเนื่อง เช่น นำเข้าพันแถว จะส่งครั้งเดียวต่อคำขอหรือคิวงาน ไม่ใช่ทุกแถว หน้าแก้ไขบอกว่าใครเปลี่ยนรายการ และโหลดเฉพาะฟิลด์ที่เปลี่ยน การแก้ไขที่ยังไม่บันทึกจึงยังอยู่

หลังอัปเดตจำนวนมากผ่าน query builder ซึ่งไม่มี model event ให้ทำเครื่องหมายตารางเอง:

```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-th-light.webp)

## ขั้นที่ 5: เพิ่มเติมสำหรับแผงของคุณ

- `->importProgress()` แสดงความคืบหน้าของการนำเข้าและส่งออกทีละช่วง
- `->chat()` เพิ่มหน้าแชตสำหรับผู้ใช้แผง
- AI agent ก็ปรากฏในรายชื่อคนที่อยู่ในหน้าและถือ edit lock ได้เหมือนคน ดู[คู่มือ Filament](https://hibira.io/th/guides/filament)
- [ตัวแก้ไขข้อความแบบทำงานร่วมกัน](https://hibira.io/th/guides/filament-collab) [กล่องอนุมัติเครื่องมือ AI](https://hibira.io/th/guides/filament-approvals) และ[แชตซัพพอร์ต AI](https://hibira.io/th/guides/filament-support) สร้างบนปลั๊กอินเดียวกัน

![นำเข้า 1,000 แถว: การ์ดเดินหน้าทีละช่วงขณะที่ตารางเติมข้อมูล](https://hibira.io/portal/articles/filament-import-th-light.webp)

## ย้ายมาจาก Reverb หรือ polling

ถ้าแผงใช้ Echo กับ Reverb หรือ Pusher อยู่แล้ว ปลั๊กอินจะแทนที่ค่า `filament.broadcasting.echo` ของแผงที่ติดตั้งอยู่ ส่วนอีเวนต์และกฎของช่องที่คุณเขียนเองยังทำงานเหมือนเดิม ถ้าแผงใช้ polling อยู่ `->databaseNotifications()` จะปิด polling หากต้องการเก็บไว้เป็นสำรองให้ส่ง `polling: '60s'` ดูรายการที่ต้องตรวจได้ใน[หน้าการย้ายระบบ](https://hibira.io/th/migrate)

## เคล็ดลับ

- สร้างแอปแยกต่อสภาพแวดล้อม (local, staging, production) อีเวนต์ทดสอบจะไม่ถึงผู้ใช้จริง
- แผงที่ล็อกอินด้วย guard ของตัวเองต้องลงทะเบียน route ของ broadcasting ด้วย guard นั้น `hibira:filament` จะเตือนเมื่อจำเป็น
- การเปลี่ยนแปลงต่อเนื่องส่งเป็นหนึ่งข้อความต่อคำขอหรือคิวงาน ช่วยให้ใช้งานน้อย ดูสิ่งที่แต่ละแพ็กเกจมีได้ที่[ราคา](https://hibira.io/th/pricing)