How to use @stomp/stompjs - 10 common examples

public connect() {
    const socket = SocketFactory;
    this.stompClient = Stomp.Stomp.over(socket);
    this.stompClient.reconnectDelay = 5000;
    this.stompClient.heartbeatIncoming = 0; // Typical value 0 - disabled
    this.stompClient.heartbeatOutgoing = 20000; // Typical value 20000 - every 20 seconds
    const _this = this;
    this.stompClient.connect({}, function(frame) {
      console.log('Connected to websocket. Now subscribing: ' + frame);

      _this.stompClient.send('/middleware/endpoint/subscribe');

      let group = []

      _this.messageSubscription = _this.stompClient.subscribe('/topic/device/', function(response) {
        _this.messageActivity();
        const msg = JSON.parse(response.body);
        group = _this._correlatedMessages.value[msg.correlationId];
        if (group) {

componentDidMount() {
    console.log('Component did mount');
    // The compat mode syntax is totally different, converting to v5 syntax
    // Client is imported from '@stomp/stompjs'
    this.client = new Client();

    this.client.configure({
      brokerURL: 'ws://localhost:8080/stomp',
      onConnect: () => {
        console.log('onConnect');

        this.client.subscribe('/queue/now', message => {
          console.log(message);
          this.setState({serverTime: message.body});
        });

        this.client.subscribe('/topic/greetings', message => {
          alert(message.body);
        });
      },
      // Helps during debugging, remove in production

StompService.prototype.initStompClient = function () {
        // Attempt connection, passing in a callback
        this.client = Stomp.client(this.config.url);
        // Configure client heart-beating
        this.client.heartbeat.incoming = this.config.heartbeat_in;
        this.client.heartbeat.outgoing = this.config.heartbeat_out;
        // Auto reconnect
        this.client.reconnect_delay = this.config.reconnect_delay;
        if (!this.config.debug) {
            this.debug = function () { };
        }
        // Set function to debug print messages
        this.client.debug = this.debug;
    };
    /**

StompRService.prototype.initStompClient = function () {
        // disconnect if connected
        this.disconnect();
        // url takes precedence over socketFn
        if (typeof (this._config.url) === 'string') {
            this.client = client(this._config.url);
        }
        else {
            this.client = over(this._config.url);
        }
        // Configure client heart-beating
        this.client.heartbeat.incoming = this._config.heartbeat_in;
        this.client.heartbeat.outgoing = this._config.heartbeat_out;
        // Auto reconnect
        this.client.reconnect_delay = this._config.reconnect_delay;
        if (!this._config.debug) {
            this.debug = function () { };
        }
        // Set function to debug print messages
        this.client.debug = this.debug;
        // Default messages
        this.setupOnReceive();

StompRService.prototype.initStompClient = function () {
        // disconnect if connected
        this.disconnect();
        // url takes precedence over socketFn
        if (typeof (this._config.url) === 'string') {
            this.client = client(this._config.url);
        }
        else {
            this.client = over(this._config.url);
        }
        // Configure client heart-beating
        this.client.heartbeat.incoming = this._config.heartbeat_in;
        this.client.heartbeat.outgoing = this._config.heartbeat_out;
        // Auto reconnect
        this.client.reconnect_delay = this._config.reconnect_delay;
        if (!this._config.debug) {
            this.debug = function () { };
        }
        // Set function to debug print messages
        this.client.debug = this.debug;
        // Default messages
        this.setupOnReceive();
        // Receipts
        this.setupReceipts();
    };

listen ({commit}) {
    const socket = new SockJS('/socket')
    const stomp = Stomp.over(socket)
    stomp.connect({}, f => {
      stomp.subscribe(`/topic/task-instance-error`, d => {
        commit(NOTIFY_TASK_ERR, d)
      })
    }, e => {
      console.log(e)
    })
  },
  pollMe ({commit}) {

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import * as jQuery from 'jquery';
import * as fabric from 'fabric';
import * as StompJS from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';
import * as Highcharts from '../../lib/highcharts/highcharts.src';
import * as hopscotch from 'hopscotch';
import * as EventEmitter2 from 'eventemitter2';

window['$'] = jQuery;
window['jQuery'] = jQuery;
window['fabric'] = fabric.fabric;
window['SockJS'] = SockJS;
window['Stomp'] = StompJS.Stomp;
window['hopscotch'] = hopscotch;
window['Highcharts'] = Highcharts;
window['EventEmitter2'] = EventEmitter2;

* APPLICATION IMPORTS
 */
import 'zone-blacklist.js';
import * as jQuery from 'jquery';
import * as fabric from 'fabric';
import * as StompJS from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';
import * as Highcharts from '../../lib/highcharts/highcharts.src';
import * as hopscotch from 'hopscotch';
import * as EventEmitter2 from 'EventEmitter2';

window['$'] = jQuery;
window['jQuery'] = jQuery;
window['fabric'] = fabric.fabric;
window['SockJS'] = SockJS;
window['Stomp'] = StompJS.Stomp;
window['hopscotch'] = hopscotch;
window['Highcharts'] = Highcharts;
window['EventEmitter2'] = EventEmitter2;
import * as summernote from 'summernote';
window['summernote'] = summernote;

*/
import * as jQuery from 'jquery';
import * as fabric from 'fabric';
import * as StompJS from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';
import * as Highcharts from '../../lib/highcharts/highcharts.src';
import * as hopscotch from 'hopscotch';
import * as EventEmitter2 from 'eventemitter2';
import * as draggablePoints from '../../lib/draggable-points/draggable-points';
import * as HighchartsExporting from '../../lib/highcharts-exporting@4.2.1';

window['$'] = jQuery;
window['jQuery'] = jQuery;
window['fabric'] = fabric.fabric;
window['SockJS'] = SockJS;
window['Stomp'] = StompJS.Stomp;
window['hopscotch'] = hopscotch;
window['Highcharts'] = Highcharts;
window['EventEmitter2'] = EventEmitter2;
import * as summernote from 'summernote';
window['summernote'] = summernote;
window['draggablePoints'] = draggablePoints;
window['HighchartsExporting'] = HighchartsExporting;

initializeWebSocketConnection() {
    this.closeWebSocket();

    const ws = new SockJS(this.serverUrl);
    this.stompClient = Stomp.over(ws);
    const that = this;
    this.stompClient.connect({}, function(frame) {
      this.chatStomp = that.stompClient.subscribe('/chat', message => {
        const eventUserDto: EventUserDto = JSON.parse(message.body);
        that.eventService.addEvent(eventUserDto);
      });
    });
  }