@addapptables/ng-web-socket
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    ADDAPPTABLES ng-web-socket

    ADDAPPTABLES ng-web-socket is a library for angular, this library has adapters for socket-io and signalr

    Getting Started

    For socket-io see the following link

    For signal-r see the following link

    Choose the version corresponding to your Angular version:

    Angular @addapptables/ng-web-socket
    8 2.x
    7 1.x
    npm i @addapptables/ng-web-socket --S
    

    Create a websocket service

    // gateway with params
    @WebSocketGateway<SocketIOClient.ConnectOpts>({
      url: 'http://localhost:8081',
      autoConnect: true
    })
    export class WebSocketService {
     
      // web socket connection
      @WebSocketServer()
      server: SocketIOClient.Socket;
     
      // subscribe event
      @Subscribe('news')
      connectedUsers(data: any) {
        console.log(data);
        this.server.emit('my other event', { my: 'data' });
      }
     
      // emit events
      sendMessage() {
        this.server.emit('my other event', { my: 'data' });
      }
    }

    import adapter and WebSocketService into the module

    import { NgWebSocketModule } from '@addapptables/ng-web-socket';
    import { SocketIoAdapter } from '@addapptables/ng-socket-io';
    @NgModule({
      imports: [
        ...,
        NgWebSocketModule.forRoot(SocketIoAdapter, [WebSocketService, /* other services socket here*/])
        /*
        Or
        NgWebSocketModule.forRoot(SocketIoAdapter, [])
        Adapter is required
        */
      ]
    })
    export class AppModule { }

    for child modules

    import { NgWebSocketModule } from '@addapptables/ng-web-socket';
    @NgModule({
      imports: [
        ...,
        NgWebSocketModule.forFeature([WebSocketService, /* other services socket here*/])
      ]
    })
    export class AppModule { }

    If you require a service to obtain the url, you can do the following

    // gateway with params
    @WebSocketGateway<SocketIOClient.ConnectOpts>({
      autoConnect: false
    })
    export class WebSocketService implements ISocketWithOptions<SocketIOClient.ConnectOpts> {
     
      // web socket connection
      @WebSocketServer()
      server: SocketIOClient.Socket;
     
      constructor(
        @Inject(API_BASE_URL) private _baseUrl: string,
        private _managerSocketAdapter: ManagerSocketAdapter
      ) { }
     
      //build options for websocket
      withOptions(): WebSocketOptions<SocketIOClient.ConnectOpts> {
        const token = '123';
        const url = this._baseUrl + '?token=' + token;
        return {
          url 
        };
      }
     
      connect() {
        this._managerSocketAdapter.connect(this);
      }
     
      // subscribe event
      @Subscribe('news')
      connectedUsers(data: any) {
        console.log(data);
        this.server.emit('my other event', { my: 'data' });
      }
     
      // emit events
      sendMessage() {
        this.server.emit('my other event', { my: 'data' });
      }
    }

    Inject websocket into the component

    @Component({
        ...
    })
    export class YourComponent implements OnInit {
     
      constructor(
        public _webSocketService: WebSocketService
      ) {
      }
     
      ngOnInit() {
        this._webSocketService.connect();
      }
    }

    Custom adapters

    Create a custom adapter:

    import * as io from 'socket.io-client';
    import { ISocket } from '@addapptables/ng-web-socket';
     
    @Injectable()
    // implements ISocket
    export class SocketIoAdapter implements ISocket<SocketIOClient.Socket, SocketIOClient.ConnectOpts> {
     
        // connect to ws transport
        connect(url: string, options?: SocketIOClient.ConnectOpts): Promise<SocketIOClient.Socket> {
            return new Promise((resolve, reject) => {
                try {
                    const ioFunc = (io as any).default ? (io as any).default : io;
                    const connection = ioFunc(url, options);
                    resolve(connection.connect());
                } catch (error) {
                    reject(error.message);
                }
            });
        }
     
        // bind events with current connection
        bindEvent(connection: SocketIOClient.Socket, event: string, callFunction: (...args: any[]) => void) {
            connection.on(event, callFunction);
        }
     
        // disconnect current connection
        disconnect(connection: SocketIOClient.Socket): Promise<void> {
            return new Promise((resolve, reject) => {
                try {
                    connection.disconnect();
                    resolve();
                } catch (error) {
                    reject(error.message);
                }
            });
        }
    }

    Install

    npm i @addapptables/ng-web-socket

    DownloadsWeekly Downloads

    0

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    225 kB

    Total Files

    48

    Last publish

    Collaborators

    • teogl