แพ็กเกจอย่างเป็นทางการ · เฟรมเวิร์ก

โมดูล Nuxt สำหรับ WebSocket แบบเรียลไทม์

โมดูลสำหรับ Nuxt 4, 3 และ 2: composables ที่ import ให้อัตโนมัติในคอมโพเนนต์ และไคลเอนต์ฝั่งเซิร์ฟเวอร์พร้อมตัวช่วย auth route ใน server routes

@hibira-io/nuxtnpm ↗GitHub ↗

• Composables ถูก import อัตโนมัติ และการเชื่อมต่อเปิดในเบราว์เซอร์เท่านั้น
• useHibiraServer() ใน server routes ใช้ส่งอีเวนต์และลงนามแชนเนล private และ 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 ให้ใส่ทุก origin ที่หน้าเว็บโหลดมาใน Origin ที่อนุญาตของแอป (http://localhost:3000 ระหว่างพัฒนา แล้วตามด้วยโดเมนของคุณ) ส่วน "*" ต้องใช้แพ็กเกจแบบชำระเงิน

ใช้ app key จากแดชบอร์ดของคุณ ส่วน secret ให้เก็บไว้บนเซิร์ฟเวอร์เท่านั้น ช่อง อีเวนต์ และ endpoint การยืนยันสิทธิ์ทำงานเหมือนกับที่ใช้กับ Pusher ทุกประการ สร้างบัญชีฟรีของคุณ →