StompJS Websocket 已连接但没有 return 任何消息

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() }

StompJS Websocket 已连接但没有 return 任何消息

StompJS Websocket connected but doesn't return any messages

stomp

websocket

typescript

angular