公式パッケージ · フレームワーク

リアルタイム WebSocket のための Angular シグナル

イベント、プレゼンスのメンバー、クライアントイベント、接続状態をシグナルとして扱え、接続はアプリ全体で 1 本です。Angular 17 以降、standalone でも NgModule でも、zone.js の有無を問わず使えます。

@hibira-io/angularnpm ↗GitHub ↗

injectEvent、injectPresence、injectTrigger、injectConnectionState。チャンネル名にはシグナルやコンポーネントの input を渡せ、購読がその値に追従します。
サーバーレンダリングとプリレンダリングでも安全です。サーバーでは接続せず、コンポーネントが破棄されるとすべて解放されます。
streamToChannel() がバックエンドから LLM の出力を送り、injectStream() が開いているすべてのタブに書かれていくそばから表示します。

サインインすると、コード例にご自身のクラスターホストが入ります。サインイン

インストール

npm install @hibira-io/angular pusher-js

設定する

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

使う

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、その後は自分のドメイン）。"*" は有料プランで使えます。
プライベートチャンネルとプレゼンスチャンネルには、pusher-js と同じく、アプリのシークレットで購読に署名する認可エンドポイントがバックエンドに必要です。

ダッシュボードのアプリキーを使ってください。シークレットはサーバー側だけに置きます。チャンネル、イベント、認可エンドポイントは Pusher とまったく同じように動作します。無料でアカウントを作成 →