リアルタイム WebSocket のための React フック

公式パッケージ · フレームワーク

リアルタイム WebSocket のための React フック

イベント、プレゼンス、クライアントイベント、接続状態のためのフック。アプリ全体で 1 本の接続を共有します。Next.js や Remix でも動き、LLM の出力を開いているすべてのタブにストリーミングできます。

@hibira-io/reactnpm ↗GitHub ↗

useEvent、usePresence、useTrigger、useConnectionState。React 17、18、19 に対応。
サーバーレンダリングと StrictMode でも安全です。サーバーでは接続せず、二重マウントでソケットが 2 本残ることもありません。
streamToChannel() がバックエンドからトークンをまとめて送り、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、その後は自分のドメイン）。"*" は有料プランで使えます。
プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。無料でアカウントを作成 →