@oril/ng-stomp-sock

Angular 12 (6+) wrapper for using STOMP.js over SockJS

Usage no npm install needed!

<script type="module">
  import orilNgStompSock from 'https://cdn.skypack.dev/@oril/ng-stomp-sock';
</script>

README

ng-stomp-sock

This package is an Angular 12 (6+) wrapper for using STOMP.js over SockJS.

ng-stomp-sock demo

Installation

  1. Use the node package manager npm to install ng-stomp-sock.
npm install @oril/ng-stomp-sock @stomp/stompjs sockjs-client
  1. In your src/polyfills.ts file add (🛎️This is a workaround for STOMP.js global is not defined issue):
(window as any).global = window;

You are configured now.

Usage

Module

Import the NgStompSockModule in your AppModule.

import { NgStompSockModule } from '@oril/ng-stomp-sock'
//...
@NgModule({
  imports: [
    //...
    NgStompSockModule.config({
      url: 'SOCKET_API_URL'
    }),
    //...
  ],
  //...
})
//...

Component or Service

import { StompSockService, StompSockWebSocket, WsCommand } from '@oril/ng-stomp-sock';

export class AppComponent implements OnInit {

  public activityWS: StompSockWebSocket;

  private _endpoint = 'endpoint';
  private _requestEndpoint = 'request_endpoint';

  constructor(
    private _webSocketService: StompSockService
  ) { }

  ngOnInit() {
    this.connectToAPI();
  }

  public connectToAPI() {
    this._webSocketService.connected$
      .pipe(filter(connected => !!connected))
      .subscribe(() => this.connectToEndpoint());
  }

  public connectToEndpoint() {
    this.activityWS = this._webSocketService.getWebSocket(this._endpoint);
    this._subscribeActivity();
  }

  public send() {
    this.activityWS.send(this._requestEndpoint, { });
  }

  public disconnect() {
    this._webSocketService.unsubscribe(this._endpoint);
  }

  private _subscribeActivity() {
    this.activityWS.on<any>(WsCommand.MESSAGE)
      .subscribe(response => console.log(response));
  }
}

API

StompSockService

Factory service to manage StompSockWebSocket instances.

Methods

getWebSocket(destination: string, headers?: any): StompSockWebSocket

Subscribe to a STOMP Broker location.

Parameters
Name Type Description
destination string STOMP Broker location
headers (optional) any Request header

unsubscribe(destination: string)

Unsubscribe STOMP broker from a subscription.

Parameters
Name Type Description
destination string Endpoint string

Properties

connected$: BehaviorSubject<boolean>

STOMP Client connection status. 🛎️Only if STOMP Client is connected STOMP Broker can subscribe.

StompSockWebSocket

Wrapper for STOMP Client over SockJS

Methods

on<T>(event: WsCommand): Observable<T>

Returns messages from STOMP Client filtered by event.

Parameters
Name Type Description
event WsCommand Filter event type

send(destination: string, data: any): void

Sends a message to a named destination.

Parameters
Name Type Description
destination string Endpoint string
data Object Request headers

unsubscribe(): void

Unsubscribes instance.

Properties

stompClient: any

STOMP Client instance.

headers: any

STOMP Client headers.

get channel(): string

STOMP Client channel.

WebSocketConfig

Module config

interface

Name Type Description
url string Socket API URL
reconnectInterval number Reconnect interval in ms (Default: 3000)
ssr boolean Disables sockets connection while rendering on a server (Default: false)

WsCommand

STOMP Client message types

enum

Value Description
MESSAGE Success response type
ERROR Error response type

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT