공식 패키지 · 프레임워크

실시간 WebSocket을 위한 Angular 시그널

이벤트, 프레즌스 멤버, 클라이언트 이벤트, 연결 상태를 시그널로 다루며, 앱 전체가 연결 하나를 공유합니다. Angular 17 이상, standalone이든 NgModule이든, zone.js 유무와 관계없이 쓸 수 있습니다.

@hibira-io/angularnpm ↗GitHub ↗

• injectEvent, injectPresence, injectTrigger, injectConnectionState. 채널 이름으로 시그널이나 컴포넌트 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, 이후에는 내 도메인). "*"는 유료 요금제에서 쓸 수 있습니다.
• 프라이빗 채널과 프레즌스 채널에는 pusher-js와 마찬가지로, 앱 시크릿으로 구독에 서명하는 인증 엔드포인트가 백엔드에 필요합니다.

대시보드의 앱 키를 사용하세요. 시크릿은 서버에만 둡니다. 채널, 이벤트, 인가 엔드포인트는 Pusher와 똑같이 동작합니다. 무료 계정 만들기 →