官方套件 · 框架

即時 WebSocket 的 Svelte Store

適用於 Svelte 5 與 Svelte 4 的事件、在線狀態、用戶端事件與連線狀態 Store，為 SvelteKit 打造。在任何元件裡用 $store 即可。

@hibira-io/sveltenpm ↗GitHub ↗

useEvent、usePresence、useTrigger 與 useConnectionState 共用一個連線；頻道名稱可以是 Store，在 Svelte 5 中也可以是讀取 $state 的 getter。
適用 SvelteKit 伺服器渲染：伺服器端不會連線，資料在 hydration 之後才到達。
channelAuth() 讓 +server.js 直接成為私人與在線狀態頻道的授權端點，useStream() 顯示用 streamToChannel() 傳送的 LLM 輸出。

登入後，範例程式碼會自動帶入您的叢集主機。登入

安裝
```
npm install @hibira-io/svelte pusher-js
```

設定

<!-- 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()}

使用

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

開始之前

Free 方案需要把頁面載入的每個來源都加進應用程式的「允許的來源」（開發時是 http://localhost:3000，之後是您的網域）。"*" 需要付費方案。
私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。免費建立帳號 →

即時 WebSocket 的 Svelte Store

安裝

設定

使用

開始之前