官方包 · 框架

实时 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 完全相同。 免费创建账号 →