README
@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
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;
private hubConnection$: ISubscription;
constructor(hubFactory: HubConnectionFactory) {
this.hubConnection = hubFactory.get<HeroHub>("hero");
}
ngOnInit(): void {
this.hubConnection$ = this.hubConnection.connect()
.subscribe(() => console.log(`connected!!`));
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;
}
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.