公式パッケージ · フレームワーク

リアルタイム WebSocket のための Svelte ストア

Svelte 5 と Svelte 4 で使える、イベント、プレゼンス、クライアントイベント、接続状態のストア。SvelteKit 向けで、どのコンポーネントでも $store で使えます。

@hibira-io/sveltenpm ↗GitHub ↗

useEvent、usePresence、useTrigger、useConnectionState は一つの接続を共有します。チャンネル名にはストアや、Svelte 5 では $state を読むゲッターも使えます。
SvelteKit のサーバーレンダリングでも安全です。サーバーでは接続せず、値はハイドレーションの後に届きます。
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、その後は自分のドメイン）。"*" は有料プランで使えます。
プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。無料でアカウントを作成 →

リアルタイム WebSocket のための Svelte ストア

インストール

設定する

使う

始める前に