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

sketch7, signalr, signalr-client, realtime, push, ws, websockets, streams, rxjs, real-time, angular, aurelia, vue, react
npm install @ssv/signalr-client@4.1.0



CircleCI 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


  • 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...



Get library via npm

npm install @ssv/signalr-client

API Documentation

Check out the API Documentation Page.


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";

	providers: [
export class AppModule {

    constructor(factory: HubConnectionFactory) {
			{ 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";

	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$$ =<Hero>("GetUpdates", "singed")
		.subscribe(x => console.log(`hero stream :: singed :: update received`, x));

	ngOnDestroy(): void {
		if (this.hero$$) {

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();
	{ key: "hero", endpointUri: "/hero" },
	{ key: "user", endpointUri: "http://localhost:62551/real-time/user" }


  • Get Hub by Key
  • Connect
  • subscribe for on
const hubConnection = hubFactory.get<HeroHub>("hero");
const hubConnection$$ = hubConnection.connect().subscribe(() => {

const data$$ = hubConnection.on<string>("Send").subscribe(val => {
	console.log(`send :: data received >>>`, val);


Check out the development guide.