ng2 signalr
1.0.0
Perpustakaan TypeScript Angular yang memungkinkan Anda untuk terhubung ke ASP.NET Signalr
Sumber: Demo NG2 Signalr
Demo: Demo (bisa memakan waktu lebih lama. Maaf, Azure Free Tier :-))
Contoh NG CLI: Contoh NG CLI
npm install ng2-signalr jquery signalr --save
V5 adalah versi pertama yang dikembangkan terhadap Angular V5. Pengguna Angular V4 harus menggunakan v2.2.1.
di dalam 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 )
]
} ) di dalam Angular-cli.json
"scripts" : [
"../node_modules/jquery/dist/jquery.min.js" ,
"../node_modules/signalr/jquery.signalR.js"
] , Ada 2 cara untuk membuat koneksi:
Pendekatan ini lebih disukai. Anda dapat dengan mudah mengandalkan acara navigasi router default (NavigationStart/End) untuk membuat pengguna Anda sibuk saat pembentukan koneksi sedang berlangsung. Kedua, Anda dapat menyuntikkan koneksi secara langsung, memfasilitasi pengujian unit yang lebih mudah. Pengaturan melibatkan 3 langkah.
// 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' ] ;
}
} Membuat koneksi klien-server dapat dilakukan dengan memanggil metode Connect pada instance SignalR.
// inside your component.
constructor ( private _signalR : SignalR ) {
}
someFunction ( ) {
this . _signalR . connect ( ) . then ( ( c ) => {
//do stuff
} ) ;
}Pendekatan ini memiliki beberapa kelemahan: WaitTime:
Dari versi 2.0.6 dan seterusnya, Anda dapat berlangganan perubahan ConnectionStatus setelah terhubung ke server. Forst Anda meminta Signalr untuk membuat koneksi. Kemudian pada objek koneksi Anda dapat berlangganan status yang dapat diamati sebelum memanggil metode start.
Fyi: connect () sekarang singkatan untuk createConnection (). Start (), artinya tanpa berlangganan perubahan status
let conx = this . _signalR . createConnection ( ) ;
conx . status . subscribe ( ( s ) => console . warn ( s . name ) ) ;
conx . start ( ) . then ( ( c ) => {
...
} ) ; Anda dapat mengonfigurasi singalr pada 2 level yang berbeda:
Level modul, adalah tempat Anda biasanya memberikan konfigurasi default. Ini adalah Anda lulus di hubname default, serverurl, qs (parameter string kueri), dan transportasi. Ketika, di suatu tempat di aplikasi Anda, metode singalr.connect () dipanggil tanpa parameter, itu akan menggunakan konfigurasi default ini.
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 Anda selalu dapat mengonfigurasi SignalR pada level per koneksi. Untuk ini, Anda perlu memohon metode singalr.connect (opsi), lulus dalam parameter opsi, dari tipe ConnectionOptions. Di belakang layar, metode SignalR Connect akan menggabungkan parameter opsi yang disediakan, dengan konfigurasi default (modul), menjadi objek konfigurasi baru, dan meneruskannya ke backend 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 ) ;
} ) ;Saat menggunakan metode listenFor, Anda dapat melewatkan langkah pertama dalam pendekatan di atas. Di sini metode mendengarkan mengembalikan Anda BroadVastEventListener, yang kemudian dapat Anda langgar.
let onMessageSent$ = this . connection . listenFor ( 'ON_MESSAGE_SENT' ) ;
onMessageSent$ . subscribe ( ...Saat menggunakan metode ListenForraw, Anda dapat melemparkan Formulir Data Asli Signalr Callback klien. Di sini metode mendengarkan mengembalikan Anda [] dari BroadVastEventListener, yang kemudian dapat Anda langgar.
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 dilengkapi dengan komponen, secara khusus dibangun, untuk membuat tes unit Anda mudah ditulis dan dengan beberapa baris kode: SignarlmockManager. 'SignarlmockManager', dapat ditanya implementasi yang diejek dari koneksi klien SignalR Anda, menggunakan properti tiruannya. Koneksi tiruan antarmuka itu identik dengan koneksi SignalR nyata, yang Anda dapatkan dari metode Signarl.Connect (). Anda dapat menggunakan tiruan untuk memata -matai panggilan metode tertentu, dan memverifikasi doa dalam tes Anda. Juga, pada mockManager itu sendiri, Anda akan menemukan metode untuk memicu perilaku seperti 'server'. Kedua kesalahan $ dan status $ properti, dapat digunakan untuk ini, dan mensimulasikan kesalahan server atau perubahan ConnectionStatus. Untuk informasi lebih lanjut tentang, siklus hidup Signarl Connection, saya merujuk ke dokumentasi resmi, skenario pemutusan transportasi bagian. Juga, properti pendengar di MockManager, memegang koleksi semua pengamat metode klien-server, dikembalikan sebagai subjek RXJS. Subjek ini kemudian dapat digunakan untuk mensimulasikan pesan server yang dikirim melalui kawat.
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' )
] ) ;
} ) ) ;Untuk info lebih lanjut, tentu saja periksa demo langsung, bagian pengujian unit.
v2.0.6 Bergerak dari <2.0.6 ke 2.0.6 Refactoring ConnectionStatus
v2.0.0 mulai dari 1.0.x ke 2.0.0 akan ada beberapa perubahan yang melanggar.
Ketik Rename:
konfigurasi:
4. Signalrmodule.configure (C: SingalrConfiguration) menjadi sinyalr.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
Jika Anda telah menemukan bug atau jika Anda memiliki permintaan fitur, silakan laporkan di bagian masalah repositori ini.
Permintaan tarik dipersilakan!
Gunakan npm build untuk mengkompilasi dan membangun. Folder A /dist dihasilkan.
Arahkan ke dist/ng2-signalr dan jalankan npm publish .
## Todo: Cakupan kode
Gunakan npm test CMD untuk mengkompilasi dan menjalankan semua tes.
Gunakan npm test CMD untuk mengkompilasi dan menjalankan semua tes. Test Runner dikonfigurasi dengan autowatching dan 'kemajuan' sebagai reporter uji.
