แพ็กเกจอย่างเป็นทางการ · เฟรมเวิร์ก

React Native และ Expo hooks สำหรับ WebSocket แบบเรียลไทม์

hooks ของแพ็กเกจ React บน React Native และ Expo ปิดการเชื่อมต่อเมื่อแอปอยู่เบื้องหลังและเปิดใหม่เมื่อกลับมา ส่งข้อมูลได้ทุกขนาด และส่ง push notification ผ่าน Hibira Push

@hibira-io/react-nativenpm ↗GitHub ↗

• useEvent, usePresence, useTrigger และ useStream บน pusher-js รุ่น React Native รองรับ Expo SDK 50 ขึ้นไปและ React Native 0.70 ขึ้นไป
• เมื่ออยู่เบื้องหลังเกิน 30 วินาที การเชื่อมต่อจะปิด โทรศัพท์ในกระเป๋าจึงไม่กินโควตาการเชื่อมต่อของแพ็กเกจ
• triggerChunked() และ useChunkedEvent() แบ่งและรวมข้อมูลที่เกินขีดจำกัด 4 KB ของแพ็กเกจ Free และ useHibiraPush() ลงทะเบียนอุปกรณ์สำหรับ push notification

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้

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

ก่อนเริ่ม

• แชนเนล private และ presence ต้องมี auth endpoint บนแบ็กเอนด์ที่ลงนามการสมัครรับด้วยซีเคร็ตของแอป เหมือนกับ pusher-js
• หากเชื่อมต่อเซิร์ฟเวอร์บนคอมพิวเตอร์ของคุณ ให้ตั้ง wsHost เป็นที่อยู่ LAN ไม่ใช่ localhost เพราะบนโทรศัพท์ localhost คือตัวโทรศัพท์เอง

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →