Gói chính thức · Framework

Svelte stores cho WebSocket thời gian thực

Stores cho sự kiện, presence, sự kiện phía client và trạng thái kết nối trên Svelte 5 và Svelte 4, làm cho SvelteKit. Dùng với $store trong bất kỳ component nào.

@hibira-io/sveltenpm ↗GitHub ↗

useEvent, usePresence, useTrigger và useConnectionState dùng chung một kết nối; tên kênh có thể là store hoặc, trong Svelte 5, getter đọc $state.
An toàn với render phía server của SvelteKit: không kết nối trên server, và giá trị đến sau khi hydration.
channelAuth() biến một +server.js thành endpoint xác thực cho kênh private và presence, và useStream() hiển thị đầu ra LLM gửi bằng streamToChannel().

Đă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/svelte pusher-js
```

Thiết lập

<!-- src/routes/+layout.svelte -->
<script>
  import { env } from '$env/dynamic/public';
  import { createHibira, setHibira } from '@hibira-io/svelte';

  let { children } = $props();
  setHibira(createHibira({
    appKey: env.PUBLIC_HIBIRA_KEY,
    options: {
      wsHost: 'ws.hibira.io',
      channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
    },
  }));
</script>

{@render children()}

Sử dụng

<script>
  import { useEvent, usePresence } from '@hibira-io/svelte';

  let orders = $state([]);
  useEvent('orders', 'order.created', (order) => (orders = [order, ...orders]));
  const dashboard = usePresence('presence-dashboard');
</script>

<p>{$dashboard.count} online, {orders.length} new orders</p>

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

Svelte stores cho WebSocket thời gian thực

Cài đặt

Thiết lập

Sử dụng

Trước khi bắt đầu