ng2 signalr
1.0.0
Eine Angular TypeScript -Bibliothek, mit der Sie eine Verbindung zu ASP.NET SignalR herstellen können
Quelle: NG2 Signalr Demo
Demo: Demo (kann länger dauern, um zu laden. Entschuldigung, Azure Free Tier :-))
ng cli Beispiel: ng cli Beispiel
npm install ng2-signalr jquery signalr --save
V5 ist die erste Version, die gegen Angular V5 entwickelt wurde. Angular V4 -Benutzer sollten v2.2.1 verwenden.
in 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 )
]
} ) Inside Angular-Cli.json
"scripts" : [
"../node_modules/jquery/dist/jquery.min.js" ,
"../node_modules/signalr/jquery.signalR.js"
] , Es gibt 2 Möglichkeiten, eine Verbindung zu erstellen:
Dieser Ansatz ist vorzuziehen. Sie können sich problemlos auf die Standard -Router -Navigationsereignisse (NavigationStart/Ende) verlassen, um Ihren Benutzer während der Verlauf der Verbindungseinrichtung zu beschäftigen. Zweitens können Sie die Verbindung direkt injizieren und erleichtern, um die Einheitstests zu erleichtern. Das Setup umfasst 3 Schritte.
// 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' ] ;
}
} Das Erstellen einer Client-Server-Verbindung kann erstellt werden, indem die Verbindungsmethode in der SignalR-Instanz aufgerufen wird.
// inside your component.
constructor ( private _signalR : SignalR ) {
}
someFunction ( ) {
this . _signalR . connect ( ) . then ( ( c ) => {
//do stuff
} ) ;
}Dieser Ansatz hat mehrere Nachteile: Wartezeit:
Ab Version 2.0.6 können Sie bei der Verbindung zum Server ConnectionStatus -Änderungen abonnieren. Forst Sie bitten SignalR, eine Verbindung zu erstellen. Anschließend können Sie auf dem Verbindungsobjekt den Status beobachten, bevor Sie die Startmethode aufrufen.
FYI: Connect () ist jetzt eine Kurzform für CreateConnection (). Start (), was bedeutet, ohne Statusänderungen zu abonnieren
let conx = this . _signalR . createConnection ( ) ;
conx . status . subscribe ( ( s ) => console . warn ( s . name ) ) ;
conx . start ( ) . then ( ( c ) => {
...
} ) ; Sie können Singalr auf 2 verschiedenen Ebenen konfigurieren:
In der Modulebene geben Sie normalerweise die Standardkonfiguration an. Dies ist, wenn Sie den Standard -Hubname, Serverurl, QS (Parameter für Abfragestöne) und Transport übergeben haben. Wenn die Methode Singalr.Connect () irgendwo in Ihrer Anwendung ohne Parameter aufgerufen wird, wird diese Standardkonfiguration verwendet.
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 Sie können SignalR jederzeit auf einer Verbindungsstufe konfigurieren. Zu diesem Zweck müssen Sie die Methode der Singalr.Connect (Options) aufrufen, die einen Optionsparameter übergeben, von Typ -VerbindungOptionen. Hinter den Kulissen fusioniert die SignalR Connect -Methode den Parameter der bereitgestellten Optionen mit der Konfiguration (Standard) in ein neues Konfigurationsobjekt und übergibt diese an SignalR -Backend.
import { SignalRModule } from 'ng2-signalr' ;
import { IConnectionOptions , SignalR } from 'ng2-signalr' ;
let options : IConnectionOptions = { hubName : 'MyHub' } ;
Signalr . connect ( options ) ; // 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 ) ;
} ) ;Wenn Sie die Hörenformen verwenden, können Sie den ersten Schritt im obigen Ansatz überspringen. Hier gibt die Hörenmethode Sie den BroadvaStEventListener zurück, den Sie dann abonnieren können.
let onMessageSent$ = this . connection . listenFor ( 'ON_MESSAGE_SENT' ) ;
onMessageSent$ . subscribe ( ...Bei Verwendung der Hörforraw -Methode können Sie Originaldatenformular -SignalR -Client -Rückrufe abgeben. Hier gibt die Hörenmethode Sie über die einzelnen [] von BroadvaStEventListener zurück, die Sie dann abonnieren können.
let onMessageSent$ = this . connection . listenForRaw ( 'ON_MESSAGE_SENT' ) ;
onMessageSent$ . subscribe ( ( data : any [ ] ) => ... . ) ; // 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 ;
} ) ; this . connection . status . subscribe ( ( status : ConnectionStatus ) => {
this . statuses . push ( status ) ;
} ) ; // start/stop the connection
this . connection . start ( ) ;
this . connection . stop ( ) ;
// listen for connection errors
this . connection . errors . subscribe ( ( error : any ) => {
this . errors . push ( error ) ;
} ) ; NG2-Signalr verfügt über eine speziell erstellte Komponente, um Ihre Einheitstests leicht zu schreiben und mit wenigen Codezeilen: SignarLmockManager. Der 'SignarLmockManager' kann um eine verspottete Implementierung Ihrer SignalR -Client -Verbindung gefragt werden, um die Mock -Eigenschaft zu verwenden. Die Scheinverbindung ist die Schnittstelle mit jeder echten SignalR -Verbindung identisch, die Sie von der Methode Signarl.connect () zurückerhalten. Sie können das Mock verwenden, um bestimmte Methodenaufrufe auszuspionieren und die Aufrufe in Ihren Tests zu überprüfen. Außerdem finden Sie auf dem MockManager selbst Methoden, um "Server" wie Verhalten auszulösen. Beide Fehler $ $ und Status $ properties können dafür verwendet werden und simulieren Serverfehler oder ConnectionStatus -Änderungen. Für weitere Informationen zum Lebenszyklus von Signarl Connection beziehe ich mich auf die offizielle Dokumentation, den Abschnitt Transport -Trennungsszenarien. Außerdem hält die Listener-Eigenschaft auf dem Mockmanager eine Sammlung aller Kunden-Server-Methodenbeobachter, die als RXJS-Probanden zurückgegeben wurden. Mit diesem Thema kann dann eine Servermeldung über das Kabel simulieren.
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' )
] ) ;
} ) ) ;Weitere Informationen finden Sie in der Live -Demo, der Abschnitt "Live -Demo".
v2.0.6 wechselt von <2.0.6 bis 2.0.6 ConnectionStatus Refactoring
v2.0.0 von 1.0.x bis 2.0.0 Es wird einige Bruchänderungen geben.
Typ umbenannt:
Konfiguration:
4. SignalRmodule.Configure (C: singalrConfiguration) to signalr.fOrroot (() => singalrconfiguration);
npm install jquery signalr expose-loader --save
//inside vendor.ts
import 'expose-loader?jQuery!jquery';
import '../node_modules/signalr/jquery.signalR.js';
{
'ng2-signalr' : 'node_modules/ng2-signalr/bundles/ng2-singalr.umd.(?min).js'
}
AF93C8777FB64C74F74A875E5DA60A168F410E06
Wenn Sie einen Fehler gefunden haben oder eine Feature -Anfrage haben, melden Sie ihn bitte in diesem Abschnitt mit Repository -Problemen.
Pull -Anfragen sind willkommen!
Verwenden Sie npm build , um zu kompilieren und zu bauen. A /dist -Ordner wird erstellt.
Navigieren Sie zu dist/ng2-signalr und führen Sie npm publish aus.
## TODO: Codeabdeckung
Verwenden Sie npm test CMD, um alle Tests zu kompilieren und auszuführen.
Verwenden Sie npm test CMD, um alle Tests zu kompilieren und auszuführen. Der Testläufer ist mit Autowatching und "Fortschritt" als Testreporter konfiguriert.
