공식 패키지 · 프레임워크

실시간 WebSocket을 위한 React Native·Expo 훅

React 패키지의 훅을 React Native와 Expo에서 사용합니다. 백그라운드에서는 연결을 닫고 앱으로 돌아오면 다시 열며, 크기에 상관없이 데이터를 보내고 Hibira Push로 푸시 알림도 보낼 수 있습니다.

@hibira-io/react-nativenpm ↗GitHub ↗

• React Native용 pusher-js 위에서 useEvent, usePresence, useTrigger, useStream을 사용합니다. Expo SDK 50 이상과 순수 React Native 0.70 이상을 지원합니다.
• 백그라운드에서 30초가 지나면 연결을 닫으므로, 주머니 속 휴대폰이 플랜의 연결 수를 계속 차지하지 않습니다.
• triggerChunked()와 useChunkedEvent()는 Free 플랜의 4 KB 한도를 넘는 데이터를 나눴다가 다시 합치고, useHibiraPush()는 기기를 푸시 알림에 등록합니다.

로그인하면 예제 코드에 내 클러스터 호스트가 채워집니다. 로그인

1. 설치

   npx expo install @hibira-io/react-native pusher-js @react-native-community/netinfo

2. 설정하기

   import { HibiraProvider } from '@hibira-io/react-native';
   
   export default function App() {
     return (
       <HibiraProvider
         appKey={process.env.EXPO_PUBLIC_HIBIRA_KEY}
         options={{
           wsHost: 'ws.hibira.io',
           channelAuthorization: { endpoint: 'https://api.example.com/hibira/auth', transport: 'ajax' },
         }}
       >
         <Home />
       </HibiraProvider>
     );
   }

3. 사용하기

   import { useEvent, usePresence } from '@hibira-io/react-native';
   
   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} />;
   }

시작하기 전에

• 프라이빗 채널과 프레즌스 채널에는 pusher-js와 마찬가지로, 앱 시크릿으로 구독에 서명하는 인증 엔드포인트가 백엔드에 필요합니다.
• 내 컴퓨터의 서버에 연결할 때는 wsHost에 LAN 주소를 넣으세요. 휴대폰에서 localhost는 휴대폰 자신을 가리킵니다.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →