Skip to content

Angular bindings for communicating with the sails backend

License

Notifications You must be signed in to change notification settings

Alorel/ngx-sails

Repository files navigation

Angular bindings for the sails socket client

Used the abandoned ngx-sails as a base.

Installation

  • npm install socket.io-client@^2.0.0
  • npm install @aloreljs/ngx-sails@CHECK_BELOW:
    • Angular 16: ^4.0.0
    • 15: ^3.0.0
    • 14: ^2.1.0
    • 13: ^2.0.0

Configuration

The following injection tokens can be included in your app module to configure the client:

Provide an existing socket.io instance:

import {IO_INSTANCE} from '@aloreljs/ngx-sails';

@NgModule({
  providers: [{
    provide: IO_INSTANCE,
    useValue: someIoRef
  }]
})
export class AppModule {}

Provide client configuration:

import {NGX_SAILS_CONFIG, NgxSailsConfig} from '@aloreljs/ngx-sails';

const config: NgxSailsConfig = {
  uri: '/foo',
  // socket.io options
  options: {
  
  },
  // default headers
  headers: {
  
  }
}

@NgModule({
  providers: [{
    provide: NGX_SAILS_CONFIG,
    useValue: config
  }]
})
export class AppModule {}

Usage

import {SailsClient} from '@aloreljs/ngx-sails';

@Component({})
export class MyComponent {
  public constructor(private readonly sails: SailsClient) {}

  public listenForEvent(): void {
    this.sails.on('eventName').subscribe(response => {});
  }
 
  public makeRequest(): void {
    this.sails.get('url').subscribe();
    this.sails.post('url', {foo: 'bar'}).subscribe(response => {});
  }

  public emitEventWithoutAResponse(): void {
    this.sails.emit('eventName', 'arg1', 'arg2');
  }

  public emitEventWithAResponse(): void {
    this.sails.emitAndWait('eventName', 'arg1', 'arg2').subscribe(response => {})
  }
}