rxjs-signalr

RxJS wrapper for ASP.NET SignalR

When consuming SignalR based services I wanted to be able to treat receiving data as an observable stream. This library provides a thin wrapper to allow consumption of SignalR services using RxJS Observables.

What is RxJS?

Refer to the RxJS docs for that.

What is SignalR?

Refer to the ASP.NET SignalR docs.

Getting started

jQuery and Signalr

This package relies on jquery and signalr packages. You will need to have both of them available to use this package.

Webpack

Using this package with a webpack build system you can use the provide plugin for webpack to ensure jquery is resolved correctly.

var webpack = require('webpack');
 
module.exports = {
    entry: ...
    output: ...
    plugins: [
        ...
        new wepback.ProvidePlugin({
            '$': 'jquery',
            'window.jQuery': 'jquery',
            'jQuery': 'jquery'
        })
        ...
    ]    
}

Install

Install using npm:

npm install rxjs-signalr --save

Creating a hub

Create using factory method:

import { createSignalRHub } from 'rxjs-signalr';
 
const hub = createSignalRHub('{hubName}');

Create using constructor:

import { SignalRHub } from 'rxjs-signalr';
 
const hub = new SignalRHub('{hubName}');

Receiving data from SignalR

import { createSignalRHub } from 'rxjs-signalr';
 
const hub = createSignalRHub('{hubName}');
hub.on('{name of event/method}').subscribe(data => {
    // Perform logic here
});
hub.start();

Sending data to SignalR

import { createSignalRHub } from 'rxjs-signalr';
 
const hub = createSignalRHub('{hubName}');
hub.start();
hub.send('{name of event/method}', {});

Responding to connection state changes

import { createSignalRHub } from 'rxjs-signalr';
 
const hub = createSignalRHub('{hubName}');
hub.start();
hub.state$.subscribe(state => {
    // state will be a string value of: connected, connecting, dicsonnected, reconnecting.
    // Perform logic here
});