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

リアルタイム 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() が端末をプッシュ通知に登録します。

サインインすると、コード例にご自身のクラスターホストが入ります。サインイン

インストール

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

設定する

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>
  );
}

使う

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 とまったく同じように動作します。無料でアカウントを作成 →