Gói chính thức · Framework

Module Nuxt cho WebSocket thời gian thực

Module cho Nuxt 4, 3 và 2: composables tự động import trong component, cùng client phía máy chủ và hàm hỗ trợ auth route trong server routes.

@hibira-io/nuxtnpm ↗GitHub ↗

• Composables được tự động import; kết nối chỉ mở trong trình duyệt.
• useHibiraServer() trong server routes gửi sự kiện và ký kênh private, presence.
• Chỉ app key tới trình duyệt; ID và secret nằm trong runtime config.

Đă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

   npx nuxi module add @hibira-io/nuxt

2. Thiết lập

   // 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. Sử dụng

   <script setup>
   const orders = ref([]);
   useEvent('orders', 'order.created', (order) => orders.value.unshift(order));
   const { count } = usePresence('presence-dashboard');
   </script>

Trước khi bắt đầu

• Secret của ứng dụng chỉ hiện một lần, khi bạn tạo ứng dụng hoặc xoay vòng secret. Hãy giữ nó trên máy chủ, không bao giờ đưa vào trình duyệt hay bản build game.
• Với gói Free, hãy thêm mọi origin mà trang của bạn tải từ đó vào Origin được phép của ứng dụng (http://localhost:3000 khi phát triển, sau đó là tên miền của bạn). "*" cần gói trả phí.

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í →