Package Exports

ngx-socketio2
ngx-socketio2/bundles/ngx-socketio2.umd.js
ngx-socketio2/fesm2015/ngx-socketio2.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-socketio2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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