SignalR client library built on top of @aspnet/signalr. This gives you more features and easier to use.
Quick links
Change logs | Project Repository | API Documentation
- Fully TypeScript and ReactiveX
- Multiple hub connections state management
- Connection state notifications
- Update connection details easily without losing current connection state
- Subscriptions are handled through RxJS streams
- Reconnection strategies
- Random strategy
- BackOff strategy
- Random BackOff strategy
- Custom strategy
- Auto re-subscriptions after getting disconnected and re-connected
- Contains minimal dependencies (SignalR and RxJS only)
- No constraints with any framework
- Designed to be straight forward integrated with any framework such as Angular, Aurelia, React, Vue, etc...
- Real world example (Orleans Heroes):
- Client: Angular
- Server: Microsoft Orleans integrated with Sketch7 SignalR
- Angular basic example
Get library via npm
npm install @ssv/signalr-client @microsoft/signalrCheck out the API Documentation Page.
There are three simple steps:
- Register
HubConnectionFactoryin your DI eco system - In application bootstrap:
- Register one or more hub connections (by injecting
HubConnectionFactoryand usingcreate)
- Register one or more hub connections (by injecting
- Somewhere in your components/services you need:
- Inject
HubConnectionFactoryand call methodgetby passing thekeyfor a specific hub connection, this will returnHubConnection - Use
HubConnectionto use enhanced signalr features
- Inject
- Register
HubConnectionFactoryas a Provider
You're all set! Now it's fully integrated with your Angular application.
Continue from the vanilla usage - step 2 onwards
import { HubConnectionFactory } from "@ssv/signalr-client"; @NgModule({ providers: [ HubConnectionFactory, ... ] }) export class AppModule { constructor(factory: HubConnectionFactory) { factory.create( { key: "hero", endpointUri: "/hero" }, { key: "user", endpointUri: "/userNotifications" } ); } }sample usage in components:
import { Component, OnInit, OnDestroy } from "@angular/core"; import { HubConnectionFactory, HubConnection } from "@ssv/signalr-client"; @Component({ selector: "hero-detail", templateUrl: "./hero-detail.component.html" }) export class HeroDetailComponent implements OnInit, OnDestroy { private hubConnection: HubConnection<HeroHub>; private readonly _destroy$ = new Subject<void>(); constructor(hubFactory: HubConnectionFactory) { this.hubConnection = hubFactory.get<HeroHub>("hero"); } ngOnInit(): void { this.hubConnection.connect().pipe( takeUntil(this._destroy$), ).subscribe(() => console.log(`connected!!`)); this.hubConnection.on<Hero>("HeroChanged", "singed").pipe( takeUntil(this._destroy$), ).subscribe(x => console.log(`hero :: singed :: update received`, x)); } ngOnDestroy() { this._destroy$.next(); this._destroy$.complete(); } } export interface HeroHub { HeroChanged: string; } export interface Hero { id: string; name: string; health: number; }Create an instance of HubConnectionFactory ideally will be registered into your DI (if you're using any library) or you can create instance manually.
Step 1:
- Register Hubs in the
HubConnectionFactory
import { HubConnectionFactory, HubConnection } from "@ssv/signalr-client"; const hubFactory = new HubConnectionFactory(); hubFactory.create( { key: "hero", endpointUri: "/hero" }, { key: "user", endpointUri: "http://localhost:62551/real-time/user" } );Step2:
- Get Hub by Key
- Connect
- subscribe for
on
const hubConnection = hubFactory.get<HeroHub>("hero"); const hubConnection$$ = hubConnection.connect().subscribe(() => { console.log(`connected!`); }); const data$$ = hubConnection.on<string>("Send").subscribe(val => { console.log(`send :: data received >>>`, val); });Check out the development guide.