공식 패키지 · 프레임워크

실시간 WebSocket을 위한 Svelte 스토어

Svelte 5와 Svelte 4에서 이벤트, 프레즌스, 클라이언트 이벤트, 연결 상태를 다루는 스토어로, SvelteKit에 맞춰 만들었습니다. 어떤 컴포넌트에서든 $store로 사용합니다.

@hibira-io/sveltenpm ↗GitHub ↗

useEvent, usePresence, useTrigger, useConnectionState는 연결 하나를 공유합니다. 채널 이름에는 스토어나, Svelte 5에서는 $state를 읽는 getter를 쓸 수 있습니다.
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 스토어

설치

설정하기

사용하기

시작하기 전에