← 활용 사례

실시간 알림과 편집 잠금이 있는 Filament 패널

명령 하나로: 바로 업데이트되는 알림 벨, 접속자 표시, 편집 잠금, 스스로 새로 고쳐지는 테이블.

Filament 패널은 주문, 티켓, 콘텐츠, 승인 등 팀이 하루를 보내는 곳입니다. 기본적으로 패널은 폴링으로 변경을 알아내기 때문에 알림 벨은 최대 30초 늦고, 테이블은 오래된 상태로 남고, 두 사람이 서로의 작업을 덮어쓸 수도 있습니다. Filament는 원래 Laravel Echo로 Pusher 호환 서비스에 연결할 수 있고, 저희 hibira-io/filament 플러그인은 명령 하나로 이를 켜 줍니다. Filament 3, 4, 5를 지원하며 WebSocket 서버를 운영하거나 npm으로 빌드할 필요가 없습니다.

팀이 얻는 것

• 알림이 데이터베이스에 저장되는 순간 벨이 업데이트됩니다. 앱이 이미 보내는 모든 알림에 적용됩니다.
• 같은 페이지를 보고 있는 사람들의 아바타, 그리고 한 레코드를 한 번에 한 사람만 편집하게 하는 편집 잠금.
• 패널, 큐 작업, API 어디에서 변경되든 테이블, 관계 테이블, 레코드 페이지가 스스로 업데이트됩니다.
• 가져오기·내보내기 진행률 표시줄과 팀 채팅 페이지.

사용하는 기능

• hibira-io/laravel의 hibira 연결을 쓰는 Laravel Broadcasting.
• 플러그인이 Hibira로 향하게 하는 Filament 내장 Laravel Echo.
• 알림, 테이블, 레코드에는 비공개 채널, 접속자 표시와 편집 잠금에는 프레즌스 채널.
• 잠금을 넘기기 전에 누가 아직 레코드에 있는지 서버가 확인하는 Channels HTTP API.

1단계: 명령 하나로 설치

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

이 명령은 .env에 설정을 추가하고 앱 ID, 키, 시크릿을 물어본 뒤, 브로드캐스트 인증 라우트를 켜고, 알림 테이블을 만들고, 패널 프로바이더에 플러그인을 추가합니다. 마지막으로 연결과 각 패널을 확인합니다. 언제든 다시 실행해도 빠진 것만 추가합니다. 브라우저가 연결할 수 있도록 앱 페이지의 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가 이미 켰습니다. 편집 잠금은 편집 페이지에 트레이트 하나를 추가하면 됩니다:

class EditPost extends EditRecord
{
    use InteractsWithHibiraLock;

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

레코드를 처음 연 사람이 잠금을 갖고, 다른 사람은 보면서 요청할 수 있습니다. 잠금을 가진 사람이 나가면 하트비트 폴링 없이 몇 초 안에 다음 사람이 잠금을 받습니다.

4단계: 실시간 테이블과 레코드 페이지

liveTables()와 liveRecords()를 켜면 테이블과 레코드 페이지가 그것을 연 모든 사람에게 업데이트됩니다. 1,000행 가져오기처럼 연이은 변경도 행마다가 아니라 요청이나 큐 작업마다 한 번만 보냅니다. 편집 페이지는 누가 레코드를 바꿨는지 알려 주고 바뀐 필드만 불러오므로, 저장하지 않은 편집은 그대로 남습니다.

모델 이벤트가 발생하지 않는 쿼리 빌더 대량 업데이트 뒤에는 직접 테이블을 표시하세요:

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

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

5단계: 패널을 위한 더 많은 기능

• ->importProgress()는 각 가져오기와 내보내기의 진행 상황을 청크마다 보여 줍니다.
• ->chat()은 패널 사용자를 위한 채팅 페이지를 추가합니다.
• AI 에이전트도 접속자 목록에 나타나고 사람처럼 편집 잠금을 가질 수 있습니다. Filament 가이드를 참고하세요.
• 공동 편집 리치 텍스트 에디터, AI 도구 승인 받은편지함, AI 실시간 채팅 지원도 같은 플러그인 위에 만들어졌습니다.

Reverb나 폴링에서 옮겨 오기

패널이 이미 Reverb나 Pusher와 함께 Echo를 쓰고 있다면, 플러그인은 자신이 들어 있는 패널의 filament.broadcasting.echo 설정을 바꾸고, 직접 만든 이벤트와 채널 규칙은 그대로 동작합니다. 지금 패널이 폴링한다면 ->databaseNotifications()가 폴링을 끕니다. 예비로 남기려면 polling: '60s'를 넘기세요. 확인할 항목은 마이그레이션 페이지에 있습니다.

팁

• 환경(로컬, 스테이징, 프로덕션)마다 앱을 하나씩 만들면 테스트 이벤트가 실제 사용자에게 가지 않습니다.
• 자체 가드로 로그인하는 패널은 그 가드로 브로드캐스트 라우트를 등록해야 합니다. 필요하면 hibira:filament가 알려 줍니다.
• 연이은 변경은 요청이나 큐 작업마다 메시지 하나로 보내 사용량을 낮게 유지합니다. 각 플랜 내용은 요금을 참고하세요.