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