{"_id":"@dharapvj/ngx-signalr","_rev":"1-1ab0b8c9835c73bb4aeca02f1b2ce7f0","name":"@dharapvj/ngx-signalr","description":"angular2+ signalr library","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"name":"@dharapvj/ngx-signalr","version":"3.0.0","description":"angular2+ signalr library","main":"bundles/ngx-signalr.umd.js","module":"index.js","scripts":{"build":"node build.js","test":"karma start --single-run --no-auto-watch","pack-lib":"npm pack ./dist","publish-lib":"npm publish --access public ./dist","compodoc":"compodoc -p tsconfig.json","compodoc-serve":"compodoc -s","report-coverage":"cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","cover":"istanbul cover node_modules/jasmine/bin/jasmine.js"},"typings":"index.d.ts","author":{"name":"Hannes Neukermans"},"repository":{"type":"git","url":"git+https://github.com/dharapvj/ngx-signalR.git"},"bugs":{"url":"https://github.com/dharapvj/ngx-signalr/issues"},"homepage":"https://github.com/dharapvj/ngx-signalR","keywords":["signalR","typescript","angular 2","angular 4","angular 5"],"license":"MIT","peerDependencies":{"@angular/common":">= 2.0.0 || >= 5.0.0","@angular/core":">= 2.0.0 || >= 5.0.0","@angular/router":">=3.0.0 || >= 5.0.0","jquery":">= 2.0.0","signalr":">= 2.2.1"},"devDependencies":{"@angular/common":"5.0.0","@angular/compiler":"5.0.0","@angular/compiler-cli":"5.0.0","@angular/core":"5.0.0","@angular/platform-browser":"5.0.0","@angular/platform-browser-dynamic":"5.0.0","@angular/platform-server":"5.0.0","@angular/router":"5.0.0","@types/jasmine":"2.5.41","@types/node":"7.0.5","chalk":"1.1.3","codelyzer":"2.0.0","compodoc":"0.0.41","core-js":"2.4.1","coveralls":"^2.13.0","istanbul":"^0.4.5","jasmine":"^2.5.3","jasmine-core":"2.5.2","karma":"^1.4.1","karma-chrome-launcher":"2.0.0","karma-coverage":"^1.1.1","karma-jasmine":"1.1.0","karma-sourcemap-loader":"0.3.7","karma-spec-reporter":"0.0.26","karma-webpack":"2.0.2","reflect-metadata":"0.1.9","rollup":"0.41.4","rxjs":"5.1.0","shelljs":"0.7.6","ts-helpers":"1.1.2","ts-loader":"2.0.0","tslint":"4.4.2","typescript":"2.4.2","uglify-js":"2.7.5","webpack":"2.2.1","zone.js":"0.7.6"},"dependencies":{"eslint":"^4.7.2"},"_id":"@dharapvj/ngx-signalr@3.0.0","_npmVersion":"5.6.0","_nodeVersion":"9.2.1","_npmUser":{"name":"dharapvj","email":"vj4tech@gmail.com"},"dist":{"integrity":"sha512-xiCTwa9g8M1qCfQte0Nqay9vsZQS4AQMhg+r8GKCXaZsVNdYXOJjUTHIimWpuNarhzEpwAyP716+09gDn+ZJNw==","shasum":"d77af95a1b37b1893434370f4d7d06d303b6fc78","tarball":"https://registry.npmjs.org/@dharapvj/ngx-signalr/-/ngx-signalr-3.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBprhU3N3l6bxnR+ZaYsaEFdocSK3BJX2wtZncYFq2TrAiAmgryoFdNEgxS4e7MAl7qUCC5Df89ml6K0Ygxe47DPhA=="}]},"maintainers":[{"name":"dharapvj","email":"vj4tech@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-signalr-3.0.0.tgz_1516685115490_0.37998132733628154"}}},"readme":"\r\n[](https://badge.fury.io/js/ng2-signalr)\r\n\r\n[](https://coveralls.io/github/HNeukermans/ng2-signalr?branch=master)\r\n[](https://travis-ci.org/HNeukermans/ng2-signalr)\r\n# ng2-signalr\r\nAn angular typescript library that allows you to connect to Asp.Net SignalR\r\n\r\n## This fork is made so that we can publish a angular 5 compatible library on npm. I would delete this fork once the main library updates.\r\n\r\n## Features:\r\n 1. 100% typescript\r\n 2. use rxjs to observe server events \r\n 3. write unit tests easy using the provided SignalrConnectionMockManager & ActivatedRouteMock\r\n\r\n## [ng2-signalr live demo](http://ng2-signalr-webui.azurewebsites.net)\r\n\r\nsource: [ng2 signalr demo](https://github.com/HNeukermans/ng2-signalr.demo.webui.systemjs)
\r\ndemo : [demo](http://ng2-signalr-webui.azurewebsites.net) (can take longer to load. Sorry, azure free tier :-))
\r\nng cli example: [ng cli example](https://github.com/HNeukermans/ng2-signalr.demo.webui.ngcli)
\r\n## Installation\r\n```\r\nnpm install ng2-signalr jquery signalr --save\r\n```\r\n\r\n## Breaking changes\r\nv2.0.6\r\ngoing from <2.0.6 to 2.0.6\r\nConnectionStatus refactoring\r\n 1. removed ConnectionStatus.starting\r\n 2. removed ConnectionStatus.received\r\n 3. removed ConnectionStatus.connectionSlow\r\n 4. removed ConnectionStatus.reconnected\r\n 5. removed ConnectionStatus.stateChanged\r\n\r\n\r\nv2.0.0\r\ngoing from 1.0.X to 2.0.0 there will be some breaking changes. \r\n\r\ntype renames:\r\n 1. ConnectionOptions to IConnectionOptions\r\n 2. ListenerCollection to IListenerCollection \r\n 3. SignalRConnectionBase to ISignalRConnection\r\n \r\nconfiguration:
\r\n 4. SignalRModule.configure(c: SingalRConfiguration) to SignalR.forRoot(() => SingalRConfiguration);\r\n\r\n## Setup\r\ninside app.module.ts\r\n```\r\nimport { SignalRModule } from 'ng2-signalr';\r\nimport { SignalRConfiguration } from 'ng2-signalr';\r\n\r\n// v2.0.0\r\nexport function createConfig(): SignalRConfiguration {\r\n const c = new SignalRConfiguration();\r\n c.hubName = 'Ng2SignalRHub';\r\n c.qs = { user: 'donald' };\r\n c.url = 'http://ng2-signalr-backend.azurewebsites.net/';\r\n c.logging = true;\r\n \r\n c.executeEventsInZone = true; // optional, default is true\r\n c.executeErrorsInZone = false; // optional, default is false\r\n c.executeStatusChangeInZone = true; // optional, default is true\r\n return c;\r\n}\r\n\r\n\r\n@NgModule({\r\n imports: [ \r\n SignalRModule.forRoot(createConfig)\r\n ]\r\n})\r\n\r\n// v1.0.9\r\nconst config = new SignalRConfiguration();\r\nconfig.hubName = 'Ng2SignalRHub';\r\nconfig.qs = { user: 'donald' };\r\nconfig.url = 'http://ng2-signalr-backend.azurewebsites.net/';\r\n\r\n@NgModule({\r\n imports: [ \r\n SignalRModule.configure(config)\r\n ]\r\n})\r\n```\r\n\r\n## setup ngcli\r\ninside angular-cli.json\r\n```\r\n\"scripts\": [\r\n \"../node_modules/jquery/dist/jquery.min.js\",\r\n \"../node_modules/signalr/jquery.signalR.js\"\r\n],\r\n```\r\n\r\n## Create connection \r\nThere exist 2 ways to create a connection: \r\n### 1. inject connection\r\nThis approach is preferable. You can easily rely on the default router navigation events (NavigationStart/End) to keep your user busy while the connection establishment is ongoing. Secondly you can inject the connection directly, facilitating easier unit testing. \r\nSetup involves 3 steps. \r\n```\r\n// 1. if you want your component code to be testable, it is best to use a route resolver and make the connection there\r\nimport { Resolve } from '@angular/router';\r\nimport { SignalR, SignalRConnection } from 'ng2-signalr';\r\nimport { Injectable } from '@angular/core';\r\n\r\n@Injectable()\r\nexport class ConnectionResolver implements Resolve {\r\n\r\n constructor(private _signalR: SignalR) { }\r\n\r\n resolve() {\r\n console.log('ConnectionResolver. Resolving...');\r\n return this._signalR.connect();\r\n }\r\n}\r\n\r\n// 2. use the resolver to resolve 'connection' when navigation to the your page/component\r\nimport { Route } from '@angular/router';\r\nimport { DocumentationComponent } from './index';\r\nimport { ConnectionResolver } from './documentation.route.resolver';\r\n\r\nexport const DocumentationRoutes: Route[] = [\r\n\t{\r\n\t\tpath: 'documentation',\r\n component: DocumentationComponent,\r\n resolve: { connection: ConnectionResolver }\r\n\t}\r\n];\r\n\r\n// 3. then inside your component\r\n export class ChatComponent {\r\n private _connection: SignalRConnection;\r\n\r\n constructor(route: ActivatedRoute) { \r\n }\r\n \r\n ngOnInit() {\r\n this.connection = this.route.snapshot.data['connection'];\r\n }\r\n \r\n} \r\n```\r\n### 2. inject signalr\r\nCreating a client-server connection can be done by calling the connect method on the Signalr instance.\r\n```\r\n// inside your component.\r\nconstructor(private _signalR: SignalR) {\r\n}\r\n\r\nsomeFunction() {\r\n this._signalR.connect().then((c) => {\r\n //do stuff\r\n });\r\n \r\n \r\n \r\n}\r\n```\r\nThis approach has several drawbacks:\r\nWaitTime: \r\n - Take into account, it can take several second to establish connection with the server and thus for the promise to resolve. This is especially true when a websocket-transport connection is not possible and signalr tries to fallback to other transports like serverSentEevents and long polling. Is it adviceable to keep your end user aware by showing some form of progress. \r\nMore difficult to unit test:\r\n - If you want to write unit tests against the connection, you need to mock Signalr instance first. \r\n\r\n### listen to connectionstatus changes during connect (>= v2.0.6)\r\nFrom version 2.0.6 onwards you can subscribe to connectionstatus changes upon connecting to the server.\r\nForst you ask signalr to create a connection. Then on the connection object you can subscribe to the status observable before calling \r\nthe start method.\r\n\r\nFYI: connect() is now shorthand for createConnection().start(), meaning without subscribing to status changes \r\n```\r\nlet conx = this._signalR.createConnection();\r\nconx.status.subscribe((s) => console.warn(s.name));\r\nconx.start().then((c) => {\r\n...\r\n});\r\n```\r\n\r\n\r\n## Configuration\r\nYou can configure Singalr on 2 different levels: \r\n#### 1. Module level: \r\nThe module level, is where you typically provide the default configuration. This is were you pass in the default hubname, serverurl, qs (query string parameters), and transport. When, somewhere in your application, Singalr.connect() method is invoked without parameters, it will use this default configuration. \r\n```\r\nimport { SignalRModule } from 'ng2-signalr';\r\nimport { SignalRConfiguration, ConnectionTransport } from 'ng2-signalr';\r\n\r\n// <= v1.0.9\r\nconst config = new SignalRConfiguration();\r\nconfig.hubName = 'Ng2SignalRHub'; //default\r\nconfig.qs = { user: 'donald' };\r\nconfig.url = 'http://ng2-signalr-backend.azurewebsites.net/';\r\n// Specify one Transport: config.transport = ConnectionTransports.longPolling; or fallback options with order like below. Defaults to best avaliable connection.\r\nconfig.transport = [ConnectionTransports.webSockets, ConnectionTransports.longPolling];\r\n\r\n@NgModule({\r\n imports: [ \r\n SignalRModule.configure(config)\r\n ]\r\n})\r\n...\r\n\r\nSignalr.connect(); //HERE: module level configuration is used when trying to connect\r\n```\r\n#### 2. Connection level: \r\nYou can always configure signalr on a per connection level. For this, you need to invoke Singalr.connect(options) method, passing in an options parameter, of type ConnectionOptions. Behind the scenes, Signalr connect method will merge the provided options parameter, with the default (module) configuration, into a new configuration object, and pass that to signalr backend. \r\n```\r\nimport { SignalRModule } from 'ng2-signalr';\r\nimport { IConnectionOptions, SignalR } from 'ng2-signalr';\r\n\r\nlet options: IConnectionOptions = { hubName: 'MyHub' };\r\nSignalr.connect(options);\r\n```\r\n\r\n\r\n\r\n## How to listen for server side events\r\n```\r\n// 1.create a listener object\r\nlet onMessageSent$ = new BroadcastEventListener('ON_MESSAGE_SENT');\r\n \r\n// 2.register the listener\r\nthis.connection.listen(onMessageSent$);\r\n \r\n// 3.subscribe for incoming messages\r\nonMessageSent$.subscribe((chatMessage: ChatMessage) => {\r\n this.chatMessages.push(chatMessage);\r\n});\r\n```\r\n### listenFor shorthand:\r\n When using listenFor method, you can skip the first step in the approach above. Here the listen method returns you the BroadvastEventListener, that you can then subscribe to.\r\n```\r\nlet onMessageSent$ = this.connection.listenFor('ON_MESSAGE_SENT');\r\nonMessageSent$.subscribe( ...\r\n```\r\n## How to invoke a server method\r\n```\r\n// invoke a server side method\r\nthis.connection.invoke('GetNgBeSpeakers').then((data: string[]) => {\r\n this.speakers = data;\r\n});\r\n\r\n// invoke a server side method, with parameters\r\nthis.connection.invoke('ServerMethodName', new Parameters()).then((data: string[]) => {\r\n this.members = data;\r\n});\r\n``` \r\n \r\n## How to listen for connection status\r\n```\r\nthis.connection.status.subscribe((status: ConnectionStatus) => {\r\n this.statuses.push(status);\r\n});\r\n```\r\n\r\n## Also supported \r\n```\r\n// start/stop the connection\r\nthis.connection.start();\r\nthis.connection.stop();\r\n \r\n// listen for connection errors\r\nthis.connection.errors.subscribe((error: any) => {\r\n this.errors.push(error);\r\n});\r\n```\r\n## Unit testing\r\nNg2-signalr comes with a component, specifically built, for making your unit tests easy to write and with few lines of code: SignarlMockManager. The 'SignarlMockManager', can be asked a mocked implementation of your signalr client connection, be using its mock property. The mock connection it's interface is identical to any real signalr connection, that you get back from the Signarl.connect() method. You can use the mock to spy on certain method calls, and verify invocations in your tests. Also, on the mockmanager itself, you will find methods to trigger 'server' like behavior. Both errors$ and status$ properties, can be used for this, and simulate server errors or connectionstatus changes. For more information about, the signarl connection lifecycle, I refer to the [official documentation](https://docs.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/handling-connection-lifetime-events), section Transport disconnection scenarios. Also, the listeners property on the MockManager, holds a collection of all client-server method observers, returned as rxjs subjects. These subject can then be used to simulate a server message being sent over the wire. \r\n\r\n```\r\n it('I want to simulate an error or status event, in my unit test',\r\n inject([ChatComponent], (component: ChatComponent) => {\r\n\r\n connectionMockManager.errors$.next('An error occured'); //triggers the connection.error.subscribe(() => {});\r\n connectionMockManager.status$.next(ConnectionStatuses.slowConnection); //triggers the connection.status.subscribe(() => {});\r\n ....\r\n\r\n}));\r\n\r\nit('I want to simulate several ChatMessages received, in my unit test',\r\n inject([ChatComponent], (component: ChatComponent) => {\r\n\r\n let publisher = connectionMockManager.listeners['OnMessageSent'];\r\n\r\n publisher.next(new ChatMessage('Hannes', 'a message')); //triggers the BroadcastEventListener.subscribe(() => {});\r\n publisher.next(new ChatMessage('Hannes', 'a second message')); // ''\r\n\r\n expect(component.chatMessages).toEqual([\r\n new ChatMessage('Hannes', 'a message'),\r\n new ChatMessage('Hannes', 'a second message')\r\n ]);\r\n}));\r\n\r\n```\r\nFor more info, certainly check out the live demo, unit testing section.\r\n\r\n\r\n\r\n## Detailed webpack install\r\n```\r\nnpm install jquery signalr expose-loader --save\r\n\r\n//inside vendor.ts\r\nimport 'expose-loader?jQuery!jquery';\r\nimport '../node_modules/signalr/jquery.signalR.js';\r\n```\r\n\r\n### Detailed systemjs install (starting from v2.0.0)\r\n```\r\n {\r\n 'ng2-signalr' : 'node_modules/ng2-signalr/bundles/ng2-singalr.umd.(?min).js'\r\n }\r\n```\r\n\r\n>>>>>>> af93c8777fb64c74f74a875e5da60a168f410e06\r\n\r\n## Issue Reporting\r\n\r\nIf you have found a bug or if you have a feature request, please report them at this repository issues section. \r\n\r\n## Contributing\r\n\r\nPull requests are welcome!\r\n\r\n## Building\r\n\r\nUse `tsc` to compile and build. A `/dist` folder is generated.\r\n\r\n\r\n##TODO: Code coverage\r\n\r\nUse `npm test` cmd to compile and run all tests. \r\n\r\n## Unit testing\r\n\r\nUse `npm test` cmd to compile and run all tests. Test runner is configured with autowatching and 'progress' as test reporter. \r\n\r\n \r\n","maintainers":[{"name":"dharapvj","email":"vj4tech@gmail.com"}],"time":{"modified":"2022-04-05T04:19:06.715Z","created":"2018-01-23T05:25:16.740Z","3.0.0":"2018-01-23T05:25:16.740Z"},"homepage":"https://github.com/dharapvj/ngx-signalR","keywords":["signalR","typescript","angular 2","angular 4","angular 5"],"repository":{"type":"git","url":"git+https://github.com/dharapvj/ngx-signalR.git"},"author":{"name":"Hannes Neukermans"},"bugs":{"url":"https://github.com/dharapvj/ngx-signalr/issues"},"license":"MIT","readmeFilename":"README.md"}