Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hyperlife1119/ngx-socketio2
A better Socket.IO module for Angular.
https://github.com/hyperlife1119/ngx-socketio2
angular angular10 angular11 angular12 angular13 angular14 angular15 ngx-socket-io ngx-socketio observable reactive rxjs socket-io socket-io-client socketio socketio-client
Last synced: 3 months ago
JSON representation
A better Socket.IO module for Angular.
- Host: GitHub
- URL: https://github.com/hyperlife1119/ngx-socketio2
- Owner: HyperLife1119
- License: mit
- Created: 2021-12-15T15:13:47.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-22T19:29:55.000Z (9 months ago)
- Last Synced: 2024-05-22T20:38:16.867Z (9 months ago)
- Topics: angular, angular10, angular11, angular12, angular13, angular14, angular15, ngx-socket-io, ngx-socketio, observable, reactive, rxjs, socket-io, socket-io-client, socketio, socketio-client
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-socketio2
- Size: 1.91 MB
- Stars: 11
- Watchers: 0
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ngx-socketio2
A better [Socket.IO](https://socket.io) module for [Angular](https://angular.io).
[](https://npmjs.com/package/ngx-socketio2)
[](https://www.github.com/angular/angular)
[](https://www.codefactor.io/repository/github/hyperlife1119/ngx-socketio2)
## Features
- The ability to type event objects.
- More complete API.
- Support chain call.
- Responsive event listener.
## Prerequisites
- [Angular](https://angular.io) >= 11.0.0
- [Socket.IO](https://socket.io) >= 4.0.0
## Install
```shell
npm i ngx-socketio2
```
## Usage
Import and configure the `SocketioModule`:
```ts
import { SocketioModule } from 'ngx-socketio2';
@NgModule({
// ...
imports: [
// ...
SocketioModule.forRoot({
url: 'http://localhost:4200',
options: {
// Socket.IO client options
}
})
]
})
export class YourModule { }
```
Getting Socketio Service via DI:
```ts
import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socketio2';
import { tap } from 'rxjs/operators';
@Injectable()
export class YourService {
constructor(private socket: Socket) {}
send(msg: string) {
this.socket.emit('message', msg);
}
sendMultiple(msg1: string, msg2: string) {
// Chain call.
this.socket.emit('message', msg1).emit('message', msg2);
}
receive() {
return this.socket.on('message').pipe(
tap((args: string) => {
// Do something...
})
);
}
}
```
### Using multiple sockets with different endpoints
In this case, we no longer need the `SocketioModule`. Instead, use a new service that extends from the `Socketio` service and passes the configuration by calling `super(config)`.
```ts
import { Injectable } from '@angular/core';
import { Socket } from 'ngx-socketio2';
@Injectable()
export class Socket1Service extends Socket {
constructor() {
super({ url: 'http://localhost:4200' })
}
}
@Injectable()
export class Socket2Service extends Socket {
constructor() {
super({ url: 'http://localhost:6200' })
}
}
```
```ts
@NgModule({
// ...
providers: [
// ...
Socket1Service,
Socket2Service
]
})
export class YourModule { }
```
## API
| Class | API | Description |
| -------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| SocketioModule | .forRoot({ url[, options] }) | [https://socket.io/docs/v4/client-api/#iourl](https://socket.io/docs/v4/client-api/#iourl) |
| Socket | .id | [https://socket.io/docs/v4/client-api/#socketid](https://socket.io/docs/v4/client-api/#socketid) |
| | .connected | [https://socket.io/docs/v4/client-api/#socketconnected](https://socket.io/docs/v4/client-api/#socketconnected) |
| | .disconnected | [https://socket.io/docs/v4/client-api/#socketdisconnected](https://socket.io/docs/v4/client-api/#socketdisconnected) |
| | .io | [https://socket.io/docs/v4/client-api/#socketio](https://socket.io/docs/v4/client-api/#socketio) |
| | .auth | [https://socket.io/docs/v4/client-options/#auth](https://socket.io/docs/v4/client-options/#auth) |
| | .connect() | [https://socket.io/docs/v4/client-api/#socketconnect](https://socket.io/docs/v4/client-api/#socketconnect) |
| | .disconnect() | [https://socket.io/docs/v4/client-api/#socketdisconnect](https://socket.io/docs/v4/client-api/#socketdisconnect) |
| | .send([...args][, ack]) | [https://socket.io/docs/v4/client-api/#socketsendargs](https://socket.io/docs/v4/client-api/#socketsendargs) |
| | .emit(eventName[, ...args][, ack]) | [https://socket.io/docs/v4/client-api/#socketemiteventname-args](https://socket.io/docs/v4/client-api/#socketemiteventname-args) |
| | .on(eventName) | [https://socket.io/docs/v4/client-api/#socketoneventname-callback](https://socket.io/docs/v4/client-api/#socketoneventname-callback) |
| | .once(eventName) | Similar to `.on(eventName)`, but only responds once. |
| | .compress(compress) | [https://socket.io/docs/v4/client-api/#socketcompressvalue](https://socket.io/docs/v4/client-api/#socketcompressvalue) |