官方套件 · 框架

即時 WebSocket 的 Angular Signals

把事件、在線成員、用戶端事件與連線狀態都變成 signal，整個應用程式共用一個連線。適用 Angular 17 以上，standalone 或 NgModule 皆可，有沒有 zone.js 都能用。

@hibira-io/angularnpm ↗GitHub ↗

• injectEvent、injectPresence、injectTrigger 與 injectConnectionState；頻道名稱可以是 signal 或元件 input，訂閱會跟著變動。
• 伺服器渲染與預先渲染都安全：伺服器端不會連線，元件銷毀時所有訂閱都會釋放。
• 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 方案需要把頁面載入的每個來源都加進應用程式的「允許的來源」（開發時是 http://localhost:4200，之後是您的網域）。"*" 需要付費方案。
• 私人頻道與 presence 頻道需要後端提供授權端點，用應用程式密鑰簽署訂閱，做法和 pusher-js 相同。

請使用儀表板中的應用程式 Key；Secret 只放在你的伺服器上。頻道、事件與授權端點的用法和 Pusher 完全相同。 免費建立帳號 →