# Refine 관리자 화면 실시간 업데이트

> Refine용 liveProvider: 누군가 데이터를 바꾸면 목록, 상세, 대시보드가 저절로 갱신됩니다. Refine 4와 5, 모든 UI 키트와 데이터 프로바이더에서 동작합니다.

Source: https://hibira.io/ko/guides/refine

Refine용 liveProvider: 누군가 데이터를 바꾸면 목록, 상세, 대시보드가 저절로 갱신됩니다. Refine 4와 5, 모든 UI 키트와 데이터 프로바이더에서 동작합니다.

Package: @hibira-io/refine

- liveMode: "auto"이면 useList, useOne, useTable, useForm, useShow가 알아서 다시 불러옵니다.
- 자체 인증 엔드포인트를 쓰는 private 채널, 같은 리소스의 훅은 구독 하나를 공유합니다.
- publishLiveEvent()는 변경할 때마다 API에서 이벤트를 보내고, 변경한 탭은 제외할 수 있습니다.

## 1. 설치

```shell
npm install @hibira-io/refine pusher-js
# on your backend
npm install pusher
```

## 2. 설정하기

```tsx
import { Refine } from '@refinedev/core';
import Pusher from 'pusher-js';
import { liveProvider } from '@hibira-io/refine';

const pusher = new Pusher(import.meta.env.VITE_HIBIRA_KEY, {
  cluster: 'hkg',
  wsHost: 'ws.hibira.io',
  channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
});

export const App = () => (
  <Refine
    dataProvider={dataProvider}
    liveProvider={liveProvider(pusher, { channelPrefix: 'private-', publish: false })}
    options={{ liveMode: 'auto' }}
  />
);
```

## 3. 사용하기

```ts
import Pusher from 'pusher';
import { publishLiveEvent } from '@hibira-io/refine/server';

const pusher = new Pusher({
  appId: process.env.HIBIRA_APP_ID!,
  key: process.env.HIBIRA_KEY!,
  secret: process.env.HIBIRA_SECRET!,
  host: 'ws.hibira.io',
  useTLS: true,
});

// after updating post 42
await publishLiveEvent(pusher, { resource: 'posts', type: 'updated', ids: [42] }, { channelPrefix: 'private-', socketId: req.headers['x-socket-id'] });
```

## 시작하기 전에

- 프라이빗 채널과 프레즌스 채널에는 pusher-js와 마찬가지로, 앱 시크릿으로 구독에 서명하는 인증 엔드포인트가 백엔드에 필요합니다.
- Laravel에서도 같은 이벤트를 보낼 수 있습니다. resources.posts에 "refine"을 Refine LiveEvent와 같은 형태의 본문으로 브로드캐스트하세요.

- [npm](https://www.npmjs.com/package/@hibira-io/refine)
- [GitHub](https://github.com/hibira-io/refine)