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

Vue composables สำหรับ WebSocket แบบเรียลไทม์

Composables สำหรับอีเวนต์ presence อีเวนต์ฝั่งไคลเอนต์ และสถานะการเชื่อมต่อ บน Vue 3 และ Vue 2.7 ชื่อแชนเนลเป็น ref ได้ และการสมัครรับจะเปลี่ยนตาม

@hibira-io/vuenpm ↗GitHub ↗

• useEvent, usePresence, useTrigger และ useConnectionState โดยทุกคอมโพเนนต์ใช้การเชื่อมต่อร่วมกันเส้นเดียว
• ปลอดภัยกับ server rendering: ไม่มีการเชื่อมต่อบนเซิร์ฟเวอร์
• ใช้ร่วมกับ Laravel Echo ได้: ส่งการเชื่อมต่อของ Echo เป็นไคลเอนต์

ลงชื่อเข้าใช้เพื่อดูโค้ดตัวอย่างเหล่านี้พร้อมโฮสต์คลัสเตอร์ของคุณเอง ลงชื่อเข้าใช้

1. ติดตั้ง

   npm install @hibira-io/vue pusher-js

2. ตั้งค่า

   import { createApp } from 'vue';
   import { createHibira } from '@hibira-io/vue';
   
   createApp(App)
     .use(createHibira({
       appKey: import.meta.env.VITE_HIBIRA_KEY,
       options: {
         wsHost: 'ws.hibira.io',
         channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
       },
     }))
     .mount('#app');

3. ใช้งาน

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

ก่อนเริ่ม

• ในแพ็กเกจ Free ให้ใส่ทุก origin ที่หน้าเว็บโหลดมาใน Origin ที่อนุญาตของแอป (http://localhost:3000 ระหว่างพัฒนา แล้วตามด้วยโดเมนของคุณ) ส่วน "*" ต้องใช้แพ็กเกจแบบชำระเงิน
• แชนเนล private และ presence ต้องมี auth endpoint บนแบ็กเอนด์ที่ลงนามการสมัครรับด้วยซีเคร็ตของแอป เหมือนกับ pusher-js

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