ngrx-signalr
A library to handle realtime SignalR (.NET Framework) events using angular, rxjs and the @ngrx library.
This library is made for the SignalR client using .NET Framework. If you need target .NET Core, please check this repository : https://github.com/Odonno/ngrx-signalr-core
Get started
Install dependencies
Once you created your angular project, you need to install all the libraries required to create the communication between angular and a SignalR hub.
npm install rxjs --save
npm install @ngrx/store @ngrx/effects --save
npm install ngrx-signalr --save
Don't forget to add the dependency in the angular.json
file so angular will automatically inject the $
and $.hubConnection
function used to initialize signalr.
npm install jquery signalr --save
npm install @types/signalr @types/jquery --save-dev
Once everything is installed, you can use the reducer and the effects inside the AppModule
.
@
Start with a single Hub...
First, you will start the application by dispatching the creation of one Hub.
// TODO : your hub definition; this.store.dispatch createSignalRHubhub;
Then you will create an effect to start listening to events before starting the Hub.
initRealtime$ = createEffectthis.actions$.pipe ofTypeSIGNALR_HUB_UNSTARTED, mergeMapHubToAction ;
You can also send events at anytime.
sendEvent$ = createEffectthis.actions$.pipe ofTypeSEND_EVENT, // TODO : create a custom action mergeMap ;
...or use multiple Hubs
Now, start with multiple hubs at a time.
// simplified hub creation; ; // define hubName and url; // define hubName and url; // define hubName and url dispatchHubCreationhub1;dispatchHubCreationhub2;dispatchHubCreationhub3;
You will then initialize your hubs in the same way but you need to know which one is initialized.
; // define hubName and url; // define hubName and url initHubOne$ = createEffectthis.actions$.pipe ofTypeSIGNALR_HUB_UNSTARTED, ofHubhub1, mergeMapHubToAction ; initHubTwo$ = createEffectthis.actions$.pipe ofTypeSIGNALR_HUB_UNSTARTED, ofHubhub2, mergeMapHubToAction ;
And then you can start your app when all hubs are connected the first time.
appStarted$ = createEffectthis.store.pipe selectselectAreAllHubsConnected, filter!!areAllHubsConnected, first, mapofappStarted // TODO : create a custom action when hubs are connected ;
Handling reconnection
By design in .NET Framework, a SignalR client will attempt to reconnect to the server automatically until a specified threshold time is reached. Until we reached this limit (of 30 seconds by default), the hub is in reconnecting
mode. After that, the hub switch to disconnected
mode and no further attempt is made to reconnect.
So, if you want to reconnect to the hub in disconnected
state, you have to handle it manually by writing an effect
.
// try to reconnect every 10s (when the navigator is online)whenDisconnected$ = createReconnectEffectthis.actions$, 10 * 1000;
In this example, we apply a periodic reconnection attempt every 10 seconds when the hub is disconnected
and when there is a network connection.
Of course, you can write your own Effect
to you have the benefit to write your own reconnection pattern (periodic retry, exponential retry, etc..).
API features
SignalR Hub
The SignalR Hub is an abstraction of the hub connection. It contains function you can use to:
- start the connection
- listen to events emitted
- send a new event
You can find an existing hub by its name and url.
;;
And create a new hub.
;
State
The state contains all existing hubs that was created with their according status (unstarted, connecting, connected, disconnected, reconnecting).
;;;;; ; ;
Actions
createSignalRHub
will initialize a new hub connection but it won't start the connection so you can create event listeners.
;
startSignalRHub
will start the hub connection so you can send and receive events.
;
stopSignalRHub
will stop the hub connection.
hubNotFound
can be used when you do retrieve your SignalR hub based on its name and url.
;
Effects
// create hub automaticallycreateHub$;
// listen to start result (success/fail)// listen to change connection state (connecting, connected, disconnected, reconnecting)// listen to hub errorbeforeStartHub$;
// start hub automaticallystartHub$;
// stop hub stopHub$;
Selectors
// used to select all hub statuses in state; // used to select a single hub status based on its name and url; // used to know if all hubs are connected; // used to know when a hub is in a particular state;