@ssv/signalr-client
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
Features
- 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...
Samples
- Real world example (Orleans Heroes):
- Client: Angular
- Server: Microsoft Orleans integrated with Sketch7 SignalR
- Angular basic example
Installation
Get library via npm
npm install @ssv/signalr-client @microsoft/signalrAPI Documentation
Check out the API Documentation Page.
Usage
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
Angular Adapter
- 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
Angular Basic Example
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;
}Raw Basic Example
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);
});Contributions
Check out the development guide.
