ng2 signalr
1.0.0
Angular打字库，允许您连接到ASP.NET Signalr
资料来源：NG2 Signalr演示
演示：演示（可能需要更长的时间才能加载。对不起，无木层:-)）
NG CLI示例：NG CLI示例
npm install ng2-signalr jquery signalr --save
V5是针对Angular V5开发的第一个版本。 Angular V4用户应使用v2.2.1。
内部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"
] , 有两种创建连接的方法：
这种方法是可取的。您可以轻松地依靠默认的路由器导航事件（导航/结束），以使您的用户在连接建立持续的过程中保持忙碌。其次，您可以直接注入连接，从而促进更轻松的单元测试。设置涉及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' ] ;
}
} 创建客户端服务器连接可以通过调用SignalR实例上的连接方法来完成。
// inside your component.
constructor ( private _signalR : SignalR ) {
}
someFunction ( ) {
this . _signalR . connect ( ) . then ( ( c ) => {
//do stuff
} ) ;
}这种方法有几个缺点：waittime：
从2.0.6版本开始，您可以在连接到服务器时订阅ConnectionStatus更改。 forst您要求Signalr创建连接。然后，在连接对象上，您可以在调用开始方法之前订阅状态可观察到的状态。
仅供参考：connect（）现在是createConnection（）。开始（）的速记，含义不订阅状态更改
let conx = this . _signalR . createConnection ( ) ;
conx . status . subscribe ( ( s ) => console . warn ( s . name ) ) ;
conx . start ( ) . then ( ( c ) => {
...
} ) ; 您可以在2个不同级别上配置Singalr：
模块级别是您通常提供默认配置的地方。这是您通过默认的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）方法，传递的options参数，类型连接条件。幕后，SignalR Connect方法将将提供的选项参数（模块）配置合并为一个新的配置对象，并将其传递给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 ) ;
} ) ;使用Listorfor方法时，您可以跳过上面方法中的第一步。在这里，收听方法将返回您可以订阅的BroadVasteventListener。
let onMessageSent$ = this . connection . listenFor ( 'ON_MESSAGE_SENT' ) ;
onMessageSent$ . subscribe ( ...使用listerforraw方法时，您可以施放原始数据表Signalr客户端回调。在这里，收听方法将返回您可以订阅的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客户端连接的模拟实现。其接口的模拟连接与任何真实信号连接都相同，您可以从signarl.connect（）方法返回。您可以使用模拟来监视某些方法调用，并在测试中验证调用。另外，在“无用者”本身上，您将找到触发“服务器”类似行为的方法。错误$和状态$属性都可以用于此，并模拟服务器错误或ConnectionStatus更改。有关Signarl连接生命周期的更多信息，我参考了正式文档，“截面运输断开”方案。此外，听众属性在模拟管理器上，拥有所有客户端服务方法观察者的集合，并返回为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' )
] ) ;
} ) ) ;有关更多信息，当然可以查看实时演示，单元测试部分。
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'
}
AF93C87777774C74F74A875E5E5DA60A168F410E6
如果您找到了一个错误或有功能请求，请在此存储库问题部分报告。
欢迎拉动请求！
使用npm build来编译和构建。生成A /dist文件夹。
导航到dist/ng2-signalr并运行npm publish 。
## todo：代码覆盖范围
使用npm test CMD来编译并运行所有测试。
使用npm test CMD来编译并运行所有测试。测试跑步者配置了自动捕获和“进度”作为测试记者。
