官方包 · 自动化与基础设施

为实时 Next.js 应用打造的 Vercel 集成

在 Vercel 项目中添加 Hibira 集成并选择（或创建）一个 app，它的 app ID、密钥、secret 和主机就会作为环境变量加入项目。重新部署后，从 route handler 发布事件，用 pusher-js 订阅。

Vercel integrationGitHub ↗Vercel ↗

• 写入 HIBIRA_APP_ID、HIBIRA_APP_KEY、HIBIRA_APP_SECRET、HIBIRA_HOST、HIBIRA_CLUSTER，以及给浏览器用的 NEXT_PUBLIC_HIBIRA_APP_KEY、NEXT_PUBLIC_HIBIRA_HOST，应用到 Production、Preview 和 Development。
• 新建的 app 会接受各项目 .vercel.app 域名的连接。自定义域名和预览网址请在 app 页面的 Allowed origins 中添加。
• Next.js 示例的 Deploy with Vercel 按钮会一并安装这个集成，复制的 demo 不用手动复制密钥就能运行。

登录后，示例代码会自动填入您的集群主机。 登录

1. 安装

   https://vercel.com/integrations/hibira/new
     → Add Integration → pick a team and its projects
     → sign in to Hibira → pick an app or create one → Connect
   Redeploy the projects so they load the new variables.

2. 从 route handler 发布

   // app/api/orders/route.js
   import Pusher from 'pusher';
   
   const pusher = new Pusher({
     appId: process.env.HIBIRA_APP_ID,
     key: process.env.HIBIRA_APP_KEY,
     secret: process.env.HIBIRA_APP_SECRET,
     host: process.env.HIBIRA_HOST,
     useTLS: true,
   });
   
   export async function POST(req) {
     const order = await req.json();
     await pusher.trigger('orders', 'order.created', order);
     return Response.json({ ok: true });
   }

3. 使用

   'use client';
   import Pusher from 'pusher-js';
   
   const pusher = new Pusher(process.env.NEXT_PUBLIC_HIBIRA_APP_KEY, {
     cluster: 'hkg',
     wsHost: process.env.NEXT_PUBLIC_HIBIRA_HOST,
     forceTLS: true,
     enabledTransports: ['ws', 'wss'],
   });
   
   pusher.subscribe('orders').bind('order.created', (order) => {
     console.log('New order', order);
   });

开始之前

• 变量在连接时写入。之后如果轮换 app 的 secret，请在项目设置中更新 HIBIRA_APP_SECRET 并重新部署。
• 只从服务器代码（route handler、server action）发布；HIBIRA_APP_SECRET 绝不能进入客户端组件。

请使用控制台中应用的 Key；Secret 只放在你的服务器上。频道、事件与授权端点的用法与 Pusher 完全相同。 免费创建账号 →