{"id":18191415,"url":"https://github.com/saleweaver/angular-rsocket","last_synced_at":"2026-01-19T13:08:00.129Z","repository":{"id":257824516,"uuid":"872025590","full_name":"saleweaver/angular-rsocket","owner":"saleweaver","description":"Angular service for integrating RSocket communication into your Angular application","archived":false,"fork":false,"pushed_at":"2024-10-14T18:44:45.000Z","size":224,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-23T01:47:08.012Z","etag":null,"topics":[],"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/saleweaver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-13T15:39:06.000Z","updated_at":"2024-10-14T18:44:48.000Z","dependencies_parsed_at":"2024-10-13T16:11:37.412Z","dependency_job_id":"46e315b3-8aca-4536-bab1-e1c3671dc818","html_url":"https://github.com/saleweaver/angular-rsocket","commit_stats":null,"previous_names":["saleweaver/angular-rsocket"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleweaver%2Fangular-rsocket","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleweaver%2Fangular-rsocket/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleweaver%2Fangular-rsocket/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/saleweaver%2Fangular-rsocket/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/saleweaver","download_url":"https://codeload.github.com/saleweaver/angular-rsocket/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246774580,"owners_count":20831567,"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":[],"created_at":"2024-11-03T06:00:49.566Z","updated_at":"2026-01-19T13:08:00.121Z","avatar_url":"https://github.com/saleweaver.png","language":"TypeScript","readme":"Angular RSocket Service\n------------------------\n\nAn Angular service for integrating RSocket communication into your Angular applications, leveraging Angular’s Signals and dependency injection system. This service allows you to easily connect to an RSocket server, handle streams and messages, and manage authentication tokens flexibly via a token provider.\n\n### Features\n\n-\tRSocket Integration: Seamlessly integrate RSocket communication into your Angular application.\n\n-\tAngular Signals: Utilize Angular’s reactive Signal system for real-time data updates.\n\n- Flexible Token/Auth Management: Provide authentication tokens via configuration or a custom TokenProvider.\n\n- Automatic Reconnection: Configurable automatic reconnection logic with retry attempts and delays.\n\n\n\u003cdiv style=\"background-color: #5258d1; border-left: 10px solid #2196F3; padding: 10px;\"\u003e\n Currently only Websocket Transport is supported, but a future release will include support for other transports.\n\u003c/div\u003e\n\n\n### Installation\n\nTo install the Angular RSocket Service, simply run:\n\n```bash\nnpm install @michaeldatastic/angular-rsocket\n```\n\n\n### Contributing\n\nThank you for considering contributing to the Angular RSocket Service Library! We welcome all types of contributions including bug fixes, new features, documentation improvements, and more.\nPlease see [Contributing.md](CONTRIBUTING.md) for more information on how to contribute to this project.\n\n\n### Usage\n\n\n1. Configuration\n\nIn your application’s configuration, provide the RSocket service using the provideRSocket function. This function allows you to specify the RSocket connection configuration and an optional custom token provider.\n```typescript\n// app.config.ts\n\nimport { ApplicationConfig } from '@angular/core';\nimport { provideRouter } from '@angular/router';\nimport { provideZoneChangeDetection } from '@angular/core';\nimport { provideRSocket } from '@michaeldatastic/angular-rsocket';\nimport { routes } from './app.routes';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    provideRouter(routes),\n    provideRSocket({\n      url: 'ws://localhost:8080/rsocket',\n      // Other optional configurations can be specified here\n    }),\n  ],\n};\n\n```\n\n2. Injecting and Using the RSocket Service in a Custom Service\n\nIt’s recommended to handle subscriptions and data sharing in your own services. This allows you to control how subscriptions are managed and whether they are reused or not.\n\n```typescript\n// board-updates.service.ts\n\nimport { Injectable } from '@angular/core';\nimport { RSocketService } from '@michaeldatastic/angular-rsocket';\nimport { Signal } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class BoardUpdatesService {\n  public updates$: Signal\u003cany[] | null\u003e;\n\n  constructor(private rsocketService: RSocketService) {\n    // Create a subscription to the 'board.updates' stream\n    this.updates$ = this.rsocketService.requestStream\u003cany\u003e('board.updates');\n  }\n}\n```\n\n3. Using the Custom Service in a Component\n\nFinally, you can use your custom service in a component to display real-time updates from the RSocket server.\n\n```typescript\n// app.component.ts\n\nimport { Component, effect, inject } from '@angular/core';\nimport { BoardUpdatesService } from './board-updates.service';\nimport { Signal } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    \u003cdiv *ngIf=\"updates$()\"\u003e\n      \u003cdiv *ngFor=\"let item of updates$()\"\u003e\n        \u003c!-- Display your streamed data here --\u003e\n        {{ item | json }}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n})\nexport class AppComponent {\n  private boardUpdatesService: BoardUpdatesService = inject(BoardUpdatesService);\n  updates$: Signal\u003cany[] | null\u003e;\n\n  constructor() {\n    this.updates$ = this.boardUpdatesService.updates$;\n\n    effect(() =\u003e {\n      console.log('Received Stream Data:', this.updates$());\n    });\n  }\n}\n```\n\n4. Passing an Authentication Token\n\nIf your RSocket server requires authentication, you can provide a token in the configuration:\n\n```typescript\nprovideRSocket({\n  url: 'ws://localhost:8080/rsocket',\n  token: 'your-authentication-token',\n});\n```\n\n\nFor more advanced token management, such as retrieving tokens from an authentication service or handling token refresh logic, you can provide a custom TokenProvider.\nFirst, create a custom token provider by implementing the AngularRSocketTokenProvider interface:\n\n```typescript\n// Interface\n\nexport interface AngularRSocketTokenProvider {\n  getToken(): string | Signal\u003cstring\u003e | null;\n}\n```\n\n\n```typescript\n// custom-token-provider.ts\n\nimport { Injectable, inject } from '@angular/core';\nimport { AngularRSocketTokenProvider } from '@michaeldatastic/angular-rsocket';\nimport { AuthService } from './auth.service';\nimport { Signal, signal, effect } from '@angular/core';\n\n@Injectable()\nexport class CustomTokenProvider implements AngularRSocketTokenProvider {\n  private authService: AuthService = inject(AuthService);\n  private tokenSignal: Signal\u003cstring\u003e;\n\n  constructor() {\n    // Initialize the token signal with the current token\n    this.tokenSignal = signal(this.authService.getToken());\n\n    // Update the token signal whenever the token changes\n    effect(() =\u003e {\n      this.tokenSignal.set(this.authService.getToken());\n    });\n  }\n\n  getToken(): string | Signal\u003cstring\u003e {\n    return this.tokenSignal;\n  }\n}\n```\n\nThen, provide the custom token provider in your application configuration:\n\n```typescript\n// app.config.ts\n\nimport { CustomTokenProvider } from './custom-token-provider';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    // ... other providers\n    provideRSocket(\n      {\n        url: 'ws://localhost:8080/rsocket',\n        // Other configuration options\n      },\n      CustomTokenProvider // Pass the custom token provider class\n    ),\n  ],\n};\n```\n\n5. Advanced Configuration Options\n\nThe provideRSocket function accepts an AngularRSocketConfig object with the following optional properties, only url is required:\n\n```typescript\nimport {IdentitySerializer, JsonSerializer} from \"rsocket-core\";\n\nprovideRSocket({\n  url: 'ws://localhost:8080/rsocket',         // RSocket server URL *\u003crequired\u003e*\n  dataSerializer: IdentitySerializer | JsonSerializer,         // Custom data serializer\n  metadataSerializer: IdentitySerializer | JsonSerializer, // Custom metadata serializer\n  keepAlive: 60000,                           // Keep-alive interval in milliseconds\n  lifetime: 180000,                           // Connection lifetime in milliseconds\n  dataMimeType: WellKnownMimeType.APPLICATION_JSON,  // Data MIME type\n  metadataMimeType: WellKnownMimeType.MESSAGE_RSOCKET_COMPOSITE_METADATA, // Metadata MIME type\n  maxReconnectAttempts: 5,                    // Max reconnection attempts\n  reconnectDelay: 2000,                       // Delay between reconnection attempts in milliseconds\n  token: 'your-authentication-token',         // Authentication token (string or Signal)\n});\n```\n\n6. Managing Subscriptions\n\nSince this is a library, it’s up to you to decide how to manage subscriptions and whether to reuse them. If you call requestStream multiple times with the same route, each call will create a new subscription to the RSocket stream.\n\n**Important Note**: Multiple subscriptions to the same route can lead to increased server load and redundant data processing. If you want to reuse subscriptions, consider managing them in a shared service, as shown in the example above.\n\n7. Handling Disconnections\n\nThe RSocketService automatically attempts to reconnect based on the configuration. You can also manually disconnect by calling the disconnect method.\n\n```typescript\n// In your custom service or component\nthis.rsocketService.disconnect();\n```\n\n**Note**: Be cautious when manually disconnecting, as it will affect all components using the shared RSocketService instance.\n\n8. Additional Methods\n\nThe RSocketService provides several methods for different interaction models:\n\n```typescript\nrequestStream\u003cT\u003e(route: string, data?: any, requestItems?: number): WritableSignal\u003cT[] | null\u003e\nrequestResponse\u003cT\u003e(route: string, data: any): WritableSignal\u003cT | null\u003e\nfireAndForget(route: string, data: any): void\n  channel\u003cT\u003e(route: string, dataIterable: Iterable\u003cany\u003e, requestItems?: number): WritableSignal\u003cT | null\u003e\n```\n\n9. Example: Using requestResponse in a Custom Service\n\n```typescript\n// data-service.ts\n\nimport { Injectable } from '@angular/core';\nimport { RSocketService } from '@michaeldatastic/angular-rsocket';\nimport { Signal } from '@angular/core';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DataService {\n  constructor(private rsocketService: RSocketService) {}\n\n  getData(): Signal\u003cany | null\u003e {\n    return this.rsocketService.requestResponse\u003cany\u003e('your.route', { some: 'data' });\n  }\n}\n```\n\n```typescript\n// component.ts\n\nimport { Component, effect } from '@angular/core';\nimport { DataService } from './data-service';\nimport { Signal } from '@angular/core';\n\n@Component({\n  selector: 'app-data',\n  template: `\n    \u003cdiv *ngIf=\"data$()\"\u003e\n      \u003c!-- Display your data here --\u003e\n      {{ data$() | json }}\n    \u003c/div\u003e\n  `,\n})\nexport class DataComponent {\n  data$: Signal\u003cany | null\u003e;\n\n  constructor(private dataService: DataService) {\n    this.data$ = this.dataService.getData();\n\n    effect(() =\u003e {\n      console.log('Received Response Data:', this.data$());\n    });\n  }\n}\n```\n\n### License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["External Integration"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaleweaver%2Fangular-rsocket","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaleweaver%2Fangular-rsocket","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaleweaver%2Fangular-rsocket/lists"}