공식 패키지 · 프레임워크

실시간 WebSocket을 위한 Nuxt 모듈

Nuxt 4, 3, 2용 모듈입니다. 컴포넌트에서는 컴포저블이 자동으로 import되고, 서버 라우트에서는 서버 클라이언트와 인증 라우트 헬퍼를 쓸 수 있습니다.

@hibira-io/nuxtnpm ↗GitHub ↗

• 컴포저블은 자동 import되며, 연결은 브라우저에서만 열립니다.
• 서버 라우트의 useHibiraServer()로 이벤트를 보내고 프라이빗·프레즌스 채널에 서명합니다.
• 브라우저에는 앱 키만 전달되고, ID와 시크릿은 런타임 설정에 남습니다.

로그인하면 예제 코드에 내 클러스터 호스트가 채워집니다. 로그인

1. 설치

   npx nuxi module add @hibira-io/nuxt

2. 설정하기

   // nuxt.config.ts
   export default defineNuxtConfig({
     modules: ['@hibira-io/nuxt'],
     hibira: {
       host: 'ws.hibira.io',
       authEndpoint: '/api/hibira/auth',
     },
   });
   
   // .env
   // NUXT_PUBLIC_HIBIRA_KEY=YOUR_APP_KEY
   // NUXT_HIBIRA_APP_ID=YOUR_APP_ID
   // NUXT_HIBIRA_SECRET=YOUR_APP_SECRET

3. 사용하기

   <script setup>
   const orders = ref([]);
   useEvent('orders', 'order.created', (order) => orders.value.unshift(order));
   const { count } = usePresence('presence-dashboard');
   </script>

시작하기 전에

• 앱 시크릿은 앱을 만들거나 시크릿을 교체할 때 한 번만 표시됩니다. 서버에만 두고, 브라우저나 게임 빌드에는 절대 넣지 마세요.
• Free 요금제에서는 페이지를 불러오는 모든 오리진을 앱의 허용 오리진에 등록하세요(개발 중에는 http://localhost:3000, 이후에는 내 도메인). "*"는 유료 요금제에서 쓸 수 있습니다.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →