官方套件 · 框架

即時 WebSocket 的 Vue Composables

Vue 3 與 Vue 2.7 上處理事件、在線狀態、用戶端事件與連線狀態的 Composables。頻道名稱可以是 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，之後是您的網域）。"*" 需要付費方案。
• 私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。 免費建立帳號 →