Descargar ng2 signalr - Descargar el código fuente ng2 signalr

Ng2-Signalr

Una biblioteca de TypeScript angular que le permite conectarse a ASP.NET SignalR

Características:

100% mecanografiado
Use RXJS para observar eventos del servidor
Escribir pruebas unitarias fáciles utilizando el SignalRConnectionMockMockManger y ActivatedRoutemock proporcionado

NG2-SIGNALR Live Demo

Fuente: NG2 SignalR Demo
Demo: Demo (puede tardar más en cargarse. Lo siento, Azure Free Tier :-))
Ng CLI Ejemplo: Ejemplo de NG CLI

Instalación

 npm install ng2-signalr jquery signalr --save

V5 es la primera versión desarrollada contra Angular V5. Los usuarios de Angular V4 deben usar V2.2.1.

Configuración

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 )
  ]
} )

Configuración NGCLI

Dentro de Angular-Cli.json

 "scripts" : [
          "../node_modules/jquery/dist/jquery.min.js" ,
          "../node_modules/signalr/jquery.signalR.js"
] ,

Crear conexión

Existen 2 formas de crear una conexión:

1. conexión inyectable

Este enfoque es preferible. Puede confiar fácilmente en los eventos de navegación de enrutador predeterminados (navegación/final) para mantener ocupado a su usuario mientras el establecimiento de conexión está en curso. En segundo lugar, puede inyectar la conexión directamente, facilitando pruebas unitarias más fáciles. La configuración implica 3 pasos.

 // 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. Inyect Signalr

La creación de una conexión cliente-servidor se puede hacer llamando al método de conexión en la instancia de SignalR.

 // inside your component.
constructor ( private _signalR : SignalR )  {
}

someFunction ( ) {
    this . _signalR . connect ( ) . then ( ( c ) => {
      //do stuff
    } ) ;
    
    
    
}

Este enfoque tiene varios inconvenientes: Waittime:

Tenga en cuenta, puede tomar varios segundos establecer la conexión con el servidor y, por lo tanto, para la promesa de resolver. Esto es especialmente cierto cuando no es posible una conexión WebSocket-Transport no es posible y Signalr intenta retroceder a otros transportes como ServersInevents y largas encuestas. ¿Es defensor mantener a su usuario final consciente al mostrar alguna forma de progreso?
Más difícil de probar la unidad:
Si desea escribir pruebas unitarias contra la conexión, primero debe burlarse de SignalR.

Escuche los cambios de ConnectionStatus durante Connect (> = v2.0.6)

Desde la versión 2.0.6 en adelante, puede suscribirse a los cambios de ConnectionStatus al conectarse al servidor. Forst le pide a SignalR que cree una conexión. Luego, en el objeto de conexión, puede suscribirse al estado observable antes de llamar al método de inicio.

FYI: Connect () ahora es taquigrafía para CreateConnection (). Start (), es decir, sin suscribirse a los cambios de estado

 let conx = this . _signalR . createConnection ( ) ;
conx . status . subscribe ( ( s ) => console . warn ( s . name ) ) ;
conx . start ( ) . then ( ( c ) => {
...
} ) ;

Configuración

Puede configurar Singalr en 2 niveles diferentes:

1. Nivel de módulo:

El nivel del módulo es donde normalmente proporciona la configuración predeterminada. Esto es si pase en el HubName, ServerUrl, QS (parámetros de cadena de consulta) y transporte. Cuando, en algún lugar de su aplicación, se invoca el método singalr.connect () sin parámetros, utilizará esta configuración predeterminada.

 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. Nivel de conexión:

Siempre puede configurar SignalR en un nivel de conexión por conexión. Para esto, debe invocar el método SingalR.Connect (Opciones), pasando un parámetro de opciones, de Tipo de conexión. Detrás de escena, el método SignalR Connect fusionará el parámetro de opciones proporcionado, con la configuración predeterminada (módulo), en un nuevo objeto de configuración, y lo pasará al backend de SignalR.

 import { SignalRModule } from 'ng2-signalr' ;
import { IConnectionOptions , SignalR } from 'ng2-signalr' ;

let options : IConnectionOptions = { hubName : 'MyHub' } ;
Signalr . connect ( options ) ;

Cómo escuchar eventos del lado del servidor

 // 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 ) ;
} ) ;

Escuchar para la taquigrafía:

Al usar Listen For Method, puede omitir el primer paso en el enfoque anterior. Aquí el método de escucha le devuelve el BroadVeSteventListener, al que puede suscribirse.

 let onMessageSent$  = this . connection . listenFor ( 'ON_MESSAGE_SENT' ) ;
onMessageSent$ . subscribe ( ...

ListenForraw:

Al usar el método ListenForraw, puede lanzar la devolución de llamada del cliente de Signalr Signalr. Aquí el método de escucha le devuelve cualquier [] de BroadVeSteventListener, al que puede suscribirse.

 let onMessageSent$  = this . connection . listenForRaw ( 'ON_MESSAGE_SENT' ) ;
onMessageSent$ . subscribe ( ( data : any [ ] ) => ... . ) ;

Cómo invocar un método de servidor

 // 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 ;
} ) ;

Cómo escuchar el estado de conexión

 this . connection . status . subscribe ( ( status : ConnectionStatus ) => {
     this . statuses . push ( status ) ;
} ) ;

También compatible

 // start/stop the connection
this . connection . start ( ) ;
this . connection . stop ( ) ;
 
// listen for connection errors
this . connection . errors . subscribe ( ( error : any ) => {
     this . errors . push ( error ) ;
} ) ;

Prueba unitaria

NG2-SIGNALR viene con un componente, construido específicamente, para hacer que sus pruebas unitarias sean fáciles de escribir y con pocas líneas de código: SignarlMockManager. Se puede solicitar el 'SignarlMockManager', una implementación burlada de la conexión de su cliente SignalR, estar utilizando su propiedad simulada. La interfaz simulada de la conexión es idéntica a cualquier conexión de señalización real, que recupere del método Signarl.Connect (). Puede usar el simulacro para espiar ciertas llamadas de método y verificar las invocaciones en sus pruebas. Además, en el propio MockManager, encontrará métodos para activar el comportamiento de 'servidor'. Los errores $ y el estado de propiedades $ se pueden usar para esto, y simular los errores del servidor o los cambios de conexión. Para obtener más información sobre el ciclo de vida de la conexión de Signarl, me refiero a la documentación oficial, escenarios de desconexión de transporte de sección. Además, la propiedad de los oyentes en MockManager, posee una colección de todos los observadores de métodos de cliente cliente, devuelto como sujetos RXJS. Estos sujetos se pueden usar para simular un mensaje de servidor que se envía a través del cable.

 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' )
          ] ) ;
} ) ) ;

Para obtener más información, ciertamente consulte la Demo en vivo, la sección de pruebas unitarias.

Cambios de ruptura

v2.0.6 que pasa de <2.0.6 a 2.0.6 ConnectionStatus Refactoring

eliminado ConnectionStatus.
eliminado ConnectionStatus.Received
eliminado ConnectionStatus.ConnectionSlow
eliminado ConnectionStatus.Reconectado
eliminado ConnectionStatus.StateChanged

v2.0.0 Valando de 1.0.x a 2.0.0 Habrá algunos cambios de ruptura.

Tipo de renombros:

Conexión de conexión a IconnectionOptions
ListenerCollection a Ilistenercollection
SignalRConnectionBase a isignalrconnection

configuración:
4. SignalRModule.Configure (C: SingalrConfiguration) a Signalr.forcoot (() => SingalrConfiguration);

Instalación detallada de Webpack

 npm install jquery signalr expose-loader --save

//inside vendor.ts
import 'expose-loader?jQuery!jquery';
import '../node_modules/signalr/jquery.signalR.js';

Instalación detallada de Systemjs (que comienza desde v2.0.0)

 {
   'ng2-signalr' : 'node_modules/ng2-signalr/bundles/ng2-singalr.umd.(?min).js'
 }

AF93C8777FB64C74F74A875E5DA60A168F410E06

Informe de emisión

Si ha encontrado un error o si tiene una solicitud de función, infórmala en esta sección de problemas de repositorio.

Que contribuye

¡Las solicitudes de extracción son bienvenidas!

Edificio

Use npm build para compilar y construir. Se genera la carpeta A /dist .

Publicar

Navegue a dist/ng2-signalr y ejecute npm publish .

## TODO: Cobertura de código

Use CMD npm test para compilar y ejecutar todas las pruebas.

Prueba unitaria

Use CMD npm test para compilar y ejecutar todas las pruebas. Test Runner está configurado con AutoWatching y 'Progress' como reportero de prueba.

Expandir