官方包 · 框架

实时 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 完全相同。免费创建账号 →