# อัปเดตสดสำหรับหน้าแอดมิน Refine

> liveProvider สำหรับ Refine: รายการ ข้อมูล และแดชบอร์ดอัปเดตเองเมื่อมีคนอื่นเปลี่ยนข้อมูล ใช้ได้กับ Refine 4 และ 5 ทุก UI kit และทุก data provider

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

liveProvider สำหรับ Refine: รายการ ข้อมูล และแดชบอร์ดอัปเดตเองเมื่อมีคนอื่นเปลี่ยนข้อมูล ใช้ได้กับ Refine 4 และ 5 ทุก UI kit และทุก data provider

Package: @hibira-io/refine

- เมื่อตั้ง liveMode: "auto" แล้ว useList, useOne, useTable, useForm และ useShow จะดึงข้อมูลใหม่เอง
- ช่อง private พร้อม endpoint ยืนยันสิทธิ์ของคุณเอง และ hooks บนทรัพยากรเดียวกันใช้การสมัครรับร่วมกัน
- 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'] });
```

## ก่อนเริ่ม

- แชนเนล private และ presence ต้องมี auth endpoint บนแบ็กเอนด์ที่ลงนามการสมัครรับด้วยซีเคร็ตของแอป เหมือนกับ pusher-js
- Laravel ส่งอีเวนต์เดียวกันได้: broadcast "refine" บน resources.posts ด้วยเนื้อหารูปแบบเดียวกับ LiveEvent ของ Refine

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