TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    npm version live demo Coverage Status Build Status


    An angular typescript library that allows you to connect to Asp.Net SignalR

    This fork is made so that we can publish a angular 5 compatible library on npm. I would delete this fork once the main library updates.


    1. 100% typescript
    2. use rxjs to observe server events
    3. write unit tests easy using the provided SignalrConnectionMockManager & ActivatedRouteMock

    ng2-signalr live demo

    ng2-signalr source: ng2 signalr demo
    demo : demo (can take longer to load. Sorry, azure free tier :-))
    ng cli example: ng cli example


    npm install ng2-signalr jquery signalr --save

    Breaking changes

    v2.0.6 going from <2.0.6 to 2.0.6 ConnectionStatus refactoring

    1. removed ConnectionStatus.starting
    2. removed ConnectionStatus.received
    3. removed ConnectionStatus.connectionSlow
    4. removed ConnectionStatus.reconnected
    5. removed ConnectionStatus.stateChanged

    v2.0.0 going from 1.0.X to 2.0.0 there will be some breaking changes.

    type renames:

    1. ConnectionOptions to IConnectionOptions
    2. ListenerCollection to IListenerCollection
    3. SignalRConnectionBase to ISignalRConnection

    4. SignalRModule.configure(c: SingalRConfiguration) to SignalR.forRoot(() => SingalRConfiguration);


    inside app.module.ts

    import { SignalRModule } from 'ng2-signalr';
    import { SignalRConfiguration } from 'ng2-signalr';
    // v2.0.0
    export function createConfig(): SignalRConfiguration {
      const c = new SignalRConfiguration();
      c.hubName = 'Ng2SignalRHub';
      c.qs = { user: 'donald' };
      c.url = 'http://ng2-signalr-backend.azurewebsites.net/';
      c.logging = true;
      c.executeEventsInZone = true; // optional, default is true
      c.executeErrorsInZone = false; // optional, default is false
      c.executeStatusChangeInZone = true; // optional, default is true
      return c;
      imports: [ 
    // v1.0.9
    const config = new SignalRConfiguration();
    config.hubName = 'Ng2SignalRHub';
    config.qs = { user: 'donald' };
    config.url = 'http://ng2-signalr-backend.azurewebsites.net/';
      imports: [ 

    setup ngcli

    inside angular-cli.json

    "scripts": [

    Create connection

    There exist 2 ways to create a connection:

    1. inject connection

    This approach is preferable. You can easily rely on the default router navigation events (NavigationStart/End) to keep your user busy while the connection establishment is ongoing. Secondly you can inject the connection directly, facilitating easier unit testing. Setup involves 3 steps.

    // 1. if you want your component code to be testable, it is best to use a route resolver and make the connection there
    import { Resolve } from '@angular/router';
    import { SignalR, SignalRConnection } from 'ng2-signalr';
    import { Injectable } from '@angular/core';
    export class ConnectionResolver implements Resolve<SignalRConnection> {
        constructor(private _signalR: SignalR)  { }
        resolve() {
            console.log('ConnectionResolver. Resolving...');
            return this._signalR.connect();
    // 2. use the resolver to resolve 'connection' when navigation to the your page/component
    import { Route } from '@angular/router';
    import { DocumentationComponent } from './index';
    import { ConnectionResolver } from './documentation.route.resolver';
    export const DocumentationRoutes: Route[] = [
            path: 'documentation',
        component: DocumentationComponent,
         resolve: { connection: ConnectionResolver }
    // 3. then inside your component
     export class ChatComponent {
      private _connection: SignalRConnection;
      constructor(route: ActivatedRoute) {    
      ngOnInit() {
          this.connection = this.route.snapshot.data['connection'];

    2. inject signalr

    Creating a client-server connection can be done by calling the connect method on the Signalr instance.

    // inside your component.
    constructor(private _signalR: SignalR)  {
    someFunction() {
        this._signalR.connect().then((c) => {
          //do stuff

    This approach has several drawbacks: WaitTime:

    • Take into account, it can take several second to establish connection with the server and thus for the promise to resolve. This is especially true when a websocket-transport connection is not possible and signalr tries to fallback to other transports like serverSentEevents and long polling. Is it adviceable to keep your end user aware by showing some form of progress.
      More difficult to unit test:
    • If you want to write unit tests against the connection, you need to mock Signalr instance first.

    listen to connectionstatus changes during connect (>= v2.0.6)

    From version 2.0.6 onwards you can subscribe to connectionstatus changes upon connecting to the server. Forst you ask signalr to create a connection. Then on the connection object you can subscribe to the status observable before calling the start method.

    FYI: connect() is now shorthand for createConnection().start(), meaning without subscribing to status changes

    let conx = this._signalR.createConnection();
    conx.status.subscribe((s) => console.warn(s.name));
    conx.start().then((c) => {


    You can configure Singalr on 2 different levels:

    1. Module level:

    The module level, is where you typically provide the default configuration. This is were you pass in the default hubname, serverurl, qs (query string parameters), and transport. When, somewhere in your application, Singalr.connect() method is invoked without parameters, it will use this default configuration.

    import { SignalRModule } from 'ng2-signalr';
    import { SignalRConfiguration, ConnectionTransport } from 'ng2-signalr';
    // <= v1.0.9
    const config = new SignalRConfiguration();
    config.hubName = 'Ng2SignalRHub';  //default
    config.qs = { user: 'donald' };
    config.url = 'http://ng2-signalr-backend.azurewebsites.net/';
    // Specify one Transport: config.transport = ConnectionTransports.longPolling; or fallback options with order like below. Defaults to best avaliable connection.
    config.transport = [ConnectionTransports.webSockets, ConnectionTransports.longPolling];
      imports: [ 
    Signalr.connect(); //HERE: module level configuration is used when trying to connect

    2. Connection level:

    You can always configure signalr on a per connection level. For this, you need to invoke Singalr.connect(options) method, passing in an options parameter, of type ConnectionOptions. Behind the scenes, Signalr connect method will merge the provided options parameter, with the default (module) configuration, into a new configuration object, and pass that to signalr backend.

    import { SignalRModule } from 'ng2-signalr';
    import { IConnectionOptions, SignalR } from 'ng2-signalr';
    let options: IConnectionOptions = { hubName: 'MyHub' };

    How to listen for server side events

    // 1.create a listener object
    let onMessageSent$ = new BroadcastEventListener<ChatMessage>('ON_MESSAGE_SENT');
    // 2.register the listener
    // 3.subscribe for incoming messages
    onMessageSent$.subscribe((chatMessage: ChatMessage) => {

    listenFor shorthand:

    When using listenFor method, you can skip the first step in the approach above. Here the listen method returns you the BroadvastEventListener, that you can then subscribe to.

    let onMessageSent$  = this.connection.listenFor('ON_MESSAGE_SENT');
    onMessageSent$.subscribe( ...

    How to invoke a server method

    // invoke a server side method
    this.connection.invoke('GetNgBeSpeakers').then((data: string[]) => {
         this.speakers = data;
    // invoke a server side method, with parameters
    this.connection.invoke('ServerMethodName', new Parameters()).then((data: string[]) => {
         this.members = data;

    How to listen for connection status

    this.connection.status.subscribe((status: ConnectionStatus) => {

    Also supported

    // start/stop the connection
    // listen for connection errors
    this.connection.errors.subscribe((error: any) => {

    Unit testing

    Ng2-signalr comes with a component, specifically built, for making your unit tests easy to write and with few lines of code: SignarlMockManager. The 'SignarlMockManager', can be asked a mocked implementation of your signalr client connection, be using its mock property. The mock connection it's interface is identical to any real signalr connection, that you get back from the Signarl.connect() method. You can use the mock to spy on certain method calls, and verify invocations in your tests. Also, on the mockmanager itself, you will find methods to trigger 'server' like behavior. Both errors$ and status$ properties, can be used for this, and simulate server errors or connectionstatus changes. For more information about, the signarl connection lifecycle, I refer to the official documentation, section Transport disconnection scenarios. Also, the listeners property on the MockManager, holds a collection of all client-server method observers, returned as rxjs subjects. These subject can then be used to simulate a server message being sent over the wire.

     it('I want to simulate an error or status event, in my unit test',
        inject([ChatComponent], (component: ChatComponent) => {
          connectionMockManager.errors$.next('An error occured');  //triggers the connection.error.subscribe(() => {});
          connectionMockManager.status$.next(ConnectionStatuses.slowConnection); //triggers the connection.status.subscribe(() => {});
    it('I want to simulate several ChatMessages received, in my unit test',
        inject([ChatComponent], (component: ChatComponent) => {
          let publisher = connectionMockManager.listeners['OnMessageSent'];
          publisher.next(new ChatMessage('Hannes', 'a message')); //triggers the BroadcastEventListener.subscribe(() => {});
          publisher.next(new ChatMessage('Hannes', 'a second message')); // ''
                new ChatMessage('Hannes', 'a message'),
                new ChatMessage('Hannes', 'a second message')

    For more info, certainly check out the live demo, unit testing section.

    Detailed webpack install

    npm install jquery signalr expose-loader --save
    //inside vendor.ts
    import 'expose-loader?jQuery!jquery';
    import '../node_modules/signalr/jquery.signalR.js';

    Detailed systemjs install (starting from v2.0.0)

       'ng2-signalr' : 'node_modules/ng2-signalr/bundles/ng2-singalr.umd.(?min).js'


    Issue Reporting

    If you have found a bug or if you have a feature request, please report them at this repository issues section.


    Pull requests are welcome!


    Use tsc to compile and build. A /dist folder is generated.

    TODO: Code coverage

    Use npm test cmd to compile and run all tests.

    Unit testing

    Use npm test cmd to compile and run all tests. Test runner is configured with autowatching and 'progress' as test reporter.


    npm i @dharapvj/ngx-signalr

    DownloadsWeekly Downloads






    Last publish


    • dharapvj