@henkkelder/ng2-signalr
v18.0.1
Published
An angular typescript library that allows you to connect to Asp.Net SignalR
Downloads
2,450
Maintainers
Readme
ng2-signalr
An angular typescript library that allows you to connect to Asp.Net SignalR
This is a fork of (https://https://github.com/HNeukermans/ng2-signalR) that appears no longer maintained. This version is for Angular 12+.
Version history
- version 12.0.1 - First 12+ version.
- version 12.0.2 - Fixed a problem where change detection was broken due to incorrect NgZone initialisation.
Features:
- 100% typescript
- use rxjs to observe server events
- write unit tests easy using the provided SignalrConnectionMockManager & ActivatedRouteMock
ng2-signalr live demo
source: ng2 signalr demo demo : demo (can take longer to load. Sorry, azure free tier :-)) ng cli example: ng cli example
Installation
npm install ng2-signalr jquery signalr --save
v5 is first version developed against angular v5. angular v4 users should use v2.2.1.
Setup
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;
// >= v5.0.0
c.executeEventsInZone = true; // optional, default is true
c.executeErrorsInZone = false; // optional, default is false
c.executeStatusChangeInZone = true; // optional, default is true
return c;
}
@NgModule({
imports: [
SignalRModule.forRoot(createConfig)
]
})
// v1.0.9
const config = new SignalRConfiguration();
config.hubName = 'Ng2SignalRHub';
config.qs = { user: 'donald' };
config.url = 'http://ng2-signalr-backend.azurewebsites.net/';
@NgModule({
imports: [
SignalRModule.configure(config)
]
})
setup ngcli
inside angular-cli.json
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/signalr/jquery.signalR.js"
],
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';
@Injectable()
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) => {
...
});
Configuration
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];
@NgModule({
imports: [
SignalRModule.configure(config)
]
})
...
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' };
Signalr.connect(options);
How to listen for server side events
// 1.create a listener object
let onMessageSent$ = new BroadcastEventListener<ChatMessage>('ON_MESSAGE_SENT');
// 2.register the listener
this.connection.listen(onMessageSent$);
// 3.subscribe for incoming messages
onMessageSent$.subscribe((chatMessage: ChatMessage) => {
this.chatMessages.push(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( ...
listenForRaw:
When using listenForRaw method, you can cast original data form signalr client callback. Here the listen method returns you the any[] of BroadvastEventListener, that you can then subscribe to.
let onMessageSent$ = this.connection.listenForRaw('ON_MESSAGE_SENT');
onMessageSent$.subscribe((data: any[]) => ....);
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) => {
this.statuses.push(status);
});
Also supported
// start/stop the connection
this.connection.start();
this.connection.stop();
// listen for connection errors
this.connection.errors.subscribe((error: any) => {
this.errors.push(error);
});
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')); // ''
expect(component.chatMessages).toEqual([
new ChatMessage('Hannes', 'a message'),
new ChatMessage('Hannes', 'a second message')
]);
}));
For more info, certainly check out the live demo, unit testing section.
Breaking changes
v2.0.6 going from <2.0.6 to 2.0.6 ConnectionStatus refactoring
- removed ConnectionStatus.starting
- removed ConnectionStatus.received
- removed ConnectionStatus.connectionSlow
- removed ConnectionStatus.reconnected
- removed ConnectionStatus.stateChanged
v2.0.0 going from 1.0.X to 2.0.0 there will be some breaking changes.
type renames:
- ConnectionOptions to IConnectionOptions
- ListenerCollection to IListenerCollection
- SignalRConnectionBase to ISignalRConnection
configuration: 4. SignalRModule.configure(c: SingalRConfiguration) to SignalR.forRoot(() => SingalRConfiguration);
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'
}
af93c8777fb64c74f74a875e5da60a168f410e06
Issue Reporting
If you have found a bug or if you have a feature request, please report them at this repository issues section.
Contributing
Pull requests are welcome!
Building
Use npm build
to compile and build. A /dist
folder is generated.
Publish
Navigate to dist/ng2-signalr
and run npm publish
.
##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.