SockJS service example for Angular 6+ applications

app.module.ts

//...
import { StompRService } from '@stomp/ng2-stompjs';
//...

@NgModule({
  //...
  providers: [
    //...
    StompRService,
    //...
})
export class AppModule {}

socket.service.ts

import { Injectable } from '@angular/core';
import { StompRService, StompConfig } from '@stomp/ng2-stompjs';
import { Message } from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';
import { Observable } from 'rxjs';

/**
 * Must add dependency "@stomp/ng2-stompjs": "^6.0.1"
 */
@Injectable({ providedIn: 'root' })
export class SocketService {
  constructor(private stompService: StompRService) {}

  private init(): void {
    if (!this.stompService.connected()) {
      this.stompService.config = this.stompConfig();

      this.stompService.initAndConnect();
    }
  }

  onEvent(): Observable<Message> {
    this.init();

    return this.stompService.subscribe('/event');
  }

  private stompConfig(): StompConfig {
    const provider = function() {
      return new SockJS('/api/socket');
    };

    const config = new StompConfig();
    config.url = provider;
    config.heartbeat_in = 0;
    config.heartbeat_out = 0;
    config.reconnect_delay = 10000;

    return config;
  }
}

WebsocketConfiguration.java

package infrastructure;

import org.springframework.boot.SpringBootConfiguration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * Websocket configuration
 * <p>
 * Based on example https://medium.com/oril/spring-boot-websockets-angular-5-f2f4b1c14cee
 * It uses maven dependency <artifactId>spring-boot-starter-websocket</artifactId>
 */
@SpringBootConfiguration
@EnableWebSocketMessageBroker
class WebsocketConfiguration implements WebSocketMessageBrokerConfigurer {
    
    /**
     * Connection url exposed to clients     
     */
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/api/socket").setAllowedOrigins("*").withSockJS();
    }

    /**
     * Used by clients to send messages to server: /api/msg/*
     * <p>
     * Used by clients to listen to messages from server: /event
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.setApplicationDestinationPrefixes("/api/msg").enableSimpleBroker("/event");
    }
}