Gói chính thức · Tự động hóa và hạ tầng

Tích hợp Vercel cho ứng dụng Next.js thời gian thực

Thêm tích hợp Hibira vào các dự án Vercel và chọn một app (hoặc tạo mới): app ID, key, secret và host của app được thêm vào dự án dưới dạng biến môi trường. Triển khai lại, rồi phát từ route handler và đăng ký bằng pusher-js.

Vercel integrationGitHub ↗Vercel ↗

• Ghi HIBIRA_APP_ID, HIBIRA_APP_KEY, HIBIRA_APP_SECRET, HIBIRA_HOST và HIBIRA_CLUSTER, cùng NEXT_PUBLIC_HIBIRA_APP_KEY và NEXT_PUBLIC_HIBIRA_HOST cho trình duyệt, vào Production, Preview và Development.
• App mới chấp nhận kết nối từ tên miền .vercel.app của mỗi dự án. Thêm tên miền riêng và URL preview trong Allowed origins trên trang của app.
• Nút Deploy with Vercel trong các ví dụ Next.js của chúng tôi cài sẵn tích hợp này, nên bản demo sao chép chạy được mà không cần chép key.

Đăng nhập để xem các đoạn mã này với host cụm của riêng bạn. Đăng nhập

1. Cài đặt

   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. Phát từ 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. Sử dụng

   '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);
   });

Trước khi bắt đầu

• Các biến được ghi khi bạn kết nối. Nếu sau này bạn đổi secret của app, hãy cập nhật HIBIRA_APP_SECRET trong cài đặt dự án rồi triển khai lại.
• Chỉ phát từ mã phía máy chủ (route handler, server action); HIBIRA_APP_SECRET không bao giờ được lọt vào client component.

Dùng app key từ bảng điều khiển; secret chỉ để trên máy chủ của bạn. Kênh, sự kiện và endpoint xác thực hoạt động y như với Pusher. Tạo tài khoản miễn phí →