Ngx-pusher NPM

ngx-pusher

Lightweight Angular library for integrating Pusher into Angular applications.

About

A lightweight Angular library for adding PusherJs API to your Angular 13+ app. It allows you to seamlessly subscribe to Pusher channels and operate on Observable event streams.

Installation

npm install --save ngx-pusher

If you are using yarn

yarn add ngx-pusher

Getting Started

Create custom authorizer OPTIONAL Your authorizer class must implement the NgxPusherAuthorizer interface.

export class CustomPusherAuthorizer implements NgxPusherAuthorizer {
  constructor(private http: HttpClient) {}

  authorize(channelName: string, socketId: string): Observable<NgxPusherAuth> {
    return this.http.post<NgxPusherAuth>('/auth/pusher', {
      socketId,
      channelName,
    });
  }
}

Add NgxPusherModule to your root module

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,

    /* import ngx-pusher */
    
    NgxPusherModule.forRoot({
      appKey: environment.pusherAppKey,
      pusherOptions: {
        cluster: environment.pusherCluster,
      },
      
      /* register custom authorizer (optional) */
      
      authorizer: {
        deps: [HttpClient],
        useFactory: (http: HttpClient) => new CustomPusherAuthorizer(http),
        // useClass: CustomPusherAuthorizer,
        // useExisting: CustomPusherAuthorizer
      },
    }),
    
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Default Channel OPTIONAL You can set up a default (private/presence) channel for the logged-in user.

@Injectable()
export class AuthService {
  constructor(private pusherService: NgxPuserServicee) {}

  userLoggedIn(user: IUser) {
    this.pusherService.subscribe(`private-${user.username}`);
  }
}

Subscribe to incoming events

@Injectable()
export class MyMessageHandlerService {
  constructor(pusherService: NgxPuserServicee) {
    // Default channel
    pusherService
      .listen<ChatMessage>('ev:message')
      .subscribe((msg: ChatMessage) => {
        console.log('Message Received', msg.content);
      });
    
    // Custom channel
    pusherService
      .listen<any>('file-processed', 'custom-channel')
      .subscribe((msg: any) => console.log(msg));
  }
}

export interface ChatMessage {
  sender: string;
  content: string;
}

PusherJs instance

You can use the pusherInstance() method to get the underlying pusher instance:

import { NgxPusherService } from "./ngx-pusher.service";

@Injectable()
export class MyMessageHandlerService {
  constructor(pusherService: NgxPusherServicer) {
    // Get pusher instance
    const pusher = pusherService.pusherInstance();
  }
}

Subscribe to multiple events

You can subscribe to more than one event on the same channel by passing in an array of event names.

pusherService
  .listen<ChatMessage>(['ev:message', 'ev:meeting-request'])
  .subscribe((msg: ChatMessage) => {
    console.log('Message Received', msg.content);
});