# ngx-pusher > Lightweight Angular library for integrating Pusher into Angular applications. Latest version **0.2.5** (published 2023-10-03) · MIT license · 0 weekly downloads ## Install ```sh npm install ngx-pusher pnpm add ngx-pusher yarn add ngx-pusher bun add ngx-pusher ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.2.5 | | Published | 2023-10-03 | | First published | 2022-03-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 71.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | Gulsharan Goraya | | Maintainers | gulsharan | | Keywords | angular, pusher | ## Links - npm: https://www.npmjs.com/package/ngx-pusher - Repository: https://github.com/gulsharan/ngx-pusher - Issues: https://github.com/gulsharan/ngx-pusher/issues - npm.io page: https://npm.io/package/ngx-pusher ## Dependencies (2) - [tslib](https://npm.io/package/tslib.md) >= 2.3.0 - [pusher-js](https://npm.io/package/pusher-js.md) >=7.0.6 ## Recent versions - 0.2.5 (latest) — 2023-10-03 - 0.2.4 — 2022-03-22 - 0.2.3 — 2022-03-21 - 0.2.2 — 2022-03-21 - 0.2.1 — 2022-03-21 - 0.2.0 — 2022-03-20 - 0.1.0 — 2022-03-18 - 0.0.9 — 2022-03-18 ## README # ngx-pusher Lightweight Angular library for integrating Pusher into Angular applications. [![GitHub release (latest by date)](https://img.shields.io/github/v/release/gulsharan/ngx-pusher)](https://github.com/gulsharan/ngx-pusher/releases) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/ngx-pusher)](https://bundlephobia.com/package/ngx-pusher) [![NPM](https://img.shields.io/npm/l/ngx-pusher)](https://github.com/gulsharan/ngx-pusher/blob/main/LICENSE) [![CircleCI](https://img.shields.io/circleci/build/gh/gulsharan/ngx-pusher?token=b9fff275a3dc37e1c72bba5dc27bb3d99075488e)](https://app.circleci.com/pipelines/github/gulsharan/ngx-pusher) [![GitHub issues](https://img.shields.io/github/issues/gulsharan/ngx-pusher)](https://github.com/gulsharan/ngx-pusher/issues) ## Table Of Contents - [About](#about) - [Installation](#installation) - [Getting Started](#getting-started) - [PusherJs Instance](#pusherjs-instance) - [Subscribe to multiple events](#subscribe-to-multiple-events) - [Contributing](#contributing) - [License](#license) ## 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 1. Create custom authorizer [OPTIONAL] Your authorizer class must implement the [NgxPusherAuthorizer](https://github.com/gulsharan/ngx-pusher/blob/ba56dd98b50d4ca57a706df995a0b0c4a7e9a2a9/libs/ngx-pusher/src/lib/interface.ts#L10) interface. ```typescript export class CustomPusherAuthorizer implements NgxPusherAuthorizer { constructor(private http: HttpClient) {} authorize(channelName: string, socketId: string): Observable { return this.http.post('/auth/pusher', { socketId, channelName, }); } } ``` 2. Add NgxPusherModule to your root module ```typescript @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 {} ``` 3. Default Channel [OPTIONAL] You can set up a default (private/presence) channel for the logged-in user. ```typescript @Injectable() export class AuthService { constructor(private pusherService: NgxPuserServicee) {} userLoggedIn(user: IUser) { this.pusherService.subscribe(`private-${user.username}`); } } ``` 4. Subscribe to incoming events ```typescript @Injectable() export class MyMessageHandlerService { constructor(pusherService: NgxPuserServicee) { // Default channel pusherService .listen('ev:message') .subscribe((msg: ChatMessage) => { console.log('Message Received', msg.content); }); // Custom channel pusherService .listen('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: ```typescript 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. ```typescript pusherService .listen(['ev:message', 'ev:meeting-request']) .subscribe((msg: ChatMessage) => { console.log('Message Received', msg.content); }); ``` ## Contributing 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 ## License Distributed under the MIT License. See [LICENSE](https://github.com/gulsharan/ngx-pusher/blob/main/LICENSE) for more information. ## Acknowledgements - [PusherJs](https://www.npmjs.com/package/pusher-js) - [Nx](https://www.npmjs.com/package/nx) --- _Source: https://npm.io/package/ngx-pusher · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._