Gói chính thức · Framework

Hook React Native và Expo cho WebSocket thời gian thực

Các hook của gói React trên React Native và Expo: đóng kết nối khi ứng dụng chạy nền và mở lại khi quay về, gửi dữ liệu mọi kích thước, và gửi thông báo đẩy qua Hibira Push.

@hibira-io/react-nativenpm ↗GitHub ↗

  • useEvent, usePresence, useTrigger và useStream trên bản React Native của pusher-js, cho Expo SDK 50 trở lên và React Native thuần 0.70 trở lên.
  • Sau 30 giây chạy nền, kết nối sẽ đóng, nên điện thoại trong túi không chiếm một kết nối của gói.
  • triggerChunked() và useChunkedEvent() chia nhỏ rồi ghép lại dữ liệu lớn hơn giới hạn 4 KB của gói Free, và useHibiraPush() đăng ký thiết bị nhận thông báo đẩy.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

  1. Cài đặt

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

  2. Thiết lập

    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. Sử dụng

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

Trước khi bắt đầu

  • Kênh private và presence cần một auth endpoint trên backend ký các lượt đăng ký bằng secret của ứng dụng, giống như với pusher-js.
  • Khi kết nối tới máy chủ trên máy tính của bạn, đặt wsHost là địa chỉ LAN, không phải localhost, vì trên điện thoại localhost chính là điện thoại.

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →