{"id":14108428,"url":"https://github.com/rodgc/ngx-socket-io","last_synced_at":"2025-05-14T18:05:04.642Z","repository":{"id":21479445,"uuid":"93007396","full_name":"rodgc/ngx-socket-io","owner":"rodgc","description":"Socket.IO module for Angular","archived":false,"fork":false,"pushed_at":"2025-04-15T18:20:23.000Z","size":774,"stargazers_count":268,"open_issues_count":2,"forks_count":91,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-09T17:03:29.230Z","etag":null,"topics":["angular","angular2","angular4","javascript","ngx-socket-io","socket","socket-io","tyepscript"],"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/rodgc.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-06-01T02:18:47.000Z","updated_at":"2025-05-05T03:50:42.000Z","dependencies_parsed_at":"2023-11-08T23:32:55.657Z","dependency_job_id":"1d64ac6d-eddb-41d0-918c-f78c0d6837b5","html_url":"https://github.com/rodgc/ngx-socket-io","commit_stats":{"total_commits":134,"total_committers":27,"mean_commits":4.962962962962963,"dds":0.6716417910447761,"last_synced_commit":"af80686a0a978d05e61567a70b0831a8f8a5b923"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodgc%2Fngx-socket-io","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodgc%2Fngx-socket-io/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodgc%2Fngx-socket-io/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rodgc%2Fngx-socket-io/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rodgc","download_url":"https://codeload.github.com/rodgc/ngx-socket-io/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198514,"owners_count":22030965,"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":["angular","angular2","angular4","javascript","ngx-socket-io","socket","socket-io","tyepscript"],"created_at":"2024-08-14T10:01:26.574Z","updated_at":"2025-05-14T18:04:59.634Z","avatar_url":"https://github.com/rodgc.png","language":"TypeScript","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["Wrappers"],"readme":"# ngx-socket-io\n\n[![Build Status](https://travis-ci.org/rodgc/ngx-socket-io.svg?branch=master)](https://travis-ci.org/rodgc/ngx-socket-io)\n[![npm version](https://badge.fury.io/js/ngx-socket-io.svg)](https://badge.fury.io/js/ngx-socket-io)\n[![npm downloads](https://img.shields.io/badge/Downloads-132%2Fmonth-brightgreen.svg)](https://github.com/rodgc/ngx-socket-io)\n\n[Socket.IO](http://socket.io/) module for Angular\n\n## Install\n\n`npm install ngx-socket-io`\n\n**Important:**\n\nMake sure you're using the proper corresponding version of socket.io on the server.\n\n| Package Version | Socket-io Server Version | Angular version |\n| --------------- | ------------------------ | --------------- |\n| v3.4.0          | v2.2.0                   |                 |\n| v4.1.0          | v4.0.0                   | 12.x            |\n| v4.2.0          | v4.0.0                   | 13.x            |\n| v4.3.0          | v4.5.1                   | 14.x            |\n| v4.4.0          | v4.5.1                   | 15.x            |\n| v4.5.0          | v4.5.1                   | 16.x            |\n| v4.6.1          | v4.7.2                   | 17.x            |\n| v4.7.0          | v4.7.2                   | 18.x            |\n| v4.8.1          | v4.8.1                   | 19.x            |\n\n## How to use\n\n### Import and configure SocketIoModule for NgModule based applications\n\n```ts\nimport { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';\n\nconst config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [BrowserModule, SocketIoModule.forRoot(config)],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nWe need to configure `SocketIoModule` module using the object `config` of type `SocketIoConfig`, this object accepts two optional properties they are the same used here [io(url[, options])](https://socket.io/docs/v4/client-initialization/#Options).\n\nNow we pass the configuration to the static method `forRoot` of `SocketIoModule`\n\n### Import and configure SocketIoModule for standalone based applications\n\nIn app.config.ts use the following:\n\n```ts\nimport { ApplicationConfig } from '@angular/core';\nimport { SocketIoModule, SocketIoConfig, provideSocketIo } from 'ngx-socket-io';\n\nconst config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };\n\nexport const appConfig: ApplicationConfig = {\n  providers: [provideSocketIo(config)],\n};\n```\n\nIn standalone applications, there is no `AppModule` to import `SocketIoModule`. Instead, we use `provideSocketIo(config)` directly in the providers' configuration. The usage of the socket instance remains the same as in an NgModule-based application.\n\n### Using your socket Instance\n\nThe `SocketIoModule` provides now a configured `Socket` service that can be injected anywhere inside the `AppModule`.\n\n```typescript\nimport { Injectable } from '@angular/core';\nimport { Socket } from 'ngx-socket-io';\nimport { map } from 'rxjs/operators';\n\n@Injectable()\nexport class ChatService {\n  constructor(private socket: Socket) {}\n\n  sendMessage(msg: string) {\n    this.socket.emit('message', msg);\n  }\n  getMessage() {\n    return this.socket.fromEvent('message').pipe(map(data =\u003e data.msg));\n  }\n}\n```\n\n### Using multiple sockets with different end points\n\nIn this case we do not configure the `SocketIoModule` directly using `forRoot`. What we have to do is: extend the `Socket` service, and call `super()` with the `SocketIoConfig` object type (passing `url` \u0026 `options` if any).\n\n```typescript\nimport { Injectable, NgModule } from '@angular/core';\nimport { Socket } from 'ngx-socket-io';\n\n@Injectable()\nexport class SocketOne extends Socket {\n  constructor() {\n    super({ url: 'http://url_one:portOne', options: {} });\n  }\n}\n\n@Injectable()\nexport class SocketTwo extends Socket {\n  constructor() {\n    super({ url: 'http://url_two:portTwo', options: {} });\n  }\n}\n\n@NgModule({\n  declarations: [\n    //components\n  ],\n  imports: [\n    SocketIoModule,\n    //...\n  ],\n  providers: [SocketOne, SocketTwo],\n  bootstrap: [\n    /** AppComponent **/\n  ],\n})\nexport class AppModule {}\n```\n\nNow you can inject `SocketOne`, `SocketTwo` in any other services and / or components.\n\n## API\n\nMost of the functionalities here you are already familiar with.\n\nThe only addition is the `fromEvent` method, which returns an `Observable` that you can subscribe to.\n\n### `socket.of(namespace: string)`\n\nTakes a namespace and returns an instance based on the current config and the given namespace,\nthat is added to the end of the current url.\nSee [Namespaces - Client Initialization](https://socket.io/docs/v4/namespaces/#client-initialization).\nInstances are reused based on the namespace.\n\n### `socket.on(eventName: string, callback: Function)`\n\nTakes an event name and callback.\nWorks the same as in Socket.IO.\n\n### `socket.removeListener(eventName: string, callback?: Function)`\n\nTakes an event name and callback.\nWorks the same as in Socket.IO.\n\n### `socket.removeAllListeners(eventName?: string)`\n\nTakes an event name.\nWorks the same as in Socket.IO.\n\n### `socket.emit(eventName:string, ...args: any[])`\n\nSends a message to the server.\nWorks the same as in Socket.IO.\n\n### `socket.fromEvent\u003cT\u003e(eventName: string): Observable\u003cT\u003e`\n\nTakes an event name and returns an Observable that you can subscribe to.\n\n### `socket.fromOneTimeEvent\u003cT\u003e(eventName: string): Promise\u003cT\u003e`\n\nCreates a Promise for a one-time event.\n\nYou should keep a reference to the Observable subscription and unsubscribe when you're done with it.\nThis prevents memory leaks as the event listener attached will be removed (using `socket.removeListener`) ONLY and when/if you unsubscribe.\n\nIf you have multiple subscriptions to an Observable only the last unsubscription will remove the listener.\n\n## Know Issue\n\nFor `error TS2345` you need to add this to your `tsconfig.json`.\n\n```json\n{\n  ...\n  \"compilerOptions\": {\n    ...\n    \"paths\": {\n      \"rxjs\": [\"node_modules/rxjs\"]\n    }\n  },\n}\n```\n\n## Related projects\n\n- [bougarfaoui/ng-socket-io](https://github.com/bougarfaoui/ng-socket-io) - Socket.IO module for Angular\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodgc%2Fngx-socket-io","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frodgc%2Fngx-socket-io","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frodgc%2Fngx-socket-io/lists"}