ng2 signalr
1.0.0
Une bibliothèque de typescript angulaire qui vous permet de vous connecter à ASP.NET Signalr
Source: Demo Ng2 Signalr
Démo: démo (peut prendre plus de temps à charger. Désolé, niveau gratuit azure :-))
NG CLI Exemple: NG CLI Exemple
npm install ng2-signalr jquery signalr --save
V5 est la première version développée contre Angular V5. Les utilisateurs Angular V4 doivent utiliser V2.2.1.
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 )
]
} ) Inside Angular-Cli.json
"scripts" : [
"../node_modules/jquery/dist/jquery.min.js" ,
"../node_modules/signalr/jquery.signalR.js"
] , Il existe 2 façons de créer une connexion:
Cette approche est préférable. Vous pouvez facilement compter sur les événements de navigation du routeur par défaut (NavigationStart / End) pour occuper votre utilisateur pendant que l'établissement de connexion est en cours. Deuxièmement, vous pouvez injecter directement la connexion, facilitant les tests unitaires plus faciles. La configuration implique 3 étapes.
// 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' ] ;
}
} La création d'une connexion client-serveur peut être effectuée en appelant la méthode Connect sur l'instance Signalr.
// inside your component.
constructor ( private _signalR : SignalR ) {
}
someFunction ( ) {
this . _signalR . connect ( ) . then ( ( c ) => {
//do stuff
} ) ;
}Cette approche présente plusieurs inconvénients: Waits Time:
À partir de la version 2.0.6, vous pouvez vous abonner aux modifications ConnectionStatus lors de la connexion au serveur. Forst vous demandez à Signalr de créer une connexion. Ensuite, sur l'objet de connexion, vous pouvez vous abonner à l'état observable avant d'appeler la méthode de démarrage.
FYI: Connect () est désormais raccourci pour CreateConnection (). Start (), ce qui signifie sans s'abonner aux modifications de statut
let conx = this . _signalR . createConnection ( ) ;
conx . status . subscribe ( ( s ) => console . warn ( s . name ) ) ;
conx . start ( ) . then ( ( c ) => {
...
} ) ; Vous pouvez configurer Singalr à 2 niveaux différents:
Le niveau du module est l'endroit où vous fournissez généralement la configuration par défaut. C'est si vous passez dans le HubName par défaut, ServerUrl, QS (paramètres de chaîne de requête) et transport. Lorsque, quelque part dans votre application, la méthode singalr.connect () est invoquée sans paramètres, il utilisera cette configuration par défaut.
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 Vous pouvez toujours configurer SignalR à un niveau de connexion. Pour cela, vous devez invoquer la méthode Singalr.Connect (Options), transmettant un paramètre d'options, de type ConnectionOptions. Dans les coulisses, la méthode SignalR Connect fusionnera le paramètre des options fournies, avec la configuration par défaut (module), dans un nouvel objet de configuration, et le transmet au backend SignalR.
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 ) ;
} ) ;Lorsque vous utilisez la méthode d'écoute pour écouter, vous pouvez ignorer la première étape de l'approche ci-dessus. Ici, la méthode d'écoute vous renvoie le BroadVastEventListener, à laquelle vous pouvez ensuite vous abonner.
let onMessageSent$ = this . connection . listenFor ( 'ON_MESSAGE_SENT' ) ;
onMessageSent$ . subscribe ( ...Lorsque vous utilisez la méthode LICEFORRAW, vous pouvez lancer le rappel du client SignalR du formulaire de données d'origine. Ici, la méthode d'écoute vous renvoie le [] de BroadVastEventListener, auquel vous pouvez ensuite vous abonner.
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 est livré avec un composant, spécialement construit, pour rendre vos tests unitaires faciles à écrire et avec quelques lignes de code: SignarlMockManager. Le «SignarlMockManager», peut être demandé une implémentation moquée de votre connexion Signalr Client, utilise sa propriété simulée. La connexion simulée. Vous pouvez utiliser la simulation pour espionner certains appels de méthode et vérifier les invocations dans vos tests. De plus, sur le MockManager lui-même, vous trouverez des méthodes pour déclencher un comportement de type «serveur». Les erreurs $ et les propriétés d'état $ peuvent être utilisées pour cela et simuler des erreurs de serveur ou des modifications de connexion. Pour plus d'informations sur le cycle de vie Signarl Connection, je me réfère à la documentation officielle, les scénarios de déconnexion du transport de section. En outre, la propriété des auditeurs sur le MockManager, détient une collection de tous les observateurs de méthodes client-serveur, retournés en tant que sujets RXJS. Ces sujets peuvent ensuite être utilisés pour simuler un message de serveur envoyé sur le fil.
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' )
] ) ;
} ) ) ;Pour plus d'informations, consultez certainement la section de test de démo en direct.
v2.0.6 passant de <2.0.6 à 2.0.6 Refactorisation de connexion
v2.0.0 passant de 1.0.x à 2.0.0 Il y aura des changements de rupture.
Type Renoms:
configuration:
4. SignalrModule.configure (C: SingalrConfiguration) à 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
Si vous avez trouvé un bogue ou si vous avez une demande de fonctionnalité, veuillez les signaler dans cette section des problèmes de référentiel.
Les demandes de traction sont les bienvenues!
Utilisez npm build pour compiler et construire. Le dossier A /dist est généré.
Accédez à dist/ng2-signalr et exécutez npm publish .
## TODO: couverture du code
Utilisez le CMD npm test pour compiler et exécuter tous les tests.
Utilisez le CMD npm test pour compiler et exécuter tous les tests. Test Runner est configuré avec Autowatching et «Progress» en tant que Test Reporter.
