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來編譯並運行所有測試。測試跑步者配置了自動捕獲和“進度”作為測試記者。
