Skip to content

SignalR client library built on top of @aspnet/signalr. This gives you more features and easier to use.

License

Notifications You must be signed in to change notification settings

sketch7/signalr-client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f4544fc · Jan 24, 2025

History

59 Commits
Sep 11, 2024
Sep 18, 2023
Sep 11, 2023
Jan 23, 2025
Sep 11, 2023
Sep 11, 2023
Sep 11, 2024
Sep 11, 2024
Sep 11, 2023
Sep 11, 2024
Sep 11, 2023
Jan 24, 2025
Mar 6, 2019
Nov 26, 2017
Sep 18, 2023
Sep 11, 2024
Jan 23, 2025
Jan 24, 2025
Sep 11, 2024
Sep 11, 2024
Sep 11, 2023
Sep 11, 2023
Sep 11, 2024
Sep 11, 2024

Repository files navigation

@ssv/signalr-client

CI npm version

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

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:

  1. Register HubConnectionFactory in your DI eco system
  2. In application bootstrap:
    • Register one or more hub connections (by injecting HubConnectionFactory and using create)
  3. 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

  1. 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 { 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.