Package Exports

@ssv/signalr-client
@ssv/signalr-client/index.cjs.js
@ssv/signalr-client/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ssv/signalr-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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 @microsoft/signalr

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 using create)
Somewhere in your components/services you need:
- Inject HubConnectionFactory and call method get by passing the key for a specific hub connection, this will return HubConnection
- Use HubConnection to use enhanced signalr features

Angular Adapter

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:

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.