已连接但不返回任何消息的StompJS Websocket

Question

我试着用@stomp/stompjs来连接websocket，尽管在控制台上进行了成功的连接，但是数据不会更新，任何关于我做错了什么的想法，我已经在线阅读了所有的东西，我不明白为什么它不能工作。

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Stomp } from '@stomp/stompjs';
import * as SockJS from 'sockjs-client';
import { MessagesService } from 'src/app/services/messages.service';

@Component({
  selector: 'app-classtwo',
  templateUrl: './classtwo.component.html',
  styleUrls: ['./classtwo.component.scss']
})
export class ClasstwoComponent implements OnInit, OnDestroy {

  public mail_list:any [] = []
  private stompClient = Stomp.over(new SockJS('http://localhost:8080/mailbot-websocket'));

  constructor(private service:MessagesService, private router: Router) { }

  ngOnInit(): void {
    this._loadEmailsFromRestApi()
    this._loadEmailsFromWebSocket()
  }

  private _loadEmailsFromWebSocket() {
    let that = this;
    this.stompClient.connect({}, () =>{
      that.stompClient.subscribe('/topic/processed/TYPE_II', this.callback)
    })
  }

  private _loadEmailsFromRestApi() {
    this.service.getPendingMailsByCategory('TYPE_II').subscribe( res => {
      this.mail_list = res
    })
  }

  ngOnDestroy(): void {
    if (this.stompClient != null) {
      this.stompClient.disconnect(()=> {
       console.log("DISCONECTED");
      });
    }
  }

  goToMailDescription(category:string, id:string) {
    this.router.navigate(['/mailDetail/' + category + '/' + id]);
  }

  callback = (message:any) => {
    if(message.body)
      this.mail_list = JSON.parse(message.body)
  }

}

注意:它似乎在重新加载页面后接收到消息，但只有当您继续运行它时，它才是相同的，直到重新加载。

Answer 1

按以下方式声明stomp客户端

public stompClient: CompatClient | undefined

然后初始化它，并在init部分中调用它。

ngOnInit() { this.initWebsocket() }

initWebsocket(){
    let ws:WebSocket = new SockJS(`${DOMAIN_URL}`);
    this.stompClient = Stomp.over(ws);
    const that = this;
    this.stompClient.connect({}, (frame:any) => {
      if(!that.stompClient){
        return;
      }

      this._subcribeTopic(`${TOPIC_URL}`);
    });
  }

然后，只需添加订阅方法，然后根据需要执行其余的操作，下面是一个示例

private _subcribeTopic(topic: string) {
    if(!this.stompClient){
      console.error("Error to configure websocket");
      return;
    }
    // You could add something like a switch statement here in case you have more than one topic
    this.stompClient.subscribe(topic, (message:any) => {
      if (message.body) {
        let model: any = JSON.parse(message.body);
        this._updateWebSocketResponse(model);
      }
    });
  }

  private _updateWebSocketResponse (response:any) {
    console.log(response)
  }

我建议停止与垃圾收集器的websocket连接，但这真的取决于您

ngOnDestroy() { this.stompClient.disconnect() }