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

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

Hooks สำหรับอีเวนต์ presence อีเวนต์ฝั่งไคลเอนต์ และสถานะการเชื่อมต่อ โดยทั้งแอปใช้การเชื่อมต่อร่วมกันเพียงเส้นเดียว ใช้ได้กับ Next.js และ Remix และสตรีมผลลัพธ์จาก LLM ไปยังทุกแท็บที่เปิดอยู่

@hibira-io/reactnpm ↗GitHub ↗

• useEvent, usePresence, useTrigger และ useConnectionState บน React 17, 18 และ 19
• ปลอดภัยกับ server rendering และ StrictMode: ไม่มีการเชื่อมต่อบนเซิร์ฟเวอร์ และการ mount ซ้ำจะไม่ทิ้งซ็อกเก็ตเส้นที่สองไว้
• streamToChannel() ส่งโทเค็นจากแบ็กเอนด์เป็นชุด และ useStream() ประกอบกลับเป็นข้อความในเบราว์เซอร์

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

1. ติดตั้ง

   npm install @hibira-io/react pusher-js

2. ตั้งค่า

   import { HibiraProvider } from '@hibira-io/react';
   
   export function App() {
     return (
       <HibiraProvider
         appKey={import.meta.env.VITE_HIBIRA_KEY}
         options={{
           wsHost: 'ws.hibira.io',
           channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
         }}
       >
         <Dashboard />
       </HibiraProvider>
     );
   }

3. ใช้งาน

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

ก่อนเริ่ม

• ในแพ็กเกจ Free ให้ใส่ทุก origin ที่หน้าเว็บโหลดมาใน Origin ที่อนุญาตของแอป (http://localhost:3000 ระหว่างพัฒนา แล้วตามด้วยโดเมนของคุณ) ส่วน "*" ต้องใช้แพ็กเกจแบบชำระเงิน
• แชนเนล private และ presence ต้องมี auth endpoint บนแบ็กเอนด์ที่ลงนามการสมัครรับด้วยซีเคร็ตของแอป เหมือนกับ pusher-js

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