Lightweight Angular library for integrating Pusher into Angular applications.
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.
npm install --save ngx-pusher
If you are using yarn
yarn add ngx-pusher
-
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; }
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();
}
}
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);
});
Any contributions to make this project better are much appreciated. Please follow the following guidelines before getting your hands dirty.
- Fork the repository
- Run
yarn
- Make your changes, and don't forget to add unit tests.
- Run lint
npm run lint
- Run test
npm run test
- Commit/Push any changes to your repository
- Open a pull request
Distributed under the MIT License. See LICENSE for more information.