官方包 · 框架

实时 WebSocket 的 Nuxt 模块

适用于 Nuxt 4、3 和 2 的模块：组件中自动导入组合式函数，服务端路由中提供服务端客户端和授权路由辅助函数。

@hibira-io/nuxtnpm ↗GitHub ↗

• 组合式函数自动导入；连接只在浏览器中建立。
• 在服务端路由中用 useHibiraServer() 发送事件，并为私有和 presence 频道签名。
• 只有应用 Key 会到达浏览器；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 完全相同。 免费创建账号 →