官方套件 · 框架

即時 WebSocket 的 Nuxt 模組

適用 Nuxt 4、3 與 2 的模組：元件中自動匯入 Composables，伺服器路由中提供伺服器用戶端與授權路由輔助函式。

@hibira-io/nuxtnpm ↗GitHub ↗

• Composables 自動匯入；連線只在瀏覽器建立。
• 在伺服器路由用 useHibiraServer() 發送事件，並簽署私人與 presence 頻道。
• 只有應用程式金鑰會送到瀏覽器；ID 與密鑰留在 runtime config。

登入後，範例程式碼會自動帶入您的叢集主機。 登入

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，之後是您的網域）。"*" 需要付費方案。

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