ng2 signalr
1.0.0
مكتبة TypeScript الزاوية تتيح لك الاتصال بـ ASP.NET SignalR
المصدر: NG2 SignalR Demo
العرض التوضيحي: العرض التوضيحي (يمكن أن يستغرق وقتًا أطول للتحميل. آسف ، طبقة Azure Free :-))
NG CLI مثال: NG CLI مثال
npm install ng2-signalr jquery signalr --save
V5 هو الإصدار الأول تم تطويره ضد Angular V5. يجب على مستخدمي V4 Angular استخدام 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 )
]
} ) داخل الزاوية 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 عند الاتصال بالخادم. فورست تطلب من SignalR إنشاء اتصال. ثم على كائن الاتصال ، يمكنك الاشتراك في الحالة التي يمكن ملاحظتها قبل استدعاء طريقة البدء.
FYI: Connect () أصبح الآن اختصارًا لـ CreateConnection (). start () ، بمعنى دون الاشتراك في تغييرات الحالة
let conx = this . _signalR . createConnection ( ) ;
conx . status . subscribe ( ( s ) => console . warn ( s . name ) ) ;
conx . start ( ) . then ( ( c ) => {
...
} ) ; يمكنك تكوين 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 (الخيارات) ، التي تمر بمعلمة خيارات ، من التوصيلات النوعية. وراء الكواليس ، ستقوم طريقة 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 ( ...عند استخدام طريقة LikeyForraw ، يمكنك إلقاء رد اتصال عميل نموذج البيانات الأصلي. هنا تُرجحك طريقة الاستماع إلى أي [] من 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 الخاص بك ، باستخدام خاصية Mock الخاصة به. إن اتصاله الوهمي متطابق مع أي اتصال إشارة RealL ، والتي تعود إليها من طريقة signarl.connect (). يمكنك استخدام Mock للتجسس على مكالمات معينة ، والتحقق من الدعوات في الاختبارات الخاصة بك. أيضًا ، على 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 connectionstatus refactoring
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'
}
AF93C87777FB64C74F74A875E5DA60A168F410E06
إذا وجدت خطأ أو إذا كان لديك طلب ميزة ، فيرجى الإبلاغ عنها في قسم مشكلات المستودع هذا.
طلبات السحب موضع ترحيب!
استخدم npm build لتجميع وبناء. يتم إنشاء مجلد A /dist .
انتقل إلى dist/ng2-signalr وتشغيل npm publish .
## TODO: تغطية الكود
استخدم npm test CMD لتجميع وتشغيل جميع الاختبارات.
استخدم npm test CMD لتجميع وتشغيل جميع الاختبارات. تم تكوين Runner Test مع Autowatching و "التقدم" كمراسل اختبار.
