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

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

Stores สำหรับอีเวนต์ presence อีเวนต์ฝั่งไคลเอนต์ และสถานะการเชื่อมต่อ บน Svelte 5 และ Svelte 4 ออกแบบมาสำหรับ SvelteKit ใช้ด้วย $store ได้ในทุกคอมโพเนนต์

@hibira-io/sveltenpm ↗GitHub ↗

• useEvent, usePresence, useTrigger และ useConnectionState ใช้การเชื่อมต่อเดียวร่วมกัน ชื่อแชนเนลเป็น store ได้ หรือใน Svelte 5 เป็น getter ที่อ่าน $state ได้
• ปลอดภัยกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ของ SvelteKit: ไม่มีการเชื่อมต่อบนเซิร์ฟเวอร์ และค่าจะมาหลัง hydration
• channelAuth() ทำให้ +server.js เป็น auth endpoint สำหรับแชนเนลแบบ private และ presence และ useStream() แสดงผลลัพธ์ LLM ที่ส่งด้วย streamToChannel()

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

1. ติดตั้ง

   npm install @hibira-io/svelte pusher-js

2. ตั้งค่า

   <!-- src/routes/+layout.svelte -->
   <script>
     import { env } from '$env/dynamic/public';
     import { createHibira, setHibira } from '@hibira-io/svelte';
   
     let { children } = $props();
     setHibira(createHibira({
       appKey: env.PUBLIC_HIBIRA_KEY,
       options: {
         wsHost: 'ws.hibira.io',
         channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
       },
     }));
   </script>
   
   {@render children()}

3. ใช้งาน

   <script>
     import { useEvent, usePresence } from '@hibira-io/svelte';
   
     let orders = $state([]);
     useEvent('orders', 'order.created', (order) => (orders = [order, ...orders]));
     const dashboard = usePresence('presence-dashboard');
   </script>
   
   <p>{$dashboard.count} online, {orders.length} new orders</p>

ก่อนเริ่ม

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

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