ngx-socketio2

A better Socket.IO module for Angular.

Features

• The ability to type event objects.
• More complete API.
• Support chain call.
• Responsive event listener.

Prerequisites

• Angular >= 11.0.0
• Socket.IO >= 4.0.0

Install

npm i ngx-socketio2

Usage

Import and configure the SocketioModule:

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:

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<string>('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).

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' })
  }
}

@NgModule({
  // ...
  providers: [
    // ...
    Socket1Service,
    Socket2Service
  ]
})
export class YourModule { }

API

| Class | API | Description | | -------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | SocketioModule | .forRoot({ url[, options] }) | https://socket.io/docs/v4/client-api/#iourl | | Socket | .id | https://socket.io/docs/v4/client-api/#socketid | | | .connected | https://socket.io/docs/v4/client-api/#socketconnected | | | .disconnected | https://socket.io/docs/v4/client-api/#socketdisconnected | | | .io | https://socket.io/docs/v4/client-api/#socketio | | | .auth | https://socket.io/docs/v4/client-options/#auth | | | .connect() | https://socket.io/docs/v4/client-api/#socketconnect | | | .disconnect() | https://socket.io/docs/v4/client-api/#socketdisconnect | | | .send([...args][, ack]) | https://socket.io/docs/v4/client-api/#socketsendargs | | | .emit(eventName[, ...args][, ack]) | https://socket.io/docs/v4/client-api/#socketemiteventname-args | | | .on(eventName) | 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 |