{"id":19990071,"url":"https://github.com/sketch7/signalr-client","last_synced_at":"2025-04-05T17:03:39.680Z","repository":{"id":26997501,"uuid":"112112322","full_name":"sketch7/signalr-client","owner":"sketch7","description":"SignalR client library built on top of @aspnet/signalr. This gives you more features and easier to use.","archived":false,"fork":false,"pushed_at":"2025-01-24T10:50:55.000Z","size":1000,"stargazers_count":53,"open_issues_count":14,"forks_count":8,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T16:03:32.534Z","etag":null,"topics":["push","real-time","realtime","rxjs","signalr","signalr-client"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sketch7.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-26T19:58:34.000Z","updated_at":"2025-01-24T10:49:52.000Z","dependencies_parsed_at":"2024-06-21T05:47:46.656Z","dependency_job_id":"cce7dc51-0e1a-43f6-84ad-d758b2a60df6","html_url":"https://github.com/sketch7/signalr-client","commit_stats":{"total_commits":56,"total_committers":5,"mean_commits":11.2,"dds":0.5,"last_synced_commit":"3a1706dc22aa3398cb878b4dcc904dbb3db7468c"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sketch7%2Fsignalr-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sketch7%2Fsignalr-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sketch7%2Fsignalr-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sketch7%2Fsignalr-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sketch7","download_url":"https://codeload.github.com/sketch7/signalr-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["push","real-time","realtime","rxjs","signalr","signalr-client"],"created_at":"2024-11-13T04:50:57.307Z","updated_at":"2025-04-05T17:03:39.659Z","avatar_url":"https://github.com/sketch7.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"[projectUri]: https://github.com/sketch7/signalr-client\n[changeLog]: ./CHANGELOG.md\n[developmentWorkflowWiki]: ./docs/DEVELOPMENT-WORKFLOW.md\n[apiWiki]: ./docs/API.md\n\n[npm]: https://www.npmjs.com/package/@ssv/signalr-client\n\n# @ssv/signalr-client\n[![CI](https://github.com/sketch7/signalr-client/actions/workflows/ci.yml/badge.svg)](https://github.com/sketch7/signalr-client/actions/workflows/ci.yml)\n[![npm version](https://badge.fury.io/js/%40ssv%2Fsignalr-client.svg)](https://badge.fury.io/js/%40ssv%2Fsignalr-client)\n\nSignalR client library built on top of **@aspnet/signalr**. This gives you more features and easier to use.\n\n**Quick links**\n\n[Change logs][changeLog] | [Project Repository][projectUri] | [API Documentation][apiWiki]\n\n## Features\n* Fully **TypeScript** and **ReactiveX**\n* Multiple hub connections state management\n* Connection state notifications \n* Update connection details easily without losing current connection state\n* Subscriptions are handled through **RxJS** streams\n* Reconnection strategies\n    * Random strategy\n    * BackOff strategy\n    * Random BackOff strategy\n    * Custom strategy\n* Auto re-subscriptions after getting disconnected and re-connected\n* Contains minimal dependencies (**SignalR** and **RxJS** only)\n* **No constraints** with any framework\n* Designed to be straight forward integrated with **any framework** such as *[Angular](#angular-adapter)*, *Aurelia*, *React*, *Vue*, etc...\n\n## Samples\n* Real world example [(***Orleans Heroes***)](https://github.com/sketch7/orleans-heroes):\n    * Client: Angular\n    * Server: Microsoft Orleans integrated with [Sketch7 SignalR](https://github.com/sketch7/SignalR.Orleans)\n* [Angular basic example](#angular-basic-example)\n\n## Installation\n\nGet library via [npm]\n\n```bash\nnpm install @ssv/signalr-client @microsoft/signalr\n```\n\n## API Documentation\nCheck out the [API Documentation Page][apiWiki].\n\n\n## Usage\nThere are **three simple steps**:\n\n1. Register `HubConnectionFactory` in your DI eco system\n2. In application bootstrap:\n    * Register one or more hub connections (by injecting `HubConnectionFactory` and using `create`)\n3. Somewhere in your components/services you need:\n    * Inject `HubConnectionFactory` and call method `get` by passing the `key` for a specific hub connection, this will return `HubConnection`\n    * Use `HubConnection` to use enhanced signalr features\n\n## Angular Adapter\n1. Register `HubConnectionFactory` as a **Provider**\n\nYou're all set! Now it's fully integrated with your Angular application.\n\nContinue from the [vanilla usage - step 2](#usage) onwards\n\n### Angular Basic Example\n```ts\nimport { HubConnectionFactory } from \"@ssv/signalr-client\";\n\n@NgModule({\n  providers: [\n    HubConnectionFactory,\n    ...\n  ]\n})\nexport class AppModule {\n\n    constructor(factory: HubConnectionFactory) {\n    factory.create(\n      { key: \"hero\", endpointUri: \"/hero\" },\n      { key: \"user\", endpointUri: \"/userNotifications\" }\n    );\n  }\n}\n```\n\n*sample usage in components:*\n```ts\nimport { Component, OnInit, OnDestroy } from \"@angular/core\";\nimport { HubConnectionFactory, HubConnection } from \"@ssv/signalr-client\";\n\n@Component({\n  selector: \"hero-detail\",\n  templateUrl: \"./hero-detail.component.html\"\n})\nexport class HeroDetailComponent implements OnInit, OnDestroy {\n\n  private hubConnection: HubConnection\u003cHeroHub\u003e;\n  private readonly _destroy$ = new Subject\u003cvoid\u003e();\n\n  constructor(hubFactory: HubConnectionFactory) {\n    this.hubConnection = hubFactory.get\u003cHeroHub\u003e(\"hero\");\n  }\n\n  ngOnInit(): void {\n    this.hubConnection.connect().pipe(\n      takeUntil(this._destroy$),\n    ).subscribe(() =\u003e console.log(`connected!!`));\n\n    this.hubConnection.on\u003cHero\u003e(\"HeroChanged\", \"singed\").pipe(\n      takeUntil(this._destroy$),\n    ).subscribe(x =\u003e console.log(`hero :: singed :: update received`, x));\n  }\n\n  ngOnDestroy() {\n    this._destroy$.next();\n    this._destroy$.complete();\n  }\n}\n\nexport interface HeroHub {\n  HeroChanged: string;\n}\n\nexport interface Hero {\n  id: string;\n  name: string;\n  health: number;\n}\n```\n\n### Raw Basic Example\nCreate an instance of `HubConnectionFactory` ideally will be registered into your DI (if you're using any library) or you can create instance manually.\n\nStep 1:\n - Register Hubs in the `HubConnectionFactory`\n```ts\nimport { HubConnectionFactory, HubConnection } from \"@ssv/signalr-client\";\n\nconst hubFactory = new HubConnectionFactory();\nhubFactory.create(\n\t{ key: \"hero\", endpointUri: \"/hero\" },\n\t{ key: \"user\", endpointUri: \"http://localhost:62551/real-time/user\" }\n);\n```\n\nStep2:\n- Get Hub by Key\n- Connect\n- subscribe for `on` \n```ts\nconst hubConnection = hubFactory.get\u003cHeroHub\u003e(\"hero\");\nconst hubConnection$$ = hubConnection.connect().subscribe(() =\u003e {\n\tconsole.log(`connected!`);\n});\n\nconst data$$ = hubConnection.on\u003cstring\u003e(\"Send\").subscribe(val =\u003e {\n\tconsole.log(`send :: data received \u003e\u003e\u003e`, val);\n});\n```\n\n### Contributions\n\nCheck out the [development guide][developmentWorkflowWiki].\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsketch7%2Fsignalr-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsketch7%2Fsignalr-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsketch7%2Fsignalr-client/lists"}