Gói chính thức · Framework

React hooks cho WebSocket thời gian thực

Hooks cho sự kiện, presence, sự kiện phía client và trạng thái kết nối, cả ứng dụng dùng chung một kết nối. Chạy với Next.js và Remix, và stream đầu ra LLM tới mọi tab đang mở.

@hibira-io/reactnpm ↗GitHub ↗

useEvent, usePresence, useTrigger và useConnectionState, trên React 17, 18 và 19.
An toàn với server rendering và StrictMode: không kết nối trên máy chủ, và mount hai lần không để lại socket thứ hai.
streamToChannel() gửi token từ backend theo lô, và useStream() ghép chúng lại trong trình duyệt.

Đă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

Cài đặt
```
npm install @hibira-io/react pusher-js
```

Thiết lập

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

Sử dụng

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

Trước khi bắt đầu

Với gói Free, hãy thêm mọi origin mà trang của bạn tải từ đó vào Origin được phép của ứng dụng (http://localhost:3000 khi phát triển, sau đó là tên miền của bạn). "*" cần gói trả phí.
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.

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í →

React hooks cho WebSocket thời gian thực

Cài đặt

Thiết lập

Sử dụng

Trước khi bắt đầu