ng2 signalr
1.0.0
ไลบรารี TypeScript เชิงมุมที่ช่วยให้คุณเชื่อมต่อกับ ASP.NET SignalR
ที่มา: Demo SignalR NG2
การสาธิต: การสาธิต (อาจใช้เวลาในการโหลดอีกต่อไปขออภัย Azure Free Tier :-))
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"
] , มี 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' ] ;
}
} การสร้างการเชื่อมต่อไคลเอนต์-เซิร์ฟเวอร์สามารถทำได้โดยเรียกใช้วิธีการเชื่อมต่อบนอินสแตนซ์ของ SignalR
// inside your component.
constructor ( private _signalR : SignalR ) {
}
someFunction ( ) {
this . _signalR . connect ( ) . then ( ( c ) => {
//do stuff
} ) ;
}วิธีการนี้มีข้อเสียหลายประการ: Waittime:
จากเวอร์ชัน 2.0.6 เป็นต้นไปคุณสามารถสมัครรับการเปลี่ยนแปลง ConnectionStatus เมื่อเชื่อมต่อกับเซิร์ฟเวอร์ สำหรับคุณขอให้ SignalR สร้างการเชื่อมต่อ จากนั้นในวัตถุการเชื่อมต่อคุณสามารถสมัครรับสถานะที่สังเกตได้ก่อนที่จะเรียกวิธีการเริ่มต้น
FYI: 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 (ตัวเลือก) ผ่านพารามิเตอร์ตัวเลือกของประเภทการเชื่อมต่อประเภท เบื้องหลังเมธอด SignalR Connect จะรวมพารามิเตอร์ตัวเลือกที่ให้ไว้กับการกำหนดค่าเริ่มต้น (โมดูล) ลงในวัตถุการกำหนดค่าใหม่และส่งผ่านไปยังแบ็กเอนด์ 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 คุณสามารถร่ายโทรกลับแบบฟอร์มข้อมูลต้นฉบับ 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 () คุณสามารถใช้การจำลองเพื่อสอดแนมในการโทรวิธีการบางอย่างและตรวจสอบการเรียกร้องในการทดสอบของคุณ นอกจากนี้ใน MockManager เองคุณจะพบวิธีการทริกเกอร์ 'เซิร์ฟเวอร์' เช่นพฤติกรรม ทั้งข้อผิดพลาด $ และคุณสมบัติ $ $ สามารถใช้สำหรับสิ่งนี้และจำลองข้อผิดพลาดของเซิร์ฟเวอร์หรือการเปลี่ยนแปลงการเชื่อมต่อ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวงจรชีวิตการเชื่อมต่อ 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' )
] ) ;
} ) ) ;สำหรับข้อมูลเพิ่มเติมให้ตรวจสอบการสาธิตสดส่วนการทดสอบหน่วย
v2.0.6 ไปจาก <2.0.6 ถึง 2.0.6 การเชื่อมต่อ refactoring
v2.0.0 ไปจาก 1.0.x เป็น 2.0.0 จะมีการเปลี่ยนแปลงบางอย่าง
พิมพ์เปลี่ยนชื่อ:
การกำหนดค่า:
4. SignalRmodule.Configure (C: SingAlrConfiguration) ถึง 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 ถูกสร้างขึ้น
นำทางไปยัง dist/ng2-signalr และเรียกใช้ npm publish
## TODO: การครอบคลุมรหัส
ใช้ npm test CMD เพื่อรวบรวมและเรียกใช้การทดสอบทั้งหมด
ใช้ npm test CMD เพื่อรวบรวมและเรียกใช้การทดสอบทั้งหมด Test Runner ได้รับการกำหนดค่าด้วย AutoWatching และ 'ความคืบหน้า' ในฐานะนักข่าวทดสอบ
