即時 WebSocket 的 React Hooks

官方套件 · 框架

即時 WebSocket 的 React Hooks

處理事件、在線狀態、用戶端事件與連線狀態的 Hooks，整個應用程式共用一條連線。支援 Next.js 與 Remix，還能把 LLM 輸出串流到每個開著的分頁。

@hibira-io/reactnpm ↗GitHub ↗

useEvent、usePresence、useTrigger 與 useConnectionState，支援 React 17、18 與 19。
伺服器渲染與 StrictMode 都安全：伺服器端不會連線，重複掛載也不會多留一條連線。
streamToChannel() 從後端分批送出 token，useStream() 在瀏覽器把它們組回完整內容。

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

安裝
```
npm install @hibira-io/react pusher-js
```

設定

import { HibiraProvider } from '@hibira-io/react';

export function App() {
  return (
    <HibiraProvider
      appKey={import.meta.env.VITE_HIBIRA_KEY}
      options={{
        wsHost: 'ws.hibira.io',
        channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
      }}
    >
      <Dashboard />
    </HibiraProvider>
  );
}

使用

import { useEvent, usePresence } from '@hibira-io/react';

function Orders() {
  const [orders, setOrders] = useState([]);
  useEvent('orders', 'order.created', (order) => setOrders((list) => [order, ...list]));
  const { count } = usePresence('presence-dashboard');
  return <OrderList orders={orders} watching={count} />;
}

開始之前

Free 方案需要把頁面載入的每個來源都加進應用程式的「允許的來源」（開發時是 http://localhost:3000，之後是您的網域）。"*" 需要付費方案。
私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。

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