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

}

注意：似乎在重新加载页面后它会收到该消息，但只有在您继续运行它的情况下它是相同的，直到再次重新加载。

标签： angulartypescriptwebsocketstomp

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