Как обеспечить веб-сокет как наблюдаемый в сервисе с использованием STOMP и SockJS? - PullRequest
0 голосов
/ 01 марта 2019

Я почти там с некоторым кодом для предоставления веб-сокетов, используя Observable в службе Angular, но не уверен в правильном синтаксисе / реализации в определении службы.Как настроить это, чтобы оно заработало?

В частности, я думаю, что моя функция subscribeToTopic () не совсем правильная, и я не уверен, как передать функцию обратного вызова (которая обрабатывает сообщение) изкомпонент для stompClient.subscribe () в сервисе.

(Примечание: мне было предложено использовать Observable и Service на внешнем интерфейсе, и я должен использовать SockJS и STOMP в качестве внутреннего (Spring)Framework) использует это, я также новичок в Angular, поэтому изучаю все это на работе!)

websockets.service.ts:

@Injectable({
  providedIn: 'root' // Register service in root component so accessible to all parts of the app
})
export class WebsocketsService {
  private serverUrl = ''; // http://localhost:8080/socket'
  private stompClient;

  subscribeToTopic(topic: string, callbackfn): Observable<Wsbasemsg[]> {
    return this.stompClient.subscribe(topic, (message) => callbackfn);
  }

  unsubscribeFromTopic(subscription: any) {
    subscription.unsubscribe(); // Unsubscribe from topic
  }

  constructor(){
    this.initializeWebSocketConnection();
  }

  initializeWebSocketConnection(){
    let ws = new SockJS(this.serverUrl); // Create a new SockJS socket
    this.stompClient = Stomp.over(ws); // Create a STOMP client to send messages over the socket
    this.stompClient.connect(); // Connect to the server using SockJS
  }
}

componentA.ts: (ятакже не знаете, как указать здесь вызов подписки?)

  handleLiveUpdate = function(message) {
    let wsMsg = JSON.parse(message);  // Parse JSON
    // etc...
  }

  ngOnInit() {
    // Subscribe to live updates over websockets:
    this.wsSubscription = this.websocketsService.subscribeToTopic('topic_A').subscribe(this.handleLiveUpdate);
  }

Еще два компонента, componentB.ts и componentC.ts, очень похожи на componentA.ts, но подписываются на разные темы и обрабатывают данные по-разному, но принцип тот же.

Спасибо

...