실시간 WebSocket을 위한 React 훅

공식 패키지 · 프레임워크

실시간 WebSocket을 위한 React 훅

이벤트, 프레즌스, 클라이언트 이벤트, 연결 상태를 위한 훅으로, 앱 전체가 연결 하나를 공유합니다. Next.js와 Remix에서도 동작하며, LLM 출력을 열려 있는 모든 탭으로 스트리밍합니다.

@hibira-io/reactnpm ↗GitHub ↗

useEvent, usePresence, useTrigger, useConnectionState. React 17, 18, 19를 지원합니다.
서버 렌더링과 StrictMode에서도 안전합니다. 서버에서는 연결하지 않고, 이중 마운트로 소켓이 두 개 남지도 않습니다.
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와 똑같이 동작합니다. 무료 계정 만들기 →