Download do ng2 signalr - ng2 signalr Download do código -fonte

NG2-SIGNALR

Uma biblioteca de texto datilografado angular que permite que você se conecte ao ASP.NET Signalr

Características:

100% datilografado
Use RXJs para observar eventos do servidor
Escreva testes de unidade Fácil usando o SignalRconnectionMockMockManager e o ActivateRoutemock fornecido

Demoção ao vivo NG2-SIGNALR

Fonte: Demoção NG2 Signalr
Demo: Demo (pode levar mais tempo para carregar. Desculpe, Azure Free Tier :-))
Ng CLI Exemplo: ng cli exemplo

Instalação

 npm install ng2-signalr jquery signalr --save

V5 é a primeira versão desenvolvida contra o Angular V5. Os usuários Angular V4 devem usar v2.2.1.

Configurar

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

Configure ngcli

Inside Angular-cli.json

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

Criar conexão

Existem 2 maneiras de criar uma conexão:

1. Conexão injeta

Essa abordagem é preferível. Você pode confiar facilmente nos eventos de navegação do roteador padrão (NavigationStart/End) para manter seu usuário ocupado enquanto o estabelecimento de conexão estiver em andamento. Em segundo lugar, você pode injetar diretamente a conexão, facilitando o teste de unidade mais fácil. A configuração envolve 3 etapas.

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

A criação de uma conexão cliente-servidor pode ser feita chamando o método Connect na instância do SignalR.

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

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

Esta abordagem tem várias desvantagens: Waittime:

Leve em consideração, pode levar vários segundos para estabelecer a conexão com o servidor e, portanto, a promessa de resolver. Isso é especialmente verdadeiro quando uma conexão WebSocket-Transport não é possível e o SignalR tenta falar em outros transportes, como o ServerSenteevents e a longa pesquisa. É aconselhável manter seu usuário final consciente, mostrando alguma forma de progresso.
Mais difícil de unidade de teste:
Se você deseja escrever testes de unidade em relação à conexão, precisará zombar da instância do Signalr primeiro.

Ouça as alterações do ConnectionStatus durante o Connect (> = v2.0.6)

Na versão 2.0.6, você pode se inscrever no ConnectionStatus Alterações ao se conectar ao servidor. Forst você pede ao Signalr para criar uma conexão. Em seguida, no objeto de conexão, você pode assinar o status observável antes de chamar o método de início.

FYI: Connect () agora está abreviado para CreateConnection (). Start (), significando sem assinar as mudanças de status

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

Configuração

Você pode configurar o Singalr em 2 níveis diferentes:

1. Nível do módulo:

O nível do módulo é onde você normalmente fornece a configuração padrão. Este é que você passa no nome padrão, serverurl, qs (parâmetros de sequência de consultas) e transporte. Quando, em algum lugar do seu aplicativo, o método singalr.connect () é invocado sem parâmetros, ele usará essa configuração padrão.

 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. Nível de conexão:

Você sempre pode configurar o Signalr em um nível de conexão por. Para isso, você precisa invocar o método SingalR.Connect (Options), passando em um parâmetro de opções, do tipo ConnectionOptions. Nos bastidores, o método SignalR Connect mesclará o parâmetro de opções fornecido, com a configuração padrão (módulo), em um novo objeto de configuração e o passar para o back -end do SignalR.

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

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

Como ouvir eventos do lado do 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 ) ;
} ) ;

Ouça para abreviação:

Ao usar o método Listenfor, você pode pular a primeira etapa na abordagem acima. Aqui, o método de escuta retorna o BroadVastEventListener, que você pode se inscrever.

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

ListenForraw:

Ao usar o método ListenForraw, você pode lançar o retorno de chamada do cliente do formulário de dados originalr. Aqui, o método de escuta retorna o que você pode se inscrever.

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

Como invocar um 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 ;
} ) ;

Como ouvir o status de conexão

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

Também suportado

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

Teste de unidade

NG2-SIGNALR vem com um componente, especificamente construído, para facilitar a redação de seus testes de unidade e com poucas linhas de código: SignarlmockManager. O 'SignarlmockManager' pode ser solicitado a uma implementação ridicularizada da conexão do cliente Signalr, usando sua propriedade simulada. A conexão simulada, sua interface, é idêntica a qualquer conexão SignalR real, que você volta do método sigmarl.connect (). Você pode usar a simulação para espionar determinadas chamadas de método e verificar invocações em seus testes. Além disso, no próprio MockManager, você encontrará métodos para acionar o comportamento 'servidor'. Ambos os erros $ e o status $ Propriedades podem ser usados para isso e simular erros do servidor ou alterações do ConnectionStatus. Para obter mais informações sobre o ciclo de vida da conexão Signarl, refiro -me à documentação oficial, cenários de desconexão de transporte da seção. Além disso, a propriedade dos ouvintes no MockManager detém uma coleção de todos os observadores do método cliente-servidor, retornou como sujeitos RXJS. Esse assunto pode ser usado para simular uma mensagem de servidor sendo enviada sobre o fio.

 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 mais informações, certamente consulte a demonstração ao vivo, seção de testes de unidade.

Quebrando mudanças

v2.0.6 passando de <2.0.6 a 2.0.6 ConnectionStatus refatoramento

Removido ConnectionStatus.starting
Removido ConnectionStatus.Received
Removido ConnectionStatus.ConnectionsLow
Removido ConnectionStatus.Reconnected
Removido ConnectionStatus.stateChanged

v2.0.0 Passando de 1.0.x a 2.0.0, haverá algumas mudanças de ruptura.

Renomeias de tipo:

ConnectionOptions to iconnectionOptions
Ouça a Collection para a ilistenecollection
SignalRConnectionBase para ISignalrConnection

configuração:
4. Signalrmodule.configure (c: singalrconfiguration) para signalr.forroot (() => singalrconfiguration);

Instalação detalhada do webpack

 npm install jquery signalr expose-loader --save

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

Instalação detalhada do SystemJS (a partir da v2.0.0)

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

AF93C8777FB64C74F74A875E5DA60A168F410E06

Relatórios de emissão

Se você encontrou um bug ou se tiver uma solicitação de recurso, relate -os nesta seção de problemas do repositório.

Contribuindo

Os pedidos de puxão são bem -vindos!

Prédio

Use npm build para compilar e construir. A pasta A /dist é gerada.

Publicar

Navegue até dist/ng2-signalr e execute npm publish .

## TODO: Cobertura de código

Use CMD npm test para compilar e executar todos os testes.

Teste de unidade

Use CMD npm test para compilar e executar todos os testes. O Test Runner está configurado com a Autowatching e o 'Progress' como repórter de teste.

Expandir