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

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

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

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

## 팀이 얻는 것

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

![편집 잠금: Mei가 글을 편집 중이라 다른 사람은 저장할 수 없고 편집 요청 버튼이 보입니다](https://hibira.io/portal/articles/filament-lock-ko-light.webp)

## 사용하는 기능

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

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

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

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

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

![잠금을 가진 사람이 요청을 받고, 저장한 뒤 넘겨줄 수 있습니다](https://hibira.io/portal/articles/filament-lock-request-ko-light.webp)

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

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

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

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

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

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

![1,000행 가져오기: 청크마다 카드가 진행되고 테이블이 채워집니다](https://hibira.io/portal/articles/filament-import-ko-light.webp)

## Reverb나 폴링에서 옮겨 오기

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

## 팁

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