Custom Socket.io-Client for Angular

readme.md

Dependencies

• Socket.io client: npm install -S socket.io-client
• Socket.io types definition: npm install -D @types/socket.io-client

Configuration

• Copy socket.service.ts to project directory
• Import SocketService in module providers
• Inject SocketService to component class

  constructor (private readonly socket: SocketService) {
    this.socket.connect('CHANGE_TO_YOUR_WS_URI');
  }

• Ready to use socket instance

Documentation

Connect to socket server

this.socket.connect('CHANGE_TO_YOUR_WS_URI');

Disconnect from socket server

this.socket.disconnect();

Listen to event from socket server

# with payload type definition
this.socket.addListener<string>('message').subscribe(message => {
  # message is string
  console.log('Message from server', message);
});

# without payload type definition
this.socket.addListener('message').subscribe(message => {
  console.log('Message from server', message);
});

Trigger event to socket server

this.socket.emit('room-join', this.roomname);

Remove listener from spesific event

this.socket.removeListeners('message');

# or

this.socket.removeAllListeners('message');

Remove all listeners from socket server

this.socket.removeAllListeners();

Get socket client instance

const instance = this.socket.socket;
console.log(instance.id);

socket.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import * as io from 'socket.io-client';

@Injectable()
export class SocketService {
  private ioSocket: SocketIOClient.Socket;

  connect(url: string) {
    if (this.ioSocket && this.ioSocket.connected) {
      this.ioSocket.disconnect();
    }
    this.ioSocket = io(url, { transports: ['websocket'] });
  }

  disconnect(close?: any) {
    this.checkSocketInstance();
    return this.ioSocket.disconnect.apply(this.ioSocket, arguments);
  }

  emit(eventName: string, data?: any) {
    this.checkSocketInstance();
    return this.ioSocket.emit.apply(this.ioSocket, arguments);
  }

  addListener<T>(eventName: string): Observable<T> {
    this.checkSocketInstance();
    return Observable.create((observer: any) => {
      this.ioSocket.on(eventName, (data: T) => {
        observer.next(data);
      });
    });
  }

  removeListener(eventName: string) {
    this.checkSocketInstance();
    return this.ioSocket.removeListener.apply(this.ioSocket, arguments);
  }

  removeAllListeners(eventName?: string) {
    this.checkSocketInstance();
    return this.ioSocket.removeAllListeners.apply(this.ioSocket, arguments);
  }

  get socket() {
    this.checkSocketInstance();
    return this.ioSocket;
  }

  private checkSocketInstance() {
    if (!this.ioSocket) {
      throw new Error('No websocket instance, use connect(URL) to create socket instance');
    }
  }

}