Gói chính thức · Framework

Angular signals cho WebSocket thời gian thực

Sự kiện, thành viên presence, sự kiện phía client và trạng thái kết nối dưới dạng signal, cả ứng dụng dùng chung một kết nối. Dành cho Angular 17 trở lên, standalone hay NgModule, có hay không có zone.js đều được.

@hibira-io/angularnpm ↗GitHub ↗

• injectEvent, injectPresence, injectTrigger và injectConnectionState; tên kênh có thể là signal hoặc input của component, và việc đăng ký sẽ thay đổi theo.
• An toàn với render phía máy chủ và prerender: không kết nối trên máy chủ, và mọi thứ được giải phóng khi component bị hủy.
• streamToChannel() gửi đầu ra LLM từ backend, và injectStream() hiển thị nó trên mọi tab đang mở ngay khi được viết ra.

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

   npm install @hibira-io/angular pusher-js

2. Thiết lập

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

   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]));
     }
   }

Trước khi bắt đầu

• 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:4200 khi phát triển, sau đó là tên miền của bạn). "*" cần gói trả phí.
• Kênh private và presence cần một auth endpoint trên backend ký các lượt đăng ký bằng secret của ứng dụng, giống như với pusher-js.

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