@ssv/signalr-client
SignalR client library built on top of @aspnet/signalr-client. 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 (coming soon):
- Client: Angular
- Server: Microsoft Orleans integrated with SignalR
- Angular basic example
Installation
Get library via npm
npm install @ssv/signalr-client --save
API Documentation
Check out the API Documentation Page.
Usage
There are three simple steps:
- Register
HubConnectionFactory
in your DI eco system - In application bootstrap:
- Register one or more hub connections (by injecting
HubConnectionFactory
and usingcreate
)
- Register one or more hub connections (by injecting
- Somewhere in your components/services you need:
- Inject
HubConnectionFactory
and call methodget
by passing thekey
for a specific hub connection, this will returnHubConnection
- Use
HubConnection
to use enhanced signalr features
- Inject
Angular Adapter
- Register
HubConnectionFactory
as 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 { ISubscription } from "rxjs/Subscription";
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 hero$$: ISubscription;
constructor(hubFactory: HubConnectionFactory) {
this.hubConnection = hubFactory.get<HeroHub>("hero");
}
ngOnInit(): void {
this.hero$$ = this.hubConnection.stream<Hero>("GetUpdates", "singed")
.subscribe(x => console.log(`hero stream :: singed :: update received`, x));
}
ngOnDestroy(): void {
if (this.hero$$) {
this.hero$$.unsubscribe();
}
}
}
export interface HeroHub {
GetUpdates: string;
}
export interface Hero {
id: string;
name: string;
health: number;
}
Contributions
Check out the development guide.