官方包 · 框架

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

安装

配置

使用

开始之前