官方套件 · 框架

Refine 後台的即時更新

Refine 的 liveProvider：別人修改資料時，列表、紀錄和儀表板會自動更新。支援 Refine 4 和 5、任何 UI 套件和任何 data provider。

@hibira-io/refinenpm ↗GitHub ↗

最快的方式：裝好 Hibira 外掛，貼上一段提示詞

在你的 AI 程式助手裝好外掛，再貼上提示詞。助手會幫你登入、需要時建立免費應用、寫好程式碼並送出測試事件。 GitHub ↗

安裝外掛

claude plugin marketplace add hibira-io/agent-plugin
claude plugin install hibira@hibira

貼上這段提示詞

Add Hibira Refine (@hibira-io/refine) to this project.
Follow https://hibira.io/guides/refine, adapted to how this project is already set up.
If I have no Hibira app yet, create a Free one that allows http://localhost so I can test right away.
Keep the app key and secret in environment variables, add placeholders to .env.example, and never commit real values or send the secret to a browser.
When you are done, send a test event, show me it arriving, and list the files you changed.

想自己動手？ 下方的步驟如下：

安裝
設定
使用

其他 AI 工具與外掛內容 →

設定 liveMode: "auto" 後，useList、useOne、useTable、useForm 和 useShow 會自動重新取得資料。
使用 private 頻道與你自己的授權端點；同一個資源上的 hooks 共用一個訂閱。
publishLiveEvent() 在每次修改後從你的 API 送出事件，並可略過發起修改的那個分頁。

同一個 Refine 訂單頁面開在兩個視窗：在第一個視窗新增、修改和刪除訂單，第二個視窗會即時更新，下方列出收到的即時事件。

登入後，範例程式碼會自動帶入您的叢集主機。登入

安裝

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

設定

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' }}
  />
);

使用

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'] });

開始之前

私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。
Laravel 也能送出相同的事件：在 resources.posts 廣播「refine」事件，內容格式同 Refine 的 LiveEvent。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。免費建立帳號 →