ngx-route-socket v1.0.3

ngx-route-socket

Route-specific Socket.IO module for Angular 7

This library is a wrapper around ngx-socket-io package.

Install

npm install ngx-route-socket

How to use

Polyfills

polyfills.ts

/** socket.io-parser */
(window as any).global = window;

Import and extend RouteSocket

checkin.socket.ts

import { Injectable, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { RouteSocket, RouteSocketConfig } from 'ngx-route-socket';

export const CheckinSocketConfigProvider = {
  provide: 'CHECKIN_SOCKET_CONFIG',
  useValue: new RouteSocketConfig({url: 'http://localhost:3001', routerPath: '/checkin', debug: true}),
};

@Injectable()
export class CheckinSocket extends RouteSocket {
  constructor(
    @Inject('CHECKIN_SOCKET_CONFIG') config: RouteSocketConfig,
    router: Router) {
    super(config, router);
  }
}

Register our newly created CheckinSocket and CheckinSocketConfigProvider

app.module.ts

...
import { CheckinSocket, CheckinSocketConfigProvider } from './checkin.socket';
import { CheckinComponent } from './checkin.component';

@NgModule({
  ...
  providers: [
    ...
    CheckinSocketConfigProvider,
    CheckinSocket,
    ...
  ],
  ...
})

Using your CheckinSocket instance

checkin.component.ts

import { Component, OnInit } from '@angular/core';
import { CheckinSocket } from './checkin.socket';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-checkin',
  template: '<h3>Checkin Page</h3>'
})
export class CheckinComponent implements OnInit {

  constructor(private checkinSocket: CheckinSocket) { }

  ngOnInit() {
    this.checkinSocket.emit('message', 'Hello World!');
    this.checkinSocket
      .fromEvent<{msg: string}>('message')
      .pipe(
        map(data => data.msg)
      ).subscribe(msg => console.log(msg));
  }
}

API

See ngx-socket-io for API details

LICENSE

MIT