ng2 signalr
1.0.0
Библиотека Angular TypeScript, которая позволяет подключаться к ASP.NET SignalR
Источник: DG2 SignalR DEMO
Демонстрация: демонстрация (может занять больше времени. Извините, Lazure Free Tier :-))
NG CLI Пример: NG CLI пример
npm install ng2-signalr jquery signalr --save
V5 - первая версия, разработанная против Angular V5. Пользователи Angular V4 должны использовать 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 )
]
} ) Внутри Angular-cli.json
"scripts" : [
"../node_modules/jquery/dist/jquery.min.js" ,
"../node_modules/signalr/jquery.signalR.js"
] , Существует 2 способа создания соединения:
Этот подход предпочтительнее. Вы можете легко полагаться на навигационные события маршрутизатора по умолчанию (NavigationStart/End), чтобы ваш пользователь был занят, пока установление подключения продолжается. Во -вторых, вы можете напрямую внедрить соединение, облегчая более простые модульные тестирование. Настройка включает в себя 3 шага.
// 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' ] ;
}
} Создание клиентского соединения может быть сделано, вызывая метод Connect в экземпляре SignalR.
// inside your component.
constructor ( private _signalR : SignalR ) {
}
someFunction ( ) {
this . _signalR . connect ( ) . then ( ( c ) => {
//do stuff
} ) ;
}Этот подход имеет несколько недостатков: wallime:
Начиная с версии 2.0.6 вы можете подписаться на изменения ConnectStatus при подключении к серверу. Вы просите Signalr создать соединение. Затем в объекте соединения вы можете подписаться на статус, наблюдаемый, прежде чем вызовать метод начала.
К вашему сведению: connect () теперь сокращается для CreateConnection (). Start (), что означает без подписания на изменения статуса
let conx = this . _signalR . createConnection ( ) ;
conx . status . subscribe ( ( s ) => console . warn ( s . name ) ) ;
conx . start ( ) . then ( ( c ) => {
...
} ) ; Вы можете настроить SingalR на 2 разных уровнях:
Уровень модуля, где вы обычно предоставляете конфигурацию по умолчанию. Это если бы вы передали в HubName, ServerUrl, QS (параметры строки запроса) и транспорт. Когда где -то в вашем приложении метод Singalr.connect () вызывается без параметров, он будет использовать эту конфигурацию по умолчанию.
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 Вы всегда можете настроить SignalR на уровне подключения. Для этого вам необходимо вызвать метод Singalr.connect (Options), передавая параметр параметров, типового соединения. За кулисами метод подключения SignalR объединит параметр предоставленного параметра с конфигурацией по умолчанию (модуль) в новый объект конфигурации и передает его в бэкэнд 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 ) ;
} ) ;При использовании метода прослушивания вы можете пропустить первый шаг в подходе выше. Здесь метод прослушивания возвращает вам BroadvasteventListener, на который вы можете подписаться.
let onMessageSent$ = this . connection . listenFor ( 'ON_MESSAGE_SENT' ) ;
onMessageSent$ . subscribe ( ...При использовании метода Listenforraw вы можете отменить оригинальный обратный вызов клиента в форме данных. Здесь метод прослушивания возвращает вам любую [] BroadvasteventListener, на который вы можете подписаться.
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 поставляется с компонентом, специально созданным, для того, чтобы упрощать ваши модульные тесты легко писать и с небольшим количеством строк кода: SignarlMockmanager. «Signarlmockmanager» может спросить высмеивающуюся реализацию вашего клиентского соединения SignalR, чтобы использовать свое максимальное свойство. Макетное соединение, которое его интерфейс идентична любому реальному соединению SignalR, которое вы возвращаетесь из метода signarl.connect (). Вы можете использовать макет, чтобы шпионить за определенными вызовами метода и проверить призывы в ваших тестах. Кроме того, в самом Mockmanager вы найдете методы для запуска поведения «сервера». Для этого могут использоваться как ошибки $, так и Status $, и моделируют ошибки сервера или изменения ConnectionStatus. Для получения дополнительной информации о жизненном цикле подключения Signarl я имею в виду официальную документацию, сценарии отключения транспорта в разделе. Кроме того, собственность слушателей на Mockmanager содержит коллекцию всех наблюдателей от клиентских методов, возвращаемых в качестве субъектов RXJS. Затем этот предмет можно использовать для моделирования сообщения сервера, отправляемого через проволоку.
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' )
] ) ;
} ) ) ;Для получения дополнительной информации, конечно, ознакомьтесь с демо -версией Live, модульным тестированием.
v2.0.6 Переход от <2,0,6 до 2.0.6 ConnectionStatus Рефакторинг
v2.0.0 Переход от 1,0.x до 2.0.0 будут некоторые нарушающие изменения.
Тип переименования:
Конфигурация:
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
Если вы нашли ошибку или если у вас есть запрос на функцию, сообщите о них в этом разделе «Вопросы репозитория».
Приглашаются запросы на вытягивание!
Используйте npm build для компиляции и построения. A /dist Polder генерируется.
Перейдите к dist/ng2-signalr и запустите npm publish .
## todo: покрытие кода
Используйте npm test CMD для компиляции и запуска всех тестов.
Используйте npm test CMD для компиляции и запуска всех тестов. Test Runner настроен с помощью автоматического и «прогресса» в качестве Test Reporter.
