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

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

อีเวนต์ สมาชิก presence อีเวนต์ฝั่งไคลเอนต์ และสถานะการเชื่อมต่อในรูปแบบ signal โดยทั้งแอปใช้การเชื่อมต่อเดียว สำหรับ Angular 17 ขึ้นไป ใช้ได้ทั้ง standalone และ NgModule มีหรือไม่มี zone.js ก็ได้

@hibira-io/angularnpm ↗GitHub ↗

• injectEvent, injectPresence, injectTrigger และ injectConnectionState ชื่อแชนเนลเป็น signal หรือ input ของคอมโพเนนต์ได้ และการสมัครรับจะเปลี่ยนตาม
• ปลอดภัยกับการเรนเดอร์ฝั่งเซิร์ฟเวอร์และ prerender ฝั่งเซิร์ฟเวอร์จะไม่เชื่อมต่อ และทุกอย่างจะถูกปล่อยเมื่อคอมโพเนนต์ถูกทำลาย
• streamToChannel() ส่งผลลัพธ์จาก LLM จากแบ็กเอนด์ และ injectStream() แสดงผลในทุกแท็บที่เปิดอยู่ทันทีที่ถูกเขียน

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

1. ติดตั้ง

   npm install @hibira-io/angular pusher-js

2. ตั้งค่า

   // app.config.ts
   import { ApplicationConfig } from '@angular/core';
   import { provideHibira } from '@hibira-io/angular';
   import { environment } from '../environments/environment';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideHibira({
         appKey: environment.hibiraKey,
         options: {
           wsHost: 'ws.hibira.io',
           channelAuthorization: { endpoint: '/api/hibira/auth', transport: 'ajax' },
         },
       }),
     ],
   };

3. ใช้งาน

   import { Component, signal } from '@angular/core';
   import { injectEvent, injectPresence } from '@hibira-io/angular';
   
   @Component({
     selector: 'app-dashboard',
     template: `<p>{{ dashboard.count() }} online, {{ orders().length }} new orders</p>`,
   })
   export class Dashboard {
     orders = signal<Order[]>([]);
     dashboard = injectPresence('presence-dashboard');
   
     constructor() {
       injectEvent<Order>('orders', 'order.created', (order) => this.orders.update((list) => [order, ...list]));
     }
   }

ก่อนเริ่ม

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

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