官方套件 · 框架

React Native 與 Expo 的即時 WebSocket hooks

在 React Native 與 Expo 上使用 React 套件的 hooks：App 進入背景時關閉連線、回到前景再自動連上，任意大小的資料都能送，還能透過 Hibira Push 發送推播通知。

@hibira-io/react-nativenpm ↗GitHub ↗

• 在 React Native 版 pusher-js 上使用 useEvent、usePresence、useTrigger 與 useStream，支援 Expo SDK 50 以上與原生 React Native 0.70 以上。
• App 在背景超過 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} />;
   }

開始之前

• 私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。
• 連到您電腦上的伺服器時，wsHost 要填它的區網位址，不能填 localhost，因為在手機上 localhost 指的是手機本身。

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