공식 패키지 · 프레임워크

실시간 WebSocket을 위한 Vue 컴포저블

Vue 3와 Vue 2.7에서 쓰는 이벤트, 프레즌스, 클라이언트 이벤트, 연결 상태 컴포저블입니다. 채널 이름에 ref를 쓰면 구독이 그 값을 따라갑니다.

@hibira-io/vuenpm ↗GitHub ↗

• useEvent, usePresence, useTrigger, useConnectionState. 모든 컴포넌트가 연결 하나를 공유합니다.
• 서버 렌더링에서도 안전합니다. 서버에서는 연결하지 않습니다.
• Laravel Echo와 함께 쓸 수 있습니다. Echo의 연결을 클라이언트로 넘기면 됩니다.

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

1. 설치

   npm install @hibira-io/vue pusher-js

2. 설정하기

   import { createApp } from 'vue';
   import { createHibira } from '@hibira-io/vue';
   
   createApp(App)
     .use(createHibira({
       appKey: import.meta.env.VITE_HIBIRA_KEY,
       options: {
         wsHost: 'ws.hibira.io',
         channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
       },
     }))
     .mount('#app');

3. 사용하기

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

시작하기 전에

• Free 요금제에서는 페이지를 불러오는 모든 오리진을 앱의 허용 오리진에 등록하세요(개발 중에는 http://localhost:3000, 이후에는 내 도메인). "*"는 유료 요금제에서 쓸 수 있습니다.
• 프라이빗 채널과 프레즌스 채널에는 pusher-js와 마찬가지로, 앱 시크릿으로 구독에 서명하는 인증 엔드포인트가 백엔드에 필요합니다.

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