← กรณีการใช้งาน

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

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

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

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

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

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

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

ขั้นที่ 1: ติดตั้งด้วยคำสั่งเดียว

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

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

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

class EditPost extends EditRecord
{
    use InteractsWithHibiraLock;

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

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

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

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

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

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

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

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

• ->importProgress() แสดงความคืบหน้าของการนำเข้าและส่งออกทีละช่วง
• ->chat() เพิ่มหน้าแชตสำหรับผู้ใช้แผง
• AI agent ก็ปรากฏในรายชื่อคนที่อยู่ในหน้าและถือ edit lock ได้เหมือนคน ดูคู่มือ Filament
• ตัวแก้ไขข้อความแบบทำงานร่วมกัน กล่องอนุมัติเครื่องมือ AI และแชตซัพพอร์ต AI สร้างบนปลั๊กอินเดียวกัน

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

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

เคล็ดลับ

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